jquery实现垂直和水平菜单导航栏
更新时间：2020年08月27日 10:07:56 作者：回忆没了焦点
这篇文章主要为大家详细介绍了jquery实现垂直和水平菜单导航栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jquery菜单导航栏的实现代码，供大家参考，具体内容如下
1.HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>竖直导航菜单</title>
<link href="css/Vmenu.css" rel="stylesheet" />
<script src="js/jquery-2.1.4.min.js"></script>
<script>
$(function(){
//垂直导航栏，点击下拉子菜单
$(".main>a").click(function(){
$(this).next().slideToggle(500)
.parent().siblings().find(".child").slideUp(500);
})
//水平导航栏，鼠标经过下拉导航栏
$(".hmain").hover(function(){
$(this).find(".child").slideToggle(500)
.parent().siblings().find(".child").slideUp();
})
})
</script>
</head>
<body>
<!--垂直导航栏-->
<ul class="content">
<li class="main"><a href="#">菜单 1</a>
<ul class="child">
<li>菜单1.1</li>
<li>菜单1.2</li>
<li>菜单1.3</li>
</ul>
</li>
<li class="main"><a href="#">菜单 2</a>
<ul class="child">
<li>菜单2.1</li>
<li>菜单2.2</li>
<li>菜单2.3</li>
<li>菜单2.4</li>
</ul>
</li>
<li class="main"><a href="#">菜单 3</a>
<ul class="child">
<li>菜单3.1</li>
<li>菜单3.2</li>
<li>菜单3.3</li>
</ul>
</li>
<li class="main"><a href="#">菜单 4</a>
<ul class="child">
<li>菜单4.1</li>
<li>菜单4.3</li>
</ul>
</li>
<li class="main"><a href="#">菜单 5</a>
<ul class="child">
<li>菜单5.1</li>
<li>菜单5.2</li>
</ul>
</li>
</ul>
<!--水平导航栏-->
<ul class="content">
<li class="hmain"><a href="#">菜单 1</a>
<ul class="child">
<li>菜单1.1</li>
<li>菜单1.2</li>
<li>菜单1.3</li>
</ul>
</li>
<li class="hmain"><a href="#">菜单 2</a>
<ul class="child">
<li>菜单2.1</li>
<li>菜单2.2</li>
<li>菜单2.3</li>
<li>菜单2.4</li>
</ul>
</li>
<li class="hmain"><a href="#">菜单 3</a>
<ul class="child">
<li>菜单3.1</li>
<li>菜单3.2</li>
<li>菜单3.3</li>
</ul>
</li>
<li class="hmain"><a href="#">菜单 4</a>
<ul class="child">
<li>菜单4.1</li>
<li>菜单4.3</li>
</ul>
</li>
<li class="hmain"><a href="#">菜单 5</a>
<ul class="child">
<li>菜单5.1</li>
<li>菜单5.2</li>
</ul>
</li>
</ul>
</body>
</html>
2.CSS代码
*{
margin: 0px;
padding: 0px;
}
.content{
margin: 40px 100px;
float: left;
}
ul ,li{
list-style: none;
}
.main,.hmain{
width: 150px;
background: #222;
font-size: 16px;
text-align: center;
cursor: pointer;
line-height: 40px;
color: white;
}
.main>a,.hmain>a{
text-decoration: none;
color: white;
display: inline-block;
width: 150px;
min-height: 40px;
}
.main:hover,.hmain:hover{
background: black;
}
.child{
background: #444;
display:none;
}
.child li:hover{
background: #333333;
}
/*垂直导航栏左浮动*/
.hmain{
float: left;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了jQuery使用ajax方法解析返回的json数据功能,结合实例形式分析了jQuery ajax操作流程及json数据处理技巧,需要的朋友可以参考下2017-01-01
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
这篇文章主要介绍了jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
这篇文章主要介绍了jQuery仿写百度百科的目录树医保词条样式，点击右侧的目录树，左侧跳转到指定的锚点位置，滚动鼠标，游标跟随一起滚动至响应链接位置，具体实现思路大家参考下本文2017-01-01
下面小编就为大家带来一篇textarea 在浏览器中固定大小和禁止拖动的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-12-12
本篇文章主要是对JQUERY中dialog的用法进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
dul无法加载bootstrap实现unload table/user恢复
这篇文章主要介绍了dul无法加载bootstrap实现unload table/user恢复的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
我使用了JQuery进行了一段时间的前端开发，它让我从选择需要操作的元素痛苦中解放出来，因为提供的选择功能是如此的强大。 同时在开发过程中我被一个问题困惑了很久，也许在别人看来这根本不是问题！2009-10-10
jquery对所有input type=text的控件赋值实现方法
下面小编就为大家带来一篇jquery对所有input type=text的控件赋值实现方法。小编觉的挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
这篇文章主要介绍了jquery实现文本框的文本自动补全效果,大家参考使用吧2014-01-01
在VS2008中jQuery无智能感应的修改方法，需要的朋友可以参考下。2010-12-12
最新评论