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 相关文章推荐
JSON取值前判断
Dec 23 Javascript
封装好的一个万能检测表单的方法
Jan 21 Javascript
javascript实现类似百度分享功能的方法
Jul 27 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
vue axios整合使用全攻略
May 24 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 Javascript
通过javascript实现段落的收缩与展开
Jun 26 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
JavaScript实现前端网页版倒计时
Mar 24 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
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
如何隐藏你的.php文件
2007/01/04 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
layer弹出层扩展主题的方法
2019/09/11 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
2020/10/12 Javascript
Python实现简单HTML表格解析的方法
2015/06/15 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
python文件写入write()的操作
2019/05/14 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
python实现桌面托盘气泡提示
2019/07/29 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
争先创优公开承诺书
2014/08/30 职场文书
个人查摆剖析材料
2014/10/16 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
SQL之各种join小结详细讲解
2021/08/04 MySQL
nginx 配置缓存
2022/05/11 Servers
MySQL优化之慢日志查询
2022/06/10 MySQL