jquery+CSS实现的水平布局多级网页菜单效果


Posted in Javascript onAugust 24, 2015

本文实例讲述了jquery+CSS实现的水平布局多级网页菜单效果。分享给大家供大家参考。具体如下:

这里演示的Jquery和CSS共同实现的网页常见的导航菜单,支持两级形式,蓝色风格,最多支持二级,三级可能要对代码进行改造了。本菜单属于中规中矩型,实用性比较强,适合的网站种类也是很多的,希望大家会喜欢。

运行效果截图如下:

jquery+CSS实现的水平布局多级网页菜单效果

在线演示地址如下:

具体代码如下:

<!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="Content-Type" content="text/html; charset=gb2312" />
<title>蓝色带阴影超酷的css+js导航菜单代码</title>
<style>
body {margin:0px;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
#nav_wrap {width:960px;}
#nav{background:url(images/nav_bg1.gif) repeat-x bottom; height:49px; position:relative; width:950px; margin:20px auto;}
#nav .l{background:url(images/nav_l1.gif) no-repeat bottom; height:49px; width:28px; float:left}
#nav li {float:left; list-style:none;text-align:center;font-size:14px; }
#nav li .v a{width:108px;height:49px; line-height:49px; display:block; color:#FFF;float:left; font-family:Arial,Verdana,Tahoma,"宋体"; }
#nav li .v a:hover,#nav li .v .sele{background:url(images/nav_hover1.gif) no-repeat bottom;color:#fff;height:49px;line-height:49px; font-size:14px;}
#nav .kind_menu {height:30px;*height:29px;line-height:30px;vertical-align:middle; position:absolute;top:46px;*top:48px;left:70px;width:880px; text-align:left; display:none;color:#000;font-size:12px;}
#nav .kind_menu a {color:#000; float:left; text-align:center; width:90px; font-family:Arial,Verdana,Tahoma,"宋体";font-size:12px;}
#nav .kind_menu a:hover {color:#000;border-bottom:2px #222b8e solid;}
#nav .kind_menu span {font-size:10px; color:#000; line-height:30px; *line-height:26px; float:left }
</style>
<SCRIPT src="jquery-1.6.2.min.js" type=text/javascript></SCRIPT>
</head>
<body style="text-align:center">
<DIV id=nav_wrap>
<DIV id=nav>
<DIV class=l></DIV>
<UL class=c>
 <LI><SPAN class=v><A href="#" target="_blank">首页</A></SPAN>
 <DIV class=kind_menu style="LEFT:50px">欢迎您访问三水点靠木,我们为您提供最优质的网络营销服务! </DIV></LI>
 <LI><SPAN class=v><A href="#">特惠套餐</A></SPAN>
 <DIV class=kind_menu style="LEFT: 40px">
 <A href="#">电信特惠套餐</A> <SPAN>|</SPAN>
 <A href="#">智能双线套餐</A> </DIV></LI>
 <LI><SPAN class=v><A href="#">域名频道</A></SPAN>
 <DIV class=kind_menu>
 <A href="#">英文域名</A><SPAN>|</SPAN>
 <A href="#">中文域名</A><SPAN>|</SPAN>
 <A href="#">通用网址</A><SPAN>|</SPAN>
 <A href="#">域名交易</A><SPAN>|</SPAN>
 <A href="#">域名帮助</A><SPAN>|</SPAN>
 <A href="#">智能加速</A> </DIV></LI>
 <LI><SPAN class=v><A href="#">脚本下载</A></SPAN>
 <DIV class=kind_menu style="LEFT: 40px">
 <A href="#">网络营销外包</A> <SPAN>|</SPAN>
 <A href="#">网页特效代码</A> </DIV></LI>
 <LI><SPAN class=v><A href="#">网页特效</A></SPAN>
 <DIV class=kind_menu style="LEFT: 40px">
 <A href="#">网络外包</A> <SPAN>|</SPAN>
 <A href="#">网络营销</A> <SPAN>|</SPAN>
 <A href="#">特效代码</A> </DIV></LI>
 <LI><SPAN class=v><A href="http://www.baidu.com">百度一下</A></SPAN>
 <DIV class=kind_menu style="LEFT: 40px">
 <A href="#">网络外包</A> <SPAN>|</SPAN>
 <A href="#">营销外包</A> <SPAN>|</SPAN>
 <A href="#">网页特效</A> </DIV></LI>
 </UL>
</DIV><!--nav-->
</DIV><!--nav_wrap-->
<SCRIPT type=text/javascript>
 var site_url = window.location.href.toLowerCase();
 switch (true) {
  default :
   $("#nav li").attr("class","");
   $("#nav li").eq(0).attr("class","nav_lishw");
   $(".nav_lishw .v a").attr("class","sele");
   $(".nav_lishw .kind_menu").show();
 }
 $("#nav li").hover(
  function(){
   clearTimeout(setTimeout("0")-1);
   $("#nav .kind_menu").hide();
   $("#nav li .v .sele").attr("class","shutAhover");
   $(this).attr("id","nav_hover")
   $("#nav_hover .v a").attr("class","sele");
   $("#nav_hover .kind_menu").show();
  },
  function(){
   if($(this).attr("class") != "nav_lishw"){
    $("#nav_hover .v .sele").attr("class","");
    $("#nav_hover .kind_menu").hide();
   }
   $(this).attr("id","")
   $("#nav li .v .shutAhover").attr("class","sele");
   setTimeout(function(){
    $(".nav_lishw .kind_menu").show();
    $(".nav_lishw .v a").attr("class","sele");
   },50);
  }
 );
</SCRIPT>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
js 中的switch表达式使用示例
Jun 03 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
Jan 21 Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
解决layer.open后laydate失效的问题
Sep 06 Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 #Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 #Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 #Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 #Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 #Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 #Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 #Javascript
You might like
改进的IP计数器
2006/10/09 PHP
PHP新手上路(五)
2006/10/09 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
PHP 类相关函数的使用详解
2013/05/10 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
Python自动发邮件脚本
2017/03/31 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
python实现定时提取实时日志程序
2018/06/22 Python
python检测服务器端口代码实例
2019/08/31 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
机械电子工程毕业生自荐信
2013/11/23 职场文书
项目副经理岗位职责
2013/12/30 职场文书
初中数学教学反思
2014/01/16 职场文书
小学校园活动策划
2014/01/30 职场文书
专业求职信撰写要诀
2014/02/18 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android
Python内置数据类型中的集合详解
2022/03/18 Python