一个简单的JQ导航(二级三级菜单)
那么就简单地说下这个特效是怎么做的。
在页面中插入这样一段js代码
<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
然后在页面的body里面编写导航代码,如下
<ul class="nav">
<li><a href="#">网站首页</a></li>
<li>
<a href="#">产品中心</a>
<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>
<li><a href="#">非标订制氮气柜</a></li>
</ul>
</li>
<li><a href="#">工业烘箱</a></li>
<li><a href="#">培养箱</a></li>
<li><a href="#">环境试验箱</a></li>
</ul>
</li>
<li><a href="#">新闻中心</a></li>
</ul>
因为有三级菜单,所以里面嵌套了下,再加上一个class就够了。
之后是设置菜单样式
<style type="text/css">
*{ margin:0; padding:0;}
body{ padding:20px;}
ul{ list-style:none;}
a:link{ text-decoration:none;}
/*以下样式*/
.nav{ background:#eee;}
.nav:after{ content:""; clear:both; height:0; visibility:hidden; display:block;}
.nav li{ float:left; position:relative;}
.nav li a{ display:block; width:150px; height:30px; line-height:30px; padding-left:20px;}
.nav li a:hover{ background:#c00; color:#fff;}
.nav li ul{ position:absolute; top:30px; left:0; background:#f3f3f3;}
.nav li ul li{ float:none;}
.nav li ul li ul{ position:absolute; left:170px; top:0;}
.nav li ul li ul li{}
</style>
最后就是加入特效的一段JQ代码了:
<script type="text/javascript">
$(".nav li ul").hide();
$(".nav li").mouseover(function(){
$(this).addClass("cur")
$(this).find('ul:first').slideDown("fast")
})
$(".nav li").mouseleave(function(){
$(this).removeClass("cur")
$(this).find('ul:first').slideUp("fast")
})
</script>
tip:在样式表中我并没有让二级菜单隐藏,其实也可以在样式表中加入display:none;事先隐藏二级三级菜单的。
我是在JQ的代码里面第一行就让ul li下的所有的ul都隐藏,这样在打开页面的时候就隐藏了。
还有如果是特别熟悉css的人,可能对:first-child比较熟悉,这样这个简短的JQ代码应该是更容易看懂了。
发表时间
2016年08月26日被浏览次数
与“CSS”相关的文章
Ps Play无法连接的问题
2018-04-05
前段时间发了一个替代Ps Play的移动端设计稿预览工具,不过做为日常不太使用PsMirror的人来说,可能不会去专门购买,所以还是用回了Ps Play,也顺便解决了无法连接预览的问题。...
替代Ps play的设计稿实时预览工具PsMirror
2018-01-31
PsMirror是一款实时预览photoshop设计稿的工具。 它让你极方便地在手机上查看PS中的设计稿, 提升设计效率。 支持android/ios两个平台......
配置PHPStorm2017主题(颜色字体)
2017-12-24
PHPstorm默认的主题和可选的主题有时候不能满足有些人的需求,怎么配置自己喜欢的主题呢?首先先去下载自己喜欢的主题:http://www.phpstorm-themes.com/...
如何优化自己的网站
2016-12-19
一个网站如果我们访问的时候,他的页面打开速度很慢,或者页面看起来很糟糕,看起来很费劲,让人不舒服,那么都是会影响访客的体验,使访客失去继续访问的兴趣,那么怎么优化自己的网站就是一件很重要的事。...
最新更新
Ps Play无法连接的问题
2018-04-05
前段时间发了一个替代Ps Play的移动端设计稿预览工具,不过做为日常不太使用PsMirror的人来说,可能不会去专门购买,所以还是用回了Ps Play,也顺便解决了无法连接预览的问题。...
替代Ps play的设计稿实时预览工具PsMirror
2018-01-31
PsMirror是一款实时预览photoshop设计稿的工具。 它让你极方便地在手机上查看PS中的设计稿, 提升设计效率。 支持android/ios两个平台......
配置PHPStorm2017主题(颜色字体)
2017-12-24
PHPstorm默认的主题和可选的主题有时候不能满足有些人的需求,怎么配置自己喜欢的主题呢?首先先去下载自己喜欢的主题:http://www.phpstorm-themes.com/...
如何优化自己的网站
2016-12-19
一个网站如果我们访问的时候,他的页面打开速度很慢,或者页面看起来很糟糕,看起来很费劲,让人不舒服,那么都是会影响访客的体验,使访客失去继续访问的兴趣,那么怎么优化自己的网站就是一件很重要的事。...