jquery+css实现的红色线条横向二级菜单效果

2015-08-23 09:00作者：fang

本文实例讲述了jquery+css实现的红色线条横向二级菜单效果。分享给大家供大家参考。具体如下：

这是一款带导航的菜单，当前是哪一项菜单，会很个性的显示出来，鼠标放上后会显示菜单缺口，挺有意思的吧，希望大家喜欢。

运行效果截图如下：

具体代码如下：

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

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>css+js红色线条横向二级菜单</title>

<style>

body {font-family:5B8B4F53,Arial Narrow,arial,serif;background:#ffffff;font-size:12px;}

body,div,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,textarea,blockquote,emBED{padding:0; margin:0;}

li{list-style-type:none;}

a{text-decoration:none;color:#333;}

a:hover{text-decoration:underline;}

#nav{ background:url('images/nav_li_bg.gif') repeat-x top; height:37px; position:relative;width:988px; margin:20px auto;}

#nav .l{ background:url('images/nav_li_left.gif') no-repeat top; height:37px;width:78px; float:left}

#nav .r{width:82px;background:url('images/nav_li_rights.gif') no-repeat right top;height:37px;float:left;}

#nav li { float:left;}

#nav li .v a{ width:138px;height:37px; line-height:32px; display:block; color:#FFF;float:left;font-weight:bold;text-decoration:none;text-align:center;}

#nav li .v a:hover,#nav li .v .sele{width:138px;background:url('images/nav_li_hover.gif') no-repeat top;color:#fff;height:37px;line-height:37px;color:#d11515;}

.kind_menu { height:30px;line-height:30px;vertical-align:middle; position:absolute;top:37px;left:0;text-align:left; display:none;color:#333;font-size:12px;}

.kind_menu a {color:#333; background:url('images/sub_dot.gif') no-repeat left 14px;float:left; text-align:center;padding:0 10px;font-size:12px;text-decoration:none;}

.kind_menu a:hover {color:#000;text-decoration:none;}

#Layer1{width:400px;left:60px;}

#Layer2{width:400px;left:200px;}

#Layer3{width:500px;left:300px;}

#Layer4{width:400px;left:400px;}

#Layer5{width:400px;left:auto;right:120px;}

#Layer6{width:560px;left:auto;right:60px;}

</style>

</head>

<body>

<DIV class=kind_menu id="Layer1">欢迎访问,我们为您提供最优质的网络营销服务! </DIV></LI>

<A href="#">网页特效代码</A> </DIV></LI>

</UL>

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