导航栏动态显示效果

导航栏动态显示效果

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

简介

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

css样式

<style type="text/css">

                  * {

                     margin: 0;

                     padding: 0;

                     word-wrap: break-word;

                     word-break: break-all;

                   }

                  

                   body {

                     background: #FFF;

                     color: #333;

                     font: 12px/1.6em Helvetica, Arial, sans-serif;

                   }

                  

                   a {

                     color: #0287CA;

                     text-decoration: none;

                   }

                  

                   a:hover {

                     text-decoration: underline;

                   }

                  

                   ul, li {

                     list-style: none;

                   }

                  

                   img {

                     border: none;

                   }

                  

                   h1, h2, h3, h4, h5, h6 {

                     font-size: 1em;

                   }

                  

                   html {

                     overflow: -moz-scrollbars-vertical; /* 在Firefox下始终显示滚动条*/

                   }

                  

                   #navigation {

                     width: 784px;

                     padding: 8px;

                     margin: 8px auto;

                     background: #3B5998;

                     height: 18px;

                   }

                  

                   #navigation ul li {

                     float: left;

                     margin-right: 14px;

                     position: relative;

                     z-index: 100;

                   }

                  

                   #navigation ul li a {

                     display: block;

                     padding: 0 8px;

                     background: #EEEEEE;

                     font-weight: 700;

                   }

                  

                   #navigation ul li a:hover {

                     background: none;

                     color: #fff;

                   }

                  

                   #navigation ul li ul {

                     background-color: #88C366;

                     position: absolute;

                     width: 80px;

                     overflow: hidden;

                     display: none;

                   }

                  

                   #navigation ul li ul li {

                     border-bottom: 1px solid #BBB;

                     text-align: left;

                     width: 100%;

                   }

         </style>

 

代码

<div id="navigation">

           <ul>

             <li><a href="#">首 页</a></li>

             <li>

               <a href="#">衬 衫</a>

               <ul>

                 <li><a href="#">短袖衬衫</a></li>

                 <li><a href="#">长袖衬衫</a></li>

                 <li><a href="#">无袖衬衫</a></li>

               </ul>

             </li>

             <li>

               <a href="#">卫 衣</a>

               <ul>

                 <li><a href="#">开襟卫衣</a></li>

                 <li><a href="#">套头卫衣</a></li>

               </ul>

             </li>

             <li>

               <a href="#">裤 子</a>

               <ul>

                 <li><a href="#">休闲裤</a></li>

                 <li><a href="#">卡其裤</a></li>

                 <li><a href="#">牛仔裤</a></li>

                 <li><a href="#">短裤</a></li>

               </ul>

             </li>

             <li><a href="#">联系我们</a></li>

           </ul>

         </div>

 

 

实现功能

.has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。提供的选择器会一一测试原先那些对象的后代，含有匹配后代的对象将得以保留。

hovre()一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法

 

slideDown() 通过高度变化（向下增大）来动态地显示所有匹配的元素

slideUp() 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，

 

 

//上面存在bug,下面添加一个 stop()方法

Stop()停止所有在指定元素上正在运行的动画。

//如果鼠标移入移出太快，需要把未执行完成的动画停止