Home>

This is a multi-level menu that javascript slides out horizontally.Just use your mouse to animate the secondary menu,The overall design is exquisite,Atmospheric, can also be used on blogs.

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>
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>javascript multi-level menu that slides out horizontally</title>
<style>
* {padding:0;margin:0}
body {font:12px verdana, arial, helvetica}
#wrapper {width:750px;padding:25px;margin:0 auto}
#leftcolumn {float:left;width:225px}
#rightcolumn {float:left;width:525px}
.dropdown {display:block;position:relative}
.dropdown dt {width:188px;border:2px solid #9ac1c9;padding:8px;font-weight:bold;cursor:pointer;background:url (images/header.gif)}
.dropdown .upperdd {border-bottom:none}
.dropdown dt:hover {background:url (images/header_over.gif)}
.dropdown dd {position:absolute;top:0;overflow:hidden;width:208px;display:none;background:#fff;opacity:0}
.dropdown ul {width:204px;border:2px solid #9ac1c9;list-style:none}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block;padding:5px;color:#333;text-decoration:none;background:#eaf0f2;width:194px}
.dropdown a:hover {background:#d9e1e4;color:#000}
.dropdown .underline {border-bottom:1px solid #b9d6dc}
</style>
<script type="text/javascript">
var ddspeed=10;
var ddtimer=15;
var offset=-2;
var zint=100;
function ddmenu (id, d) {
 var h=document.getelementbyid (id + "-ddheader");
 var c=document.getelementbyid (id + "-ddcontent");
 clearinterval (c.timer);
 if (d == 1) {
  cleartimeout (h.timer);
  c.style.display="block";
  if (c.maxh&&c.maxh<= c.offsetheight) {return}
  else if (! c.maxh) {
   c.style.left=(h.offsetwidth + offset) + "px";
   c.style.height="auto";
   c.maxh=c.offsetheight;
   c.style.height="0px";
  }
  zint=zint + 1;
  c.style.zindex=zint;
  c.timer=setinterval (function () (ddslide (c, 1)), ddtimer);
 } else {
  h.timer=settimeout (function () (ddcollapse (c)), 50);
 }
}
function ddcollapse (c) {
 c.timer=setinterval (function () (ddslide (c, -1)), ddtimer);
}
function cancelhide (id) {
 var h=document.getelementbyid (id + "-ddheader");
 var c=document.getelementbyid (id + "-ddcontent");
 cleartimeout (h.timer);
 clearinterval (c.timer);
 if (c.offsetheight<c.maxh) {
  c.timer=setinterval (function () (ddslide (c, 1)), ddtimer);
 }
}
function ddslide (c, d) {
 var currh=c.offsetheight;
 var dist;
 if (d == 1) {
  dist=math.round ((c.maxh-currh)/ddspeed);
 } else {
  dist=math.round (currh/ddspeed);
 }
 if (dist<= 1&&d == 1) {
  dist=1;
 }
 c.style.height=currh + (dist * d) + "px";
 c.style.opacity=currh/c.maxh;
 c.style.filter="alpha (opacity =" + (currh * 100/c.maxh) + ")";
 if (currh>(c.maxh-2)&&d == 1) {
  clearinterval (c.timer);
 } else if (dist<1&&d!=1) {
  clearinterval (c.timer);
  c.style.display="none";
 }
}
</script>
</head>
<body>
<div>
<div>
 <dl>
  <dt onmouseover="ddmenu (" one ", 1)" onmouseout="ddmenu (" one ",-1)">Our homepage</dt>
  <dd onmouseover="cancelhide (" one ")" onmouseout="ddmenu (" one ",-1)">
   <ul>
    <li><a href="#">Script Homepage</a></li>
    <li><a href="#">Web page effects</a></li>
    <li><a href="#">Script Download</a></li>
   </ul>
  </dd>
 </dl>
 <dl>
  <dt onmouseover="ddmenu (" two ", 1)" onmouseout="ddmenu (" two ",-1)">Site Navigation</dt>
  <dd onmouseover="cancelhide (" two ")" onmouseout="ddmenu (" two ",-1)">
   <ul>
    <li><a href="#"&asp;asp</a></li>
    <li><a href="#">php</a></li>
    <li><a href="#">.net</a></li>
    <li><a href="#"&&site comments</a></li>
   </ul>
  </dd>
 </dl>
 <dl>
  <dt>latest download</dt>
 </dl>
 <dl>
  <dt onmouseover="ddmenu (" four ", 1)" onmouseout="ddmenu (" four ",-1)">Welcome back</dt>
  <dd onmouseover="cancelhide (" four ")" onmouseout="ddmenu (" four ",-1)">
   <ul>
    <li><a href="#">Welcome back</a></li>
    <li><a href="#">Walk slowly and do not send</a></li>
   </ul>
  </dd>
 </dl>
</div>
</div>
</body>
</html>
  • Previous Explain how to write graphical windows in Java
  • Next Solve the problem of "It is not safe to rely on the system ’s timezone settings" in php