jQuery实现仿美橙互联两级导航菜单的方法


Posted in Javascript onMarch 09, 2015

本文实例讲述了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(/jscss/demoimg/201011/nav_bg.gif) repeat-x; height:39px; position:relative; width:950px; margin:0 auto; }

#nav .l{ background:url(/jscss/demoimg/201011/navnbg.gif) no-repeat 0px 0px; height:39px; width:2px; float:left}

#nav .r{ background:url(/jscss/demoimg/201011/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(/jscss/demoimg/201011/navnbg.gif) no-repeat -87px 6px; float:left; font-family:"Microsoft Yahei";}

#nav li .v a:hover,#nav li .v .sele{background:url(/jscss/demoimg/201011/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(/jscss/demoimg/201011/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(/jscss/demoimg/201011/navnbg.gif) no-repeat 1px -91px;*background:url(/jscss/demoimg/201011/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(/jscss/demoimg/201011/nav_bg1.gif) repeat-x bottom; height:28px; border-bottom:1px solid #eee;  }

</style>

<SCRIPT src="/ajaxjs/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 相关文章推荐
用js实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
js实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
详解Node全局变量global模块
Sep 28 Javascript
实例详解Node.js 函数
Jun 10 Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 Javascript
jquery实现上传图片功能
Jun 29 jQuery
jquery获取及设置outerhtml的方法
Mar 09 #Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 #Javascript
jquery滚动加载数据的方法
Mar 09 #Javascript
jQuery晃动层特效实现方法
Mar 09 #Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 #Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 #Javascript
jQuery读取XML文件内容的方法
Mar 09 #Javascript
You might like
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
php define的第二个参数使用方法
2013/11/04 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
jQuery toggle()设置CSS样式
2009/11/05 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
一起来写段JS drag拖动代码
2010/12/09 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
2015/08/31 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
ES7之Async/await的使用详解
2019/03/28 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
Electron 调用命令行(cmd)
2019/09/23 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
使用python制作一个解压缩软件
2019/11/13 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
又涨知识了,自律到底多重要?
2019/06/27 职场文书
详解Mysql和Oracle之间的误区
2021/05/18 MySQL