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实现垂直手风琴导航栏，包括了jquery实现垂直手风琴导航栏的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jquery实现垂直手风琴导航栏的具体代码，供大家参考，具体内容如下 做项目时第一次做垂直手风琴导航栏便记录下来 使用jQuery更简单 扩展浏览器支持本例采用jQuery1.12.4版 前端HTML： CSS样式: 引入jQuery： 以上就是本文的
-
本文向大家介绍jQuery+css实现非常漂亮的水平导航菜单效果，包括了jQuery+css实现非常漂亮的水平导航菜单效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery+css实现非常漂亮的水平导航菜单效果。分享给大家供大家参考，具体如下： 运行效果截图如下： 用到的背景图片tab.gif如下： 具体代码如下： 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQu
-
注意: Adobe Muse 不再添加新增功能，并将于 2020 年 3 月 26 日停止支持。有关详细信息和帮助，请参阅 Adobe Muse 服务结束页面。 构建网站时，导航是最需要考虑的方面之一。在设计网站时，选择网站导航的类型和位置至关重要。鉴于菜单或网站导航的效果，用户对网站的体验会得到提升或变得糟糕。 在 Adobe Muse 中，可以使用“菜单”构件快速创建网站导航系统。虽然您可以创
-
问题内容： 我喜欢jQuery UI的东西！ 我喜欢导航菜单，但似乎无法使其水平。我必须错过一些麻烦。 有人知道如何更改CSS吗？我试过了，但这是针对较旧的版本的，因此无法正常工作，因为不再有“明确的要求”将它们相互重叠。 相关CSS： 谢谢您的帮助！ 问题答案： 你可以这样做： 并设置：
-
本文向大家介绍jQuery实现菜单栏导航效果，包括了jQuery实现菜单栏导航效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jQuery实现菜单栏导航效果的具体代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
问题内容： 如何使用flexbox在容器内水平和垂直居中div。在下面的示例中，我希望每个数字都彼此相邻（按行），并水平居中。 问题答案： 我认为您想要以下内容。 你的元素应该是块级（而非）如果你想要的高度和顶部/底部填充，以正常工作。 另外，在上，将宽度设置为而不是。 您的属性很好。 如果您希望垂直居中于视口中，请为和分配100％的高度，然后将页边距清零。 请注意，需要一个高度才能看到垂直对齐效