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 相关文章推荐
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
JavaScript File分段上传
Mar 10 Javascript
微信小程序与php 实现微信支付的简单实例
Jun 23 Javascript
Vue-component全局注册实例
Sep 06 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
小程序分享模块超级详解(推荐)
Apr 10 Javascript
微信小程序后台持续定位功能使用详解
Aug 23 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 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
一个捕获函数输出的函数
2007/02/14 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
2008/08/05 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
js实现在网页上简单显示时间的方法
2015/03/02 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
jQuery中内容过滤器简单用法示例
2018/03/31 jQuery
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
Python中的 enum 模块源码详析
2019/01/09 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
解除同居协议书
2015/01/29 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis