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点击导航栏选中更换样式的实现代码
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <tit
-
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
解决方法有两种:一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失:另一种情况是即使刷新页面后样式仍然有效. 直接上代码: 第一种情况: <script type="text/javascript" src="templets/js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function
-
JQuery 浮动导航栏实现代码
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q
-
jquery实现鼠标点击后展开列表内容的导航栏效果
本文实例讲述了jquery实现鼠标点击后展开列表内容的导航栏效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航栏,鼠标点击后展开隐藏的列表内容,用来制作一个目录是最合适不过的选择.本例是锋利的jQeury中的一个实例,这是最终的优化版本,兼容性还示曾测试,在火狐的表现尚不知情,有兴趣的朋友可测试或修正. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-click-show-table-nav-co
-
jquery+css实现侧边导航栏效果
最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看下去. 1.效果图 当有顶部导航栏的时候侧边导航栏会消失. 响应式方面,同样的顶部导航栏消失后右下角的图标才出现.点击出现导航,选中后消失: 这里是个demo ,没有做平滑滚动,需要的可以自己加上. 大体就介绍这么多吧,下面上代码. 2.css代码 这里是css代码,详情请看注释 <style> /*重置一些样式*/ *, *::a
-
超炫的jquery仿flash导航栏特效
FLASH导航现在基本上已经是过时了,但是我们可以用jQuery来实现flash效果,非常的不错. 演示地址:http://demo.jb51.net/js/2014/jqeryfangflashdh/demo.html 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <
-
JQuery Mobile实现导航栏和页脚
导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). 导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#" data-role="button" data-icon="home">首页</a&g
-
简单的jquery左侧导航栏和页面选中效果
这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"> <li class="level1"> <a href="#none" rel="external nofollow" rel="external nofollow" rel="external
-
jQuery Mobile 导航栏代码
导航栏是由一组水平排列的链接组成,通常包含在头部或尾部内. 默认情况下,导航栏中的链接将自动变成按钮(不需要 data-role="button"). 使用 data-role="navbar" 属性来定义导航栏: 复制代码 代码如下: <div data-role="header"><div data-role="navbar"><ul><li><a href="
-
用jquery的方法制作一个简单的导航栏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>学习导航栏的制作</title> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function() {