jQuery实现仿美橙互联两级导航菜单效果完整实例


Posted in Javascript onSeptember 17, 2015

本文实例讲述了jQuery实现仿美橙互联两级导航菜单效果。分享给大家供大家参考。具体如下:

这是一款基于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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>仿美橙互联导航菜单</title>
<style>
body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
}
a:link {
 text-decoration: none;
}
a:visited {
 text-decoration: none;
}
a:hover {
 text-decoration: none;
}
a:active {
 text-decoration: none;
}
#nav_wrap{margin:20px auto;}
#nav li{ text-align:center;font-size:12px;}
#nav_wrap { width:960px; overflow:hidden; }
#nav{ background:url(images/nav_bg.gif) repeat-x; height:39px; position:relative; width:950px; margin:0 auto; }
#nav .l{ background:url(images/navnbg.gif) no-repeat 0px 0px; height:39px; width:2px; float:left}
#nav .r{ background:url(images/navnbg.gif) no-repeat -4px 0px; height:39px; width:2px; float:right}
#nav .bt_qnav { float:right; } 
#nav .bt_qnav a{ width:31px; height:29px; line-height:39px;display:block;padding:9px 2px 0 0;}
#nav .c{ float:left;margin:0;padding:0}
#nav li { float:left; list-style:none; }
#nav li .v a{ width:83px;height:39px; line-height:33px; display:block; color:#FFF; background:url(images/navnbg.gif) no-repeat -87px 6px; float:left; font-family:"Microsoft Yahei";}
#nav li .v a:hover,#nav li .v .sele{background:url(images/navnbg.gif) no-repeat 0px -47px; color:#116406; line-height:42px; font-size:14px}
#nav .kind_menu { height:30px;*height:29px; line-height:30px;vertical-align:middle; position:absolute; top:37px;*top:39px; left:70px; width:880px; text-align:left; display:none; background:url(images/nav_bg1.gif) repeat-x bottom; color:#656565; }
#nav .kind_menu a {color:#656565; float:left; text-align:center; width:90px; font-family:Arial, Helvetica, sans-serif;}
#nav .kind_menu a:hover { color:#ff4300; background:url(images/navnbg.gif) no-repeat 1px -91px;*background:url(images/navnbg.gif) no-repeat 1px -93px;}
#nav .kind_menu span { font-size:10px; color:#cecece; line-height:30px; *line-height:26px; float:left }
#tmenu{ background:url(images/nav_bg1.gif) repeat-x bottom; height:28px; border-bottom:1px solid #eee; }
</style>
<SCRIPT src="jquery1.3.2.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: 20px">欢迎访问美橙互联! </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="#" target=_blank>域名交易</A> 
 <SPAN>|</SPAN> <A href="#">相关帮助</A> 
 <SPAN>|</SPAN> <A href="#">智能加速</A> </DIV></LI>
 </UL>
<DIV class=r></DIV>
</DIV><!--nav-->
<DIV id=tmenu></DIV>
</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 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
javascript与CSS复习(二)
Jun 29 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
Bootstrap布局方式详解
May 27 Javascript
基于jQuery ligerUI实现分页样式
Sep 18 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 16 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
加速vue组件渲染之性能优化
Apr 09 Javascript
JS如何判断对象是否包含某个属性
Aug 29 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 #Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 #Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 #Javascript
js实现tab切换效果实例
Sep 16 #Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 #Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 #Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 #Javascript
You might like
PHP 模板高级篇总结
2006/12/21 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
javascript读取RSS数据
2007/01/20 Javascript
jQuery 使用手册(五)
2009/09/23 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
python调用摄像头拍摄数据集
2019/06/01 Python
pandas.read_csv参数详解(小结)
2019/06/21 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
一些关于MySql加速和优化的面试题
2014/01/30 面试题
工程管理造价应届生求职信
2013/11/13 职场文书
影视艺术学院毕业生自荐信
2013/11/13 职场文书
个人对照检查材料
2014/02/12 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
民事和解协议书格式
2014/11/29 职场文书
申报优秀教师材料
2014/12/16 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
大学生入党自传2015
2015/06/26 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
你知道Java Spring的两种事务吗
2022/03/16 Java/Android
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电