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 相关文章推荐
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
15个款优秀的 jQuery 图片特效插件推荐
Nov 21 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
一个JavaScript处理textarea中的字符成每一行实例
Sep 22 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 Javascript
js调用设备摄像头的方法
Jul 19 Javascript
webpack之引入图片的实现及问题
Oct 08 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
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
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
jquery radio 操作代码
2011/03/16 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
Python函数返回值实例分析
2015/06/08 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
Python上下文管理器全实例详解
2019/11/12 Python
tensorflow 查看梯度方式
2020/02/04 Python
Python爬虫与反爬虫大战
2020/07/30 Python
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
《狮子和兔子》教学反思
2014/03/02 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
运动会宣传稿100字
2015/07/23 职场文书
《迟到》教学反思
2016/02/24 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers