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 相关文章推荐
Prototype源码浅析 Enumerable部分之each方法
Jan 16 Javascript
JavaScript中的运算符种类及其规则介绍
Sep 26 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
node.js中的fs.statSync方法使用说明
Dec 16 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
使用Vue实现图片上传的三种方式
Jul 17 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 Javascript
Vue+TypeScript中处理computed方式
Apr 02 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 include,include_once,require,require_once
2008/09/05 PHP
php session的应用详细介绍
2017/03/22 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
JS继承用法实例分析
2015/02/05 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
python 有效的括号的实现代码示例
2019/11/11 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
python IP地址转整数
2020/11/20 Python
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
高中毕业自我鉴定
2013/12/13 职场文书
七一党建活动方案
2014/01/28 职场文书
劳模事迹材料范文
2014/12/24 职场文书
三峡人家导游词
2015/01/31 职场文书
初一英语教学反思
2016/02/15 职场文书
高一作文之乐趣
2019/11/21 职场文书
python实现监听键盘
2021/04/26 Python
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python
css弧边选项卡的项目实践
2023/05/07 HTML / CSS