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

当前位置：首页 > 范文|应用文 > IT技术专栏 > 脚本栏目

来源：阅读：740 次日期：2015-03-11 15:02:00

温馨提示：小编为您整理了“jQuery实现仿美橙互联两级导航菜单的方法”,方便广大网友查阅！

这篇文章主要介绍了jQuery实现仿美橙互联两级导航菜单的方法,实例分析了jQuery操作css及setTimeout等实现导航菜单的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

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

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<head>

<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>

</head>

<DIV class=kind_menu style="LEFT: 20px">欢迎访问美橙互联! </DIV></LI>

<DIV class=kind_menu style="LEFT: 40px"><A

href="#">电信套餐</A> <SPAN>|</SPAN> <A

href="#">双线套餐</A> </DIV></LI>

</UL>

</DIV>

</DIV>

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程序设计有所帮助。

更多信息请查看IT技术专栏

上一篇：jquery获取及设置outerhtml的方法

下一篇：JQuery操作元素的css样式

手机网站地址：jQuery实现仿美橙互联两级导航菜单的方法

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！