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)方法，这样做的好处是能把未执行的完的动画队列清空，并且将正在执行的动画跳转到末状态。

转载于:https://www.cnblogs.com/mc67/p/4818829.html

JQ-CSS-实现导航菜单效果相关推荐

导航条css代黑色背景代码,基于CSS3实现的黑色个性导航菜单效果
本文实例讲述了基于CSS3实现的黑色个性导航菜单效果.分享给大家供大家参考.具体如下: 黑色个性的CSS3导航菜单,竖直排列的菜单,基本原理与横向的区别并不大,适合学习CSS. 运行效果截图如下: 在 ...
HTML如何实现多级水平导航栏,jQuery+css实现的蓝色水平二级导航菜单效果代码
本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单,相信你会喜欢的,蓝色,超级经典的一种风格 ...
导航背景变换 php,jQuery实现的背景动态变化导航菜单效果
本文实例讲述了jQuery实现的背景动态变化导航菜单效果.分享给大家供大家参考.具体如下: 这里介绍一款使用jQuery插件制作完成的导航菜单,一大特点是,菜单的背景有动态效果,与使用的背景图片完全变 ...
android 气球菜单,jQuery实现气球弹出框式的侧边导航菜单效果
本文实例讲述了jQuery实现气球弹出框式的侧边导航菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的气球弹出框式的侧边导航菜单,预览效果时左下角会提示错误,而且看不到效果,刷 ...
【荐】CSS多级导航菜单
代码简介: CSS导航菜单,三级菜单,资源完整,超实用,希望大家喜欢. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
怎么在html5中制作下拉导航栏,在PPT中制作下拉式导航菜单效果的方法
为了提高PPT演示文稿的观赏性,用户可能希望在PPT幻灯片中添加下拉式导航菜单效果,通过该导航菜单在不同幻灯片间进行导航(如图1所示),制作下拉式导航菜单的具体操作步骤如下. 图1 下拉式导航菜单 ( ...
魅族商城html模板,jQuery实现Meizu魅族官方网站的导航菜单效果
本文实例讲述了jQuery实现Meizu魅族官方网站的导航菜单效果.分享给大家供大家参考.具体如下: 偶尔看到魅族官方网站,发现网站的导航菜单的效果很不错就扣下来,俩字:给力.鼠标放到菜单上,菜单的下 ...
html仿写京东左侧,jQuery模仿京东/天猫商品左侧分类导航菜单效果
现在天猫或者京东商品分类模块的默认的效果是这样的: 当鼠标滑过任意一栏导航分类时,就会出现相关详细分类模块,例如: 当鼠标移出蓝色框以外的区域,就会恢复默认的效果显示!然而使用jQuery的鼠标滑过事 ...
【荐】自己做一款不错的JS+CSS多级导航菜单
代码简介: 自己做一款不错的二级导航菜单,黑色风格,是根据仿淘宝支付宝菜单而做的,自我感觉还算行吧. 代码内容: <!DOCTYPE HTML PUBLIC "-//W3C//DTD ...
仿照google主页面布局html代码,超酷仿GOOGLE首页导航菜单效果
超酷仿GOOGLE首页导航菜单效果 window.google={kEI:"HBnlR8bgAorksALn3dTbBw",kEXPI:"17259,17735,1806 ...

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

JQ-CSS-实现导航菜单效果相关推荐

最新文章

热门文章