【特效】导航下拉菜单（二级三级都有）

标签：

导航的下拉菜单，分别写了二级的和三级的。其实下拉菜单最重要的是写好结构，哪一层是哪一层的，要清晰，做到心中有数。 css定位时注意给隐藏的下拉菜单添加absolute绝对定位，但是其父级不必加relative。js嘛，简单，一个hover() 打遍天下。动画用了slideDown，slideUp，fadeIn，fadeOut，当然可换成其他效果，动画前加了stop() 是为了快速多次滑动时，不会一直闪呀闪个不停。

html：

<h1>二级下拉菜单</h1>

<ul class="nav">

         <li>

             <h2><a href="">首页</a></h2>

    </li>

    <li>

             <h2><a href="">关于我们</a></h2>

        <div class="down">

                 <a href="">企业简介</a>

            <a href="">公共事业</a>          

        </div>

    </li>

    <li class="nav_this">

             <h2><a href="">产品</a></h2>

        <div class="down">

                 <a href="">产品1</a>

            <a href="">产品2</a>

            <a href="">产品3</a>

            <a href="">产品4</a>                

        </div>      

    </li>

    <li>

             <h2><a href="">解决方案</a></h2>

        <div class="down">

                 <a href="">工程案例</a>

            <a href="">解决方案</a>

            <a href="">行业需求</a>           

        </div>

    </li>

    <li>

             <h2><a href="">联系我们</a></h2>              

    </li>

</ul>

<br><br><br><br><br><br><br><br>

<h1>三级下拉菜单</h1>

<ul class="nav_2">

         <li>

             <h2><a href="">首页</a></h2>

    </li>

    <li>

             <h2><a href="">关于我们</a></h2>

        <div class="down_2">

                 <dl>

                     <dt><a href="">二级导航1</a></dt>

                <dd>

                         <a href="">三级导航11</a>

                    <a href="">三级导航12</a>

                    <a href="">三级导航13</a>

                    <a href="">三级导航14</a>

                </dd>

            </dl>

            <dl>

                     <dt><a href="">二级导航2</a></dt>

                <dd>

                         <a href="">三级导航21</a>

                    <a href="">三级导航22</a>

                </dd>

            </dl>           

        </div>

    </li>

    <li class="nav_this">

             <h2><a href="">产品</a></h2>

        <div class="down_2">

                 <dl>

                     <dt><a href="">二级导航1</a></dt>

                <dd>

                         <a href="">三级导航11</a>                   

                </dd>

            </dl>

            <dl>

                     <dt><a href="">二级导航2</a></dt>

                <dd>

                         <a href="">三级导航21</a>                   

                </dd>

            </dl>

            <dl>

                     <dt><a href="">二级导航3</a></dt>

                <dd>

                         <a href="">三级导航31</a>

                    <a href="">三级导航32</a>                  

                </dd>

            </dl>          

        </div>            

    </li>

    <li>

             <h2><a href="">解决方案</a></h2>

        <div class="down_2">

                 <dl>

                     <dt><a href="">二级导航1</a></dt>

                <dd>

                         <a href="">三级导航11</a>

                    <a href="">三级导航12</a>

                    <a href="">三级导航13</a>

                    <a href="">三级导航14</a>

                    <a href="">三级导航15</a>

                    <a href="">三级导航16</a>                   

                </dd>

            </dl>

            <dl>

                     <dt><a href="">二级导航2</a></dt>

                <dd>

                         <a href="">三级导航21</a>

                    <a href="">三级导航22</a>

                </dd>

            </dl>           

        </div>       

    </li>

    <li>

             <h2><a href="">联系我们</a></h2>              

    </li>

</ul>

css：

ul,h2,dl,dt,dd{ padding:0; margin:0;}

ul{ list-style:none;}

h1{ text-align:center; font-weight:normal;}

h2{ font-weight:normal;}

a:link{ color:#333; text-decoration:none;}

a:visited{ color:#333; text-decoration:none;}

a:hover{ color:#3d6cd8; text-decoration:underline;}

a:active{ color:#3d6cd8; text-decoration:underline;}

/*二级*/

.nav{ width:755px; margin:0 auto; border:1px solid #dedede; border-radius:5px; overflow:hidden;}

.nav li{ width:151px; float:left; text-align:center;}

.nav li h2{ width:150px; height:48px; line-height:48px; border-right:1px solid #dedede; background:#f9f9f9; font-size:16px;}

.nav li h2 a{ display:block; text-decoration:none;}

.nav li h2 a:hover,.nav .nav_this h2 a,.nav li .nav_this_2 a{ background:#e9e9e9;}

.down{ display:none; width:110px; padding:10px 20px; position:absolute; margin-left:-1px; border:1px solid #dedede; background:#f9f9f9; border-bottom-left-radius:5px; border-bottom-right-radius:5px;}

.down a{ display:block; height:36px; line-height:36px; border-bottom:1px solid #e4e4e4; font-size:14px;}

.nav li:last-child h2{ border:none;}

.down a:last-child{ border:none;}

/*三级*/

.nav_2{ width:755px; margin:0 auto; overflow:hidden;}

.nav_2 li{ width:150px; float:left; text-align:center; margin-right:1px;}

.nav_2 li h2{ width:150px; height:36px; line-height:36px; background:#3d6cd8; font-size:16px;}

.nav_2 li h2 a{ display:block; text-decoration:none; color:#fff;}

.nav_2 li h2 a:hover,.nav_2 .nav_this h2 a,.nav_2 li .nav_this_2 a{ background:#204db3;}

.down_2{ position:absolute; display:none;}

.down_2 a{ display:block;}

.down_2 dt{ width:150px; height:36px; line-height:36px; background:#c4c5c7; margin-top:1px;}

.down_2 dd{ display:none; position:absolute; width:150px; left:150px; margin-top:-37px;}

.down_2 dd a{ height:36px; line-height:36px; background:#ddd; margin:1px;}

js：

$(document).ready(function(){

         $(".nav li").hover(

         function(){

                   $(this).children(".down").stop(true,true).slideDown("fast");

                   $(this).find("h2").addClass("nav_this_2");

                   },

         function(){

                   $(this).children(".down").stop(true,true).slideUp("fast");

                   $(this).find("h2").removeClass("nav_this_2");

                   }

         );

         $(".nav_2 li").hover(

         function(){

                   $(this).children(".down_2").stop(true,true).slideDown("fast");

                   $(this).find("h2").addClass("nav_this_2");

                   },

         function(){

                   $(this).children(".down_2").stop(true,true).slideUp("fast");

                   $(this).find("h2").removeClass("nav_this_2");

                   }

         );

         $(".nav_2 dl").hover(

         function(){

                   $(this).children("dd").stop(true,true).fadeIn();               

                   },

         function(){

                   $(this).children("dd").stop(true,true).fadeOut();            

                   }

         );                        

});

效果预览：http://www.gbtags.com/gb/rtreplayerpreview-standalone/2846.htm

源码下载：http://pan.baidu.com/s/1i49q5hz

【特效】导航下拉菜单（二级三级都有）

标签：

原文地址：http://www.cnblogs.com/xiaoxianweb/p/5462326.html