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 Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
Aug 07 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
js简单工厂模式用法实例
Jun 30 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
web.js.字符串与正则表达式操作
May 13 Javascript
页面间固定参数,通过cookie传值的实现方法
May 31 Javascript
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 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常用技巧总结(附函数代码)
2012/02/04 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
python tornado修改log输出方式
2019/11/18 Python
py-charm延长试用期限实例
2019/12/22 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
python中threading开启关闭线程操作
2020/05/02 Python
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
无犯罪记录证明范本
2014/09/15 职场文书
导师对论文的学术评语
2015/01/04 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
活动宣传稿范文
2015/07/23 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS
全网非常详细的pytest配置文件
2022/07/15 Python