jquery实现红色竖向多级向右展开的导航菜单效果


Posted in Javascript onAugust 31, 2015

本文实例讲述了jquery实现红色竖向多级向右展开的导航菜单效果。分享给大家供大家参考。具体如下:

这里介绍的是一款红色竖向多级向右展开的导航菜单,多用于博客网站的导航菜单,红色风格,非常漂亮,向右伸展的菜单。

运行效果截图如下:

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>
<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程序设计有所帮助。

Javascript 相关文章推荐
文本框的字数限制功能jquery插件
Nov 24 Javascript
js树插件zTree获取所有选中节点数据的方法
Jan 28 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 #Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 #Javascript
jquery选择器简述
Aug 31 #Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 #Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 #Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 #Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 #Javascript
You might like
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
js获取php变量的实现代码
2013/08/10 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
初识Node.js
2015/03/20 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
微信小程序实战之自定义抽屉菜单(7)
2017/04/18 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
JS实现轮播图效果
2020/01/11 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
JS实现按比例缩小图片宽高
2020/08/24 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
用C++封装MySQL的API的教程
2015/05/06 Python
python发送HTTP请求的方法小结
2015/07/08 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
英语专业学生个人求职信范文
2014/01/06 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
统计员岗位职责范本
2015/04/14 职场文书
2015年话务员工作总结
2015/04/29 职场文书
小学大队长竞选稿
2015/11/20 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
python自动化调用百度api解决验证码
2021/04/13 Python
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android