jquery实现红色竖向多级向右展开的导航菜单效果
本文实例讲述了jquery实现红色竖向多级向右展开的导航菜单效果。分享给大家供大家参考。具体如下：
这里介绍的是一款红色竖向多级向右展开的导航菜单，多用于博客网站的导航菜单，红色风格，非常漂亮，向右伸展的菜单。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-red-style-show-menu-codes/
具体代码如下：
<!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>
<title>红色竖向多级向右展开的导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.nav{float:left;position:relative;width:253px;}
h2,ul,p{margin:0;padding:0;text-align:center;}
h2{font-weight:400;font-size:100%;background:#9B203F;border-bottom:solid 1px #500C1B;}
h2 a{list-style-type:none;height:37px;color:#fff;line-height:37px;}
ul{font-size:0;background:#9B203F;padding:0 0 40px;}
ul li{list-style-type:none;padding-bottom:5px;color:#fff;font-size:14px;padding:0 20px;height:34px;line-height:34px;position:relative;}
ul li a{border-bottom:dashed 1px #E67A92;display:block;width:196px;margin:0 auto;}
ul li.hover_bg{background:#C30431;}
.Secon_Dary{width:253px;background:#C30431;position:absolute;right:-253px;top:0;padding-bottom:30px;display:none;}
.Secon_Dary p{padding:0 20px;}
.Secon_Dary a{display:block;height:34px;line-height:34px;color:#fff;border-bottom:dashed 1px #E67A92;}
a{cursor:pointer;}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".nav ul li").hover(function(){
$(this).addClass("hover_bg");
$(this).children("div").show();
},function(){
$(this).removeClass("hover_bg");
$(this).children("div").hide();
})
})
</script>
</head>
<body>
<div class="nav">
<h2><a>ALL CATEGORIES</a></h2>
<ul>
<li>
<a>Posojg</a>
<div class="Secon_Dary">
<p>
<a>AAAAAAAAAAA</a>
<a>BBBBBB</a>
<a>AAAAAAAAAAA</a>
<a>BBBBBB</a>
<a>AAAAAAAAAAA</a>
<a>BBBBBB</a>
<a>AAAAAAAAAAA</a>
<a>BBBBBB</a>
</p>
</div>
</li>
<li>
<a>FOwojg</a>
<div class="Secon_Dary">
<p>
<a>AAAAAAAAAAA</a>
<a>BBBBBB</a>
<a>AAAAAAAAAAA</a>
<a>BBBBBB</a>
<a>AAAAAAAAAAA</a>
<a>BBBBBB</a>
<a>AAAAAAAAAAA</a>
<a>BBBBBB</a>
</p>
</div>
</li>
<li>
<a>Sowgjed</a>
<div class="Secon_Dary">
<p>
<a>AAAAAAAAAAA</a>
<a>BBBBBB</a>
<a>AAAAAAAAAAA</a>
<a>BBBBBB</a>
<a>AAAAAAAAAAA</a>
<a>BBBBBB</a>
<a>AAAAAAAAAAA</a>
<a>BBBBBB</a>
</p>
</div>
</li>
<li>
<a>Gowjgeo</a>
<div class="Secon_Dary">
<p>
<a>AAAAAAAAAAA</a>
<a>BBBBBB</a>
<a>AAAAAAAAAAA</a>
<a>BBBBBB</a>
<a>AAAAAAAAAAA</a>
<a>BBBBBB</a>
<a>AAAAAAAAAAA</a>
<a>BBBBBB</a>
</p>
</div>
</li>
</ul>
</div>
</body>
</html>
希望本文所述对大家的jquery程序设计有所帮助。
相关推荐
-
jquery+CSS实现的多级竖向展开树形TRee菜单效果
本文实例讲述了jquery+CSS实现的多级竖向展开树形TRee菜单效果.分享给大家供大家参考.具体如下: 这里演示垂直的树形菜单,应用CSS和jquery技术来实现,显示在网页左侧比较合适,考虑到简洁,没有使用图片之类的作修饰.本效果兼容IE.火狐等主流浏览器. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-css-nlevel-vshow-tree-codes/ 具体代码如下: <!DOCTYPE html> <hea
-
jquery实现可横向和竖向展开的动态下滑菜单效果
本文实例讲述了jquery实现可横向和竖向展开的动态下滑菜单效果.分享给大家供大家参考.具体如下: 这里演示了两个下拉导航菜单的效果,用jquery.easing.1.3.js和jquery.naviDropDown.1.0.js以及jquery.hoverIntent.minified.js共同实现,最新的jquery版本也可以引入,在演示页面中,分别有横向水平向下滑出的下拉菜单,还有纵向垂直布局向右滑出的导航菜单,根据你的需要选择使用. 运行效果截图如下: 在线演示地址如下: http://
-
jQuery实现折叠、展开的菜单组效果代码
本文实例讲述了jQuery实现折叠.展开的菜单组效果代码.分享给大家供大家参考.具体如下: 这是一款jQuery实现的漂亮的竖向折叠菜单组,初次运行的时候请刷新一下页面,让jQ载入,这款菜单应用广泛,可用到后台左侧,网站前台也可以用,发现自腾讯微博开放平台,分享给大家一起研究吧.提示:如果有错误,请刷新页面. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fade-in-out-menu-group-codes/ 具体代码如下:
-
jQuery实现鼠标悬停3d菜单展开动画效果
竖直的主菜单贴着页面左侧,当光标移入菜单项时,以3D动画的方式弹出对应的二级菜单. 采用jQuery和CSS3实现.支持Chrome,火狐,Edge等浏览器. 效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-
-
jquery实现点击向下展开菜单项(伸缩导航)效果
本文实例讲述了jquery实现点击向下展开菜单项(伸缩导航)效果.分享给大家供大家参考.具体如下: 这里演示基于jquery打造的向下展开的多级导航条效果,纵向垂直排列,风格非常的简洁,鼠标点击时候展开菜单的二级项,再次点击的时候又向上合拢,平时只显示一级菜单,二级菜单是隐藏不显示的,代码简洁,包括了完整的JS.css和jquery部分. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-hidden-style-menu
-
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
本文实例讲述了jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果.分享给大家供大家参考.具体如下: 这是一款核心基于jquery的多级导航菜单特效,横向向右依次展开菜单项,当然本菜单并不是完美的,因此没有怎么美化,另外包括子菜单的上级菜单中缺少一个菜单标记,这样用户有时候不知道哪个菜单中含有下级子菜单.不过添加这样一个标记似乎挺简单,你可以自己动手添加吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-right-show
-
jQuery实现可收缩展开的级联菜单实例代码
如果用纯JavaScript代码而不使用框架的话,那么做一个级联菜单也许是一件让人生畏的事情,但有了框架,这件事情就很容易了,这就是框架的好处,极大地提高了开发效率,并且更可靠和易于维护.使用jQuery来实现级联菜单的一般步骤如下: •1.首先使用<ul>和<li>创建一个级联菜单 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
-
基于jQuery实现以手风琴方式展开和折叠导航菜单
本章节分享一段代码实例,它实现了手风琴方式展开和折叠导航菜单效果. 代码实例如下: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <meta name="author" content="http://www.jb51.net/" /> <title>我们</title> <sty
-
jQuery 淡入淡出、展开收缩菜单实现代码
效果图:运行以后,刷新下即可. jQuery淡入淡出.展开收缩菜单 ul li{list-style:none;} ul li.menu{position:relative;width:120px;} ul li.menu ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:100px;padding:5px;} ul li.menu ul li{padding:5px 0;border-bo
-
jquery实现可点击伸缩与展开的菜单效果代码
本文实例讲述了jquery实现可点击伸缩与展开的菜单效果代码.分享给大家供大家参考.具体如下: 这是一款jquery实现的点击伸缩与展开的菜单代码,操作方式大家都知道吧,点击一下展开二级菜单的内容,再次点击则合拢,很经典的折叠菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-click-show-hidden-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/