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 相关文章推荐
通过jquery实现tab标签浏览效果
Feb 20 Javascript
通过DOM脚本去设置样式信息
Sep 19 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
防止浏览器记住用户名及密码的简单实用方法
Apr 22 Javascript
Node.js实现简单聊天服务器
Jun 20 Javascript
jQuery实现列表内容的动态载入特效
Aug 08 Javascript
JavaScript中this详解
Sep 01 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
vue数字类型过滤器的示例代码
Sep 07 Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 Javascript
js对象简介与基本用法示例
Mar 13 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 页面编码声明方法详解(header或meta)
2010/03/12 PHP
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
php四种基础算法代码实例
2013/10/29 PHP
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
event.srcElement+表格应用
2006/08/29 Javascript
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
python的slice notation的特殊用法详解
2019/12/27 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
python MD5加密的示例
2020/10/19 Python
药学专业大学生自荐信
2013/09/28 职场文书
航空大学应届生求职信
2013/11/10 职场文书
护理专业自荐信
2013/12/03 职场文书
应届生如何写自荐信
2014/01/05 职场文书
家长会主持词开场白
2014/03/18 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
大学生党员个人总结
2015/02/13 职场文书
PHP使用QR Code生成二维码实例
2021/07/07 PHP
Go 中的空白标识符下划线
2022/03/25 Golang