Home>

This is a menu with navigation,Which menu is currently,Will be displayed very personally,The menu gap will be displayed when the mouse is over.Very interesting, right?Hope you like it.

The screenshot of the running effect is as follows:

The online demo address is as follows:

The specific code is as follows:

<! 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>
<title>css + js red line horizontal secondary menu</title>
<style>
body {font-family:\ 5b8b \ 4f53, 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 .va {width:138px;height:37px;line-height:32px;display:block;color:#fff;float:left;font-weight:bold;text-decoration:none;text-align:center ;}
#nav li .va: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>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id=nav>
<div class=l></div>
<ul class=c>
 <li><span class=v><a href="#" target="_ blank">Homepage</a></span>
 <div class=kind_menu>
 <a href="#">Script Download</a>
 <a href="#">Script Tutorial</a></div></li>
 <li><span class=v><a href="#">Navigation bar</a></span>
 <div class=kind_menu>
 <a href="#">English domain name</a>
 <a href="#">Chinese domain name</a>
 <a href="#">Universal URL</a>
 <a href="#">Source download</a>
 <a href="#">Domain Name Transaction</a>
 <a href="#">Domain Name Help</a>
 <a href="#">Smart Acceleration</a></div></li>
 <li><span class=v><a href="#">e-commerce</a></span>
 <div class=kind_menu>
 <a href="#">Internet Marketing</a>
 <a href="#">Source download</a>
 <a href="#">Internet Marketing</a>
 <a href="#">Web page effects</a></div></li>
 <li><span class=v><a href="#">Internet Marketing</a></span>
 <div class=kind_menu>
 <a href="#">Internet Marketing</a>
 <a href="#">Internet Marketing</a>
 <a href="#">Internet Marketing</a>
 <a href="#">Web page special effect code //a></div></li>
 <li><span class=v><a href="#">About us</a></span>
 <div class=kind_menu>
 <a href="#">Internet Marketing</a>
 <a href="#">Source download</a>
 <a href="#">Internet Marketing</a>
 <a href="#">Web page effects</a></div></li>
 </ul>
 <div class=r></div>
</div><!-Nav->
<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>
  • Previous C # implement the form exit special effect that shrinks from the center to the center
  • Next Blue secondary navigation bar effect code implemented by jquery
  • Trends