快速实现jQuery多级菜单效果
更新时间：2017年02月01日 10:08:46 作者：Jack-小俊
这篇文章主要教大家如何快速实现jQuery多级菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
利用js或者jquery最快速实现导航条的多级菜单效果。
我这个代码用的是jquery1.9.1，ie8以下的兼容有待考虑，主要是代码的简介性，write less,do more.
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<head>
<title></title>
<style type="text/css">
.top-nav
{
font-size: 12px;
font-weight: bold;
list-style: none;
}
.top-nav li
{
float: left;
list-style: none;
margin-right: 1px;
}
.top-nav li a
{
line-height: 20px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
}
.top-nav li a:hover
{
background: #900;
color: #FFF;
}
.top-nav ul
{
list-style: none;
display: none;
width: 80px;
padding: 0;
position: relative;
}
.top-nav li ul li ul
{
position: absolute;
top: 0;
left: 80px;
}
</style>
</head>
<body>
<ul class="top-nav">
<li><a href="#">首页内容</a>
<ul>
<li><a href="#">前端课程 +</a>
<ul>
<li><a href="#">javascript</a></li>
<li><a href="#">css</a></li>
<li><a href="#">jquery</a></li>
</ul>
</li>
<li><a href="#">手机开发</a>
<ul>
<li><a href="#">ios开发</a></li>
<li><a href="#">android开发</a></li>
<li><a href="#">WP开发</a></li>
</ul>
</li>
<li><a href="#">后台编程</a></li>
</ul>
</li>
<li><a href="#">课程大厅</a> </li>
<li><a href="#">学习中心 +</a>
<ul>
<li><a href="#">前端课程 +</a>
<ul>
<li><a href="#">javascript</a></li>
<li><a href="#">css</a></li>
<li><a href="#">jquery</a></li>
</ul>
</li>
<li><a href="#">手机开发</a>
<ul>
<li><a href="#">ios开发</a></li>
<li><a href="#">android开发</a></li>
<li><a href="#">WP开发</a></li>
</ul>
</li>
<li><a href="#">后台编程</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
</ul>
</script>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(".top-nav li").hover(function(){
$(this).has("ul").children("ul").fadeIn();
},function(){
$(this).has("ul").children("ul").hide();
});
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文主要是给大家分享了一则使用EasyUI实现同步树的代码，主要是使用递归实现，非常实用的方法，推荐给小伙伴们。2015-03-03
这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件2012-02-02
本文是对jquery.validate的使用进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。接下来通过本文给大家介绍jQuery.Validate表单验证插件的使用示例，一起看看吧2017-01-01
jQuery 1.4给开发者带来了很多值得兴奋的新特性，同时使用jQuery的人也越来越多，为了方便大家对jQuery的使用，下面列出了一些jQuery使用技巧。2010-11-11
这篇文章主要介绍了jQuery新窗口打开外链接的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
这篇文章主要介绍了jquery验证邮箱格式并显示提交按钮，只有输入email地址正确才显示提交按钮演示，感兴趣的小伙伴们可以参考一下2015-11-11
本篇文章主要是对jquery事件重复绑定的快速解决方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要为大家详细介绍了jQuery选择器实例应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
下面小编就为大家带来一篇JQuery页面随滚动条动态加载效果的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
最新评论