左侧弹出二级导航jQuery 仅做记录

最新推荐文章于 2023-08-29 22:29:29 发布
最新推荐文章于 2023-08-29 22:29:29 发布
阅读量276 收藏
点赞数
分类专栏： html

左侧二级菜单手风琴效果  http://www.jq22.com/jquery-info16488 

 

转自 jq22.com  http://www.jq22.com/jquery-info306
可直接去下载

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>左侧弹出二级导航jQuery</title>
    <link rel="stylesheet" href="css/index.css" type="text/css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //商品分类
            $('.all-goods .item').hover(function () {
                $(this).addClass('active').find('s').hide();
                $(this).find('.product-wrap').show();
            }, function () {
                $(this).removeClass('active').find('s').show();
                $(this).find('.product-wrap').hide();
            });
        });
    </script>


</head>

<body>


<div class="nav-wrap">

    <div class="nav">

        <div class="goods">

            <h2 class="title">商品分类</h2>

            <div class="all-goods">

                <div class="item btnone">

                    <div class="product">

                        <h3><a href="http://www.jq22.com/">LOGO</a></h3>

                        <s></s>

                    </div>

                    <div class="product-wrap pos01">

                        <div class="cf">

                            <div class="fl wd252 pr20">

                                <h2><a href="http://www.jq22.com/">LOGO</a></h2>

                                <p class="lh30">两大超值套餐任选，最低只需588元。</p>

                                <ul class="cf">

                                    <li><a href="http://www.jq22.com/" target="_blank">LOGO设计</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">LOGO案例</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">LOGO常识</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">VI常识</a></li>

                                </ul>

                            </div>

                            <dl class="fl wd185 pl20 blee">

                                <dt class="lh36">促销活动</dt>

                                <dd><a href="http://www.jq22.com/" target="_blank" title="logo"><img
                                        src="images/0931524708.jpg"></a></dd>

                            </dl>

                        </div>

                    </div>

                </div>


                <div class="item">

                    <div class="product">

                        <h3><a href="http://www.jq22.com/">名片</a></h3>

                        <s></s>

                    </div>

                    <div class="product-wrap pos02">

                        <div class="cf">

                            <div class="fl wd252 pr20">

                                <h2><a href="http://www.jq22.com/">名片</a></h2>

                                <p class="lh30">免费在线设计，印刷低至3.8元/盒，全国包邮。</p>

                                <ul class="cf">

                                    <li><a href="http://www.jq22.com/" target="_blank">名片设计</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">名片印刷</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">名片模板</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">名片欣赏</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">名片常识</a></li>

                                </ul>

                            </div>

                            <dl class="fl wd185 pl20 blee">

                                <dt class="lh36">促销活动</dt>

                                <dd><a href="http://www.jq22.com/" target="_blank" title="logo"><img
                                        src="images/0931224551.jpg"></a></dd>

                            </dl>

                        </div>

                    </div>

                </div>


                <div class="item">

                    <div class="product">

                        <h3><a href="http://www.jq22.com/">宣传单</a></h3>

                        <s></s>

                    </div>

                    <div class="product-wrap pos03">

                        <div class="cf">

                            <div class="fl wd252 pr20">

                                <h2><a href="http://www.jq22.com/">宣传单</a></h2>

                                <p class="lh30">快速设计，高效印刷，省心更放心。</p>

                                <ul class="cf">

                                    <li><a href="http://www.jq22.com/" target="_blank">宣传单设计</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">宣传单印刷</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">宣传单模板</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">宣传单常识</a></li>

                                </ul>

                            </div>

                            <dl class="fl wd185 pl20 blee">

                                <dt class="lh36">促销活动</dt>

                                <dd><a href="http://www.jq22.com/" target="_blank" title="宣传单"><img
                                        src="images/0935017257.jpg"></a></dd>

                            </dl>

                        </div>

                    </div>

                </div>


                <div class="item">

                    <div class="product">

                        <h3><a href="http://www.jq22.com/">画册</a></h3>

                        <s></s>

                    </div>

                    <div class="product-wrap pos04">

                        <div class="cf">

                            <div class="fl wd252 pr20">

                                <h2><a href="http://www.jq22.com/">画册</a></h2>

                                <p class="lh30">专业设计师提供多种设计方案，设计印刷一站式。</p>

                                <ul class="cf">

                                    <li><a href="http://www.jq22.com/" target="_blank">画册设计</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">画册印刷</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">画册欣赏</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">画册常识</a></li>

                                </ul>

                            </div>

                            <dl class="fl wd185 pl20 blee">

                                <dt class="lh36">促销活动</dt>

                                <dd><a href="http://www.jq22.com/" target="_blank" title="画册"><img
                                        src="images/0933307415.jpg"></a></dd>

                            </dl>

                        </div>

                    </div>

                </div>


                <div class="item">

                    <div class="product">

                        <h3><a href="http://www.jq22.com/">优惠券</a></h3>

                        <s></s>

                    </div>

                    <div class="product-wrap pos05">

                        <div class="cf">

                            <div class="fl wd252 pr20">

                                <h2><a href="http://www.jq22.com/">优惠券</a></h2>

                                <p class="lh30">设计18元起，印刷低至0.1元/张，全国包邮。</p>

                                <ul class="cf">

                                    <li><a href="http://www.jq22.com/" target="_blank">优惠券设计</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">优惠券印刷</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">优惠券模板</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">优惠券常识</a></li>

                                </ul>

                            </div>

                            <dl class="fl wd185 pl20 blee">

                                <dt class="lh36">促销活动</dt>

                                <dd><a href="http://www.jq22.com/" target="_blank" title="优惠券"><img
                                        src="images/0937077379.jpg"></a></dd>

                            </dl>

                        </div>

                    </div>

                </div>


                <div class="item">

                    <div class="product">

                        <h3><a href="http://www.jq22.com/">会员卡</a></h3>

                        <s></s>

                    </div>

                    <div class="product-wrap pos06">

                        <div class="cf">

                            <div class="fl wd252 pr20">

                                <h2><a href="http://www.jq22.com/">会员卡</a></h2>

                                <p class="lh30">PVC卡/贵宾卡/购物卡/礼品卡定制，快速设计18元起。</p>

                                <ul class="cf">

                                    <li><a href="http://www.jq22.com/" target="_blank">会员卡设计</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">会员卡定制</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">会员卡模板</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">会员卡常识</a></li>

                                </ul>

                            </div>

                            <dl class="fl wd185 pl20 blee">

                                <dt class="lh36">促销活动</dt>

                                <dd><a href="http://www.jq22.com/" target="_blank" title="会员卡"><img
                                        src="images/0933565639.jpg"></a></dd>

                            </dl>

                        </div>

                    </div>

                </div>


                <div class="item">

                    <div class="product">

                        <h3><a href="http://www.jq22.com/">不干胶贴</a></h3>

                        <s></s>

                    </div>

                    <div class="product-wrap pos07">

                        <div class="cf">

                            <div class="fl wd252 pr20">

                                <h2><a href="http://www.jq22.com/">不干胶贴</a></h2>

                                <p class="lh30">铜版纸不干胶贴，快速设计印刷。</p>

                                <ul class="cf">

                                    <li><a href="http://www.jq22.com/" target="_blank">不干胶贴设计</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">不干胶贴印刷</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">不干胶贴模板</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">不干胶贴常识</a></li>

                                </ul>

                            </div>

                            <dl class="fl wd185 pl20 blee">

                                <dt class="lh36">促销活动</dt>

                                <dd><a href="http://www.jq22.com/" target="_blank" title="不干胶贴"><img
                                        src="images/0932237986.jpg"></a></dd>

                            </dl>

                        </div>

                    </div>

                </div>


                <div class="item">

                    <div class="product">

                        <h3><a href="http://www.jq22.com/">手提袋</a></h3>

                        <s></s>

                    </div>

                    <div class="product-wrap pos08">

                        <div class="cf">

                            <div class="fl wd252 pr20">

                                <h2><a href="http://www.jq22.com/">手提袋</a></h2>

                                <p class="lh30">纸质手提袋定制，设计印刷全部搞定。</p>

                                <ul class="cf">

                                    <li><a href="http://www.jq22.com/" target="_blank">手提袋设计</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">手提袋印刷</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">手提袋模板</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">手提袋常识</a></li>

                                </ul>

                            </div>

                            <dl class="fl wd185 pl20 blee">

                                <dt class="lh36">促销活动</dt>

                                <dd><a href="http://www.jq22.com/" target="_blank" title="手提袋"><img
                                        src="images/0934218124.jpg"></a></dd>

                            </dl>

                        </div>

                    </div>

                </div>


                <div class="item">

                    <div class="product">

                        <h3><a href="http://www.jq22.com/">封套</a></h3>

                        <s></s>

                    </div>

                    <div class="product-wrap pos09">

                        <div class="cf">

                            <div class="fl wd252 pr20">

                                <h2><a href="http://www.jq22.com/">封套</a></h2>

                                <p class="lh30">提供大量设计模板，设计印刷一站式解决。</p>

                                <ul class="cf">

                                    <li><a href="http://www.jq22.com/" target="_blank">封套设计</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">封套印刷</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">封套模板</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">封套常识</a></li>

                                </ul>

                            </div>

                            <dl class="fl wd185 pl20 blee">

                                <dt class="lh36">促销活动</dt>

                                <dd><a href="http://www.jq22.com/" target="_blank" title="封套"><img
                                        src="images/0932539383.jpg"></a></dd>

                            </dl>

                        </div>

                    </div>

                </div>


                <div class="item">

                    <div class="product">

                        <h3><a href="http://www.jq22.com/">喜帖</a></h3>

                        <s></s>

                    </div>

                    <div class="product-wrap pos10">

                        <div class="cf">

                            <div class="fl wd252 pr20">

                                <h2><a href="http://www.jq22.com/">喜帖</a></h2>

                                <p class="lh30">时尚照片喜帖，上传照片自主DIY。</p>

                                <ul class="cf">

                                    <li><a href="http://www.jq22.com/" target="_blank">喜帖设计</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">喜帖模板</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">喜帖常识</a></li>

                                    <li><a href="http://www.jq22.com/" target="_blank">喜帖常见问题</a></li>

                                </ul>

                            </div>

                            <dl class="fl wd185 pl20 blee">

                                <dt class="lh36">促销活动</dt>

                                <dd><a href="http://www.jq22.com/" target="_blank" title="喜帖"><img
                                        src="images/0934415585.jpg"></a></dd>

                            </dl>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>
</body>
</html>

 

css/index.css

 

/*reset*/
html, body, p, h1, h2, h3, h4, h5, h6, form, input, textarea, select, button, fieldset, legend, img, ul, ol, li, dl, dt, dd, th, td, pre, blockquote {
    margin: 0;
    padding: 0
}

html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased
}

body {
    background-color: #fafafa;
    color: #666;
    min-height: 100%;
    height: auto !important;
    height: 100%
}

body, button, input, select, textarea, h1, h2, h3, h4, h5, h6 {
    font: 12px/1 "宋体", "Microsoft Yahei", arial, simhei
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

img, fieldset {
    border: 0;
    vertical-align: middle
}

a {
    text-decoration: none
}

a:visited {
}

a:hover {
    text-decoration: underline
}

a:active {
}

ul, li, ol {
    list-style: none
}

strong, b {
    font-weight: normal
}

em, i {
    font-style: normal
}

iframe {
    display: block
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px 18px;
    padding: 0.35em 0.625em 0.75em
}

legend {
    border: 0;
    padding: 0;
    white-space: normal;
    *margin-left: -7px
}

sup {
    vertical-align: text-top
}

sub {
    vertical-align: text-bottom
}

s {
    text-decoration: none;
}

/*public*/
.cf:after {
    content: "";
    clear: both;
    display: block;
    height: 0;
    overflow: hidden
}

.cf {
    zoom: 1
}

.fl {
    display: inline;
    float: left
}

.fr {
    display: inline;
    float: right
}

.lh36 {
    line-height: 36px
}

.lh30 {
    line-height: 30px
}

.pl20 {
    padding-left: 20px
}

h2 {
    font-family: "microsoft yahei";
    font-size: 14px;
}

.wd240 {
    width: 240px;
}

.wd252 {
    width: 232px;
}

.ht399 {
    height: 399px;
}

.ht14 {
    height: 14px;
}

.lh33 {
    line-height: 33px;
}

.lh23 {
    line-height: 23px;
}

.lh12 {
    line-height: 12px;
}

.pb10 {
    padding-bottom: 10px;
}

.pb20 {
    padding-bottom: 20px;
}

.pr20 {
    padding-right: 20px;
}

.wd204 {
    width: 204px;
}

.wd443 {
    width: 443px;
}

.wd185 {
    width: 185px;
}

.ml19 {
    margin-left: 19px;
}

.pt30 {
    padding-top: 30px;
}

.pb12 {
    padding-bottom: 12px;
}

.bt {
    border-top: 1px solid #eae7e7;
}

.gray {
    color: #999;
}

.blee {
    border-left: 1px solid #eeeeee;
}

.fwblod {
    font-weight: bold;
}


/* nav-wrap */
.nav-wrap {
    position: relative;
    *z-index: 2;
    width: 100%;
    background: #ff6600;
}

.nav {
    position: relative;
    width: 770px;
    height: 40px;
    margin: 0 auto;
    padding-left: 190px;
}

.goods {
    position: absolute;
    top: 0;
    left: 0;
    width: 190px;
    height: 40px;
}

.goods .title {
    background: #D25400;
}

.goods h2 a, .goods .title {
    display: block;
    height: 40px;
    padding-left: 20px;
    line-height: 40px;
    color: #fff;
}

.goods h2 a:hover {
    text-decoration: none;
}

.nav-list {
    height: 40px;
}

.nav-list li {
    float: left;
    margin-right: 1px;
}

.nav-list a {
    display: block;
    height: 40px;
    float: left;
    padding: 0 15px;
    text-align: center;
    color: #fff;
    font: bold 15px/40px "microsoft yahei";
    text-decoration: none;
}

.nav-list a:hover {
    background: #d25400;
    text-decoration: none;
}

.nav-list a.on {
    background: #d25400;
}

.all-goods {
    position: absolute;
    top: 40px;
    left: 0;
    width: 186px;
    height: 407px;
    background: #FAFAFA;
    border: solid #ff6600;
    border-width: 0 2px 2px;
    overflow: visible;
}

.all-goods .item {
    width: 186px;
    height: 36px;
    border-top: 1px solid #FFF;
    background: #f7f7f7;
}

.all-goods .btnone {
    border-top: none;
}

.all-goods .item .product {
    position: absolute;
    z-index: 999;
    width: 186px;
}

.all-goods .item .product h3 {
    width: 157px;
    height: 34px;
    padding-left: 28px;
    border-width: 1px 0;
    font-weight: normal;
    line-height: 36px;
}

.all-goods .item .product h3 a {
    color: #666666;
    font-size: 14px;
    font-family: "宋体";
}

.all-goods .item .product h3 a:hover {
    text-decoration: none;
}

.all-goods .item .product s {
    display: block;
    position: absolute;
    top: 13px;
    left: 167px;
    width: 6px;
    height: 9px;
}

.all-goods .active .product h3 {
    line-height: 32px;
    background-position: -12px -185px;
    background-color: #fff7f0;
    border: 1px solid #ffb556;
    border-width: 2px 0;
    width: 160px;
}

.all-goods .active .product h3 a {
    color: #ff6600;
}

.all-goods .product-wrap {
    position: absolute;
    width: 478px;
    z-index: 99;
    border: 2px solid #ffb556;
    background: #fff7f0;
    padding: 20px;
    display: none;
}

.all-goods .product-wrap p {
    color: #999999;
}

.all-goods .pos01 {
    left: 186px;
    top: 0px;
}

.all-goods .pos02 {
    left: 186px;
    top: 37px;
}

.all-goods .pos03 {
    left: 186px;
    top: 74px;
}

.all-goods .pos04 {
    left: 186px;
    top: 111px;
}

.all-goods .pos05 {
    left: 186px;
    top: 148px;
}

.all-goods .pos06 {
    left: 186px;
    top: 185px;
}

.all-goods .pos07 {
    left: 186px;
    bottom: -2px;
}

.all-goods .pos08 {
    left: 186px;
    bottom: -2px;
}

.all-goods .pos09 {
    left: 186px;
    bottom: -2px;
}

.all-goods .pos10 {
    left: 186px;
    bottom: -2px;
}

.all-goods .product-wrap h2 {
    font-size: 16px;
    color: #333;
    font-weight: bold;
}

.all-goods .product-wrap h2 a {
    height: auto;
    line-height: 16px;
    color: #333;
    padding-left: 0;
}

.all-goods .product-wrap ul {
    border-top: 2px solid #c1c1c1;
}

.all-goods .product-wrap ul li {
    float: left;
    display: inline;
    margin-right: 15px;
    margin-top: 15px;
    white-space: nowrap;
}

.all-goods .product-wrap ul li a {
    padding-left: 30px;
    color: #666666;
    display: inline-block;
    line-height: 18px;
    text-decoration: none;
    font-weight: bold;
}

.all-goods .product-wrap ul li a:hover {
    text-decoration: none;
    background-position: -8px -219px;
    color: #ff6600;
}

.all-goods .product-wrap div dd, .all-goods .product-wrap div dl a {
    display: block;
    width: 185px;
    height: 120px;
    overflow: hidden;
}

 

 

冷色系微风爱丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
php移动端导航栏二级菜单,HTML+CSS简单实现导航栏二级下拉菜单
weixin_36350547的博客
03-19 752
.clearfix::after{content:"";display:block;clear:both;}.header{display:block;color:white;width:100%;height:60px;line-height:60px;background:darkseagreen;margin-top:-16px;}.container{width:1500px;}.head...
jquery左侧点击展开二级菜单导航插件
04-05
NULL 博文链接：https://leeqoo.iteye.com/blog/1532895
Vue+Element-ui实现左侧二级导航（只展开一个菜单、可根据路由高亮菜单项、刷新时可自动展开定位到当前路由）
duansamve的博客
05-21 6303
这里使用的Element文档版本是2.8.2。 路由文件index.js： import Vue from 'vue' import Router from 'vue-router' import Form from '@/components/Form' import Data from '@/components/Data' import Radio from '@/components...
天猫官方网站左侧二级导航菜单
02-26
天猫官方网站左侧二级导航菜单 比较实用啊 啊啊 感觉很不错的样子
左侧导航悬浮二级菜单.zip
07-04
左侧导航悬浮二级菜单是一款简单易用的jquery左侧固定导航，支持右侧二级导航。
jQuery左侧弹出二级导航.zip
10-19
这个“jQuery左侧弹出二级导航”项目是一个常见的网页布局设计，通常用于网站的导航菜单，特别是在内容层级较深的网站中。这种设计允许用户通过点击主导航项来展开或关闭二级菜单，从而方便地访问子页面。 首先，...
改图网左侧弹出二级导航jQuery.zip
11-25
在实现左侧弹出二级导航时，jQuery可以用于响应用户的点击事件，动态显示或隐藏二级菜单，以及实现平滑的过渡效果。 3. JavaScript：JavaScript是Web开发中的核心技术，负责实现网页的动态交互功能。在这个项目中，...
改图网左侧弹出二级导航jQuery特效代码
03-20
【标题】"改图网左侧弹出二级导航jQuery特效代码"是针对网页设计与开发领域的一个功能实现，主要涉及的是JavaScript库jQuery的应用，特别是对于网页导航菜单的交互效果设计。在网页设计中，导航菜单是用户浏览网站的...
jQuery左侧垂直四级导航菜单特效
04-02
jQuery左侧垂直四级导航菜单特效是一款Win8风格左侧垂直四级导航菜单网页特效，采用字体图标，鼠标滑过右侧弹出二级。
可点击展开与收缩的左侧纵向二级导航菜单
11-20
可点击展开与收缩的左侧纵向二级导航菜单
jquery网站左侧弹出导航菜单.zip
07-04
jquery网站左侧弹出导航菜单是一款基于jquery html5实现的响应式手机网站左侧弹出导航菜单代码。
侧边弹出二级菜单特效代码
03-20
侧边弹出二级菜单是一款jQuery商城网站左侧导航菜单，鼠标滑过展开二级菜单代码。
jquery实现的二级导航条
11-06
这是某次做项目时写的导航条，CSS为原创，兼容性不错，兼容IE7以上及chrome浏览器。
jQuery制作垂直二级下拉栏目导航菜单特效
07-19
jQuery制作垂直二级下拉栏目导航菜单特效
jQuery+HTML左侧导航栏，点击显示隐藏二级菜单（每日解决一题）
qq_53701704的博客
06-20 874
在今天写前端页面时，发现要用二级菜单，通过查找发现这个案例也许可以帮助你解决二级菜单的问题。
网页左侧导航栏二级菜单的显示隐藏
帝一松鼠的博客
03-20 2937
初学者想做出这样的效果，可以跟着这给b站up的视频做 侧边导航栏实现，手把手超详细！_哔哩哔哩_bilibilim​​​​​​​zhttps://www.bilibili.com/video/BV14y4y1a7Ld?spm_id_from=333.880.my_history.page.click真的蛮详细的，不过后面点击一级菜单显示或隐藏二级菜单，简单一点来实现直接在，js里写if语句就好了，截图放这里 ”shezhi"是我的一级菜单id。content是我的二级菜单整个。biaoz...
antdv & ant-design-vue-jeecg 顶部一级菜单，左侧导航二三级菜单。
最新发布
a841489295的博客
08-29 3710
antdv & ant-design-vue-jeecg 顶部一级菜单，左侧导航二三级菜单。
html点击 右侧弹出导航栏,jquery实现鼠标点击后展开列表内容的导航栏效果
weixin_29301059的博客
05-30 801
本文实例讲述了jquery实现鼠标点击后展开列表内容的导航栏效果。分享给大家供大家参考。具体如下：这是一款基于jQuery实现的导航栏，鼠标点击后展开隐藏的列表内容，用来制作一个目录是最合适不过的选择。本例是锋利的jQeury中的一个实例，这是最终的优化版本，兼容性还示曾测试，在火狐的表现尚不知情，有兴趣的朋友可测试或修正。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http:...
使用Jquery，实现二级导航动画
06-09
好的，这是一个比较基础的二级导航动画实现，你可以参考一下： ...这个代码中，我们首先使用 CSS 实现了二级导航的基本样式，然后通过 jQuery 实现了鼠标 hover 到一级导航上时，显示其子导航的动画效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值