JQ-CSS-实现导航菜单效果

先看效果（配色方便，还请多多包涵....^_^）

   

  一种实现方式：（纯css伪类）

  HTML代码：

 1 <div id="nav" class="nav">
 2   <ul>
 3     <li><a href="#">INDEX</a></li>
 4     <li><a href="#">WEB</a>
 5       <ul>
 6         <li><a href="#">JS</a></li>
 7         <li><a href="#">CSS</a></li>
 8         <li><a href="#">HTML</a></li>
 9       </ul>
10     </li>
11     <li><a href="#">APP</a>
12       <ul>
13         <li><a href="#">IOS</a></li>
14         <li><a href="#">Android</a></li>
15         <li><a href="#">WIN8</a></li>
16       </ul>
17     </li>
18     <li><a href="#">NET</a>
19       <ul>
20         <li><a href="#">APS.NET</a></li>
21         <li><a href="#">ADO.NET</a></li>
22         <li><a href="#">WCF</a></li>
23       </ul>
24     </li>
25   </ul>
26 </div>
View Code

  CSS 代码：

.nav {
    width: 720px;
    background: #3B5998;
    height: 60px;
    color: white;
    margin: 8px auto;
}
.nav ul {
    list-style: none;
    margin: 0px;
}
.nav ul li {
    float: left;
    margin-right: 50px;
    position: relative;
    z-index: 100;
    width: 100px;
    text-align: center;
    margin-top: 12px;
    line-height: 30px;
}
.nav ul li a {
    text-decoration: none;
    font-weight: 700;
    background: #EEEEEE;
    display: block;
    height: 30px;
}
.nav ul li a:hover {
    background: none;
    color: #6F0;
}
.nav ul li ul {
    position: absolute;
    width: 100px;
    overflow: hidden;
    display: none;
    list-style: none;
    padding: 0px;
    background: none;
}
.nav ul li:hover ul {
    background-color: #EEEEEE;
    position: absolute;
    width: 100px;
    display: block;
}
.nav ul li ul li {
    border-bottom: 1px solid #BBB;
    text-align: left;
    width: 100%;
    margin: 0px;
    text-align: center;
}
View Code

   第二种方式（jq）

 在IE7和FireFox浏览器上可以使用伪劣:hover来显示导航效果，但IE6并不支持除超链接之外的元素使用这个伪类，因此使用上述的CSS代码并不能再IE6下正常运行，解决方法是用脚本来弥补这个不足。

  

1   $(function (){
2       $("#nav ul li:has(ul)").hover(function (){
3       $(this).children("ul").stop(true,true).slideDown(400);
4       },function (){
5       $(this).children("ul").stop(true,true).slideUp("fast");
6     }) 
7   })

  注意：

   在两个动画效果之前都添加了stop(true,true)方法，这样做的好处是能把未执行的完的动画队列清空，并且将正在执行的动画跳转到末状态。   

 

posted @ 2015-09-18 12:06  咕-咚  阅读(449)  评论(0)  编辑  收藏  举报