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 相关文章推荐
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
Jun 28 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
js 动态修改css文件用到了cssRule
Aug 20 Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
JS控制表单提交的方法
Jul 09 Javascript
跟我学习javascript的this关键字
May 28 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
JS hashMap实例详解
May 26 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 Javascript
Vue实现省市区三级联动
Dec 27 Vue.js
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
php 获得汉字拼音首字母的函数
2009/08/01 PHP
apache php模块整合操作指南
2012/11/16 PHP
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
树结构之JavaScript
2017/01/24 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
Django框架使用mysql视图操作示例
2019/05/15 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
C#笔试题集合
2013/06/21 面试题
企业门卫岗位职责
2013/12/12 职场文书
安全大检查反思材料
2014/01/31 职场文书
留学顾问岗位职责
2014/04/14 职场文书
博士生导师推荐信
2014/07/08 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
写给医生的感谢信
2015/01/22 职场文书
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android