search

Home >Web Front-end >JS Tutorial >JavaScript implements horizontal slide-out multi-level menu effect_javascript skills

JavaScript implements horizontal slide-out multi-level menu effect_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:37:141199browse

The example in this article describes how to implement a horizontal slide-out multi-level menu effect using JavaScript. Share it with everyone for your reference. The details are as follows:

This is a JavaScript multi-level menu that slides out horizontally. Just put the mouse on it to animate the secondary menu. The overall design is exquisite and grand, and it can also be used on blogs.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-hx-show-menu-style-demo/

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横向滑出的多级菜单</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 id="wrapper">
<div id="leftcolumn">
 <dl class="dropdown">
  <dt id="one-ddheader" class="upperdd" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">我们首页</dt>
  <dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
   <ul>
    <li><a href="#" class="underline">脚本主页</a></li>
    <li><a href="#" class="underline">网页特效</a></li>
    <li><a href="#">脚本下载</a></li>
   </ul>
  </dd>
 </dl>
 <dl class="dropdown">
  <dt id="two-ddheader" class="upperdd" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">网站导航</dt>
  <dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
   <ul>
    <li><a href="#" class="underline">ASP</a></li>
    <li><a href="#" class="underline">PHP</a></li>
    <li><a href="#" class="underline">.NET</a></li>
    <li><a href="#">网站留言</a></li>
   </ul>
  </dd>
 </dl>
 <dl class="dropdown">
  <dt id="three-ddheader" class="upperdd">最新下载</dt>
 </dl>
 <dl class="dropdown">
  <dt id="four-ddheader" onmouseover="ddMenu('four',1)" onmouseout="ddMenu('four',-1)">欢迎回来</dt>
  <dd id="four-ddcontent" onmouseover="cancelHide('four')" onmouseout="ddMenu('four',-1)">
   <ul>
    <li><a href="#" class="underline">欢迎再来</a></li>
    <li><a href="#">慢走，不送</a></li>
   </ul>
  </dd>
 </dl>
</div>
</div>
</body>
</html>

I hope this article will be helpful to everyone’s JavaScript programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Blue table tab effect implemented by JS CSS_javascript skillsNext article：Blue table tab effect implemented by JS CSS_javascript skills

Related articles

See more