JavaScript简单下拉菜单实例代码

网络编程 2025/1/18 佚名

3 1 2

快活林资源网 Design By www.csstdc.com

本文实例讲述了JavaScript简单下拉菜单实例代码。分享给大家供大家参考。具体如下：

这是一款JavaScript实现的下拉菜单演示代码，带渐变效果的CSS+jQuery菜单，向下滑出型的菜单，最高支持两级，网上常见到的一种菜单风格，希望大家喜欢哦。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-simple-xlcd-down-menu-codes/

具体代码如下：

<!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=UTF-8">
<title>JavaScript下拉菜单演示代码</title>
<style type="text/css">
body {margin:25px; font:12px Verdana, Arial, Helvetica}
* {padding:0; margin:0}
.dropdown {float:left; padding-right:0px}
.dropdown dt {width:80px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url()}
.dropdown dt:hover {background:url()}
.dropdown dd {position:absolute; overflow:hidden; width:100px; display:none; background:#fff; z-index:200; opacity:0}
.dropdown ul {width:100px; border:2px solid #9ac1c9; list-style:none; border-top: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 language="javascript">
var DDSPEED = 10;
var DDTIMER = 15;
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);
  if(c.maxh && c.maxh <= c.offsetHeight){return}
  else if(!c.maxh){
   c.style.display = 'block';
   c.style.height = 'auto';
   c.maxh = c.offsetHeight;
   c.style.height = '0px';
  }
  c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
 }else{
  h.timer = setTimeout(function(){ddCollapse(c)},50);
 }
}
// collapse the menu //
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 < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
   clearInterval(c.timer);
   }
   }
   </script>
   </head>
   <body>
   <br><br>
   <dl class="dropdown">
   <dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">One</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">Navigation Item 2</a></li>
   <li><a href="#" class="underline">Navigation Item 3</a></li>
   <li><a href="#" class="underline">Navigation Item 4</a></li>
   <li><a href="#">Navigation Item 5</a></li>
 </ul>
 </dd>
 </dl>
 <dl class="dropdown">
 <dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">Two</dt>
 <dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
 <ul>
 <li><a href="#" class="underline">Navigation Item 1</a></li>
 <li><a href="#" class="underline">Navigation Item 2</a></li>
 <li><a href="#" class="underline">Navigation Item 3</a></li>
 <li><a href="#" class="underline">默认主页</a></li>
 <li><a href="#">Navigation Item 5</a></li>
 </ul>
 </dd>
 </dl>
 <dl class="dropdown">
 <dt id="three-ddheader" onmouseover="ddMenu('three',1)" onmouseout="ddMenu('three',-1)">Two</dt>
 <dd id="three-ddcontent" onmouseover="cancelHide('three')" onmouseout="ddMenu('three',-1)">
 <ul>
 <li><a href="#" class="underline">Navigation Item 1</a></li>
 <li><a href="#" class="underline">Navigation Item 2</a></li>
 <li><a href="#" class="underline">Navigation Item 3</a></li>
 <li><a href="#" class="underline">Navigation Item 4</a></li>
 <li><a href="#">Navigation Item 5</a></li>
 </ul>
 </dd>
 </dl>
 <dl class="dropdown">
 <dt id="four-ddheader" onmouseover="ddMenu('four',1)" onmouseout="ddMenu('four',-1)">Two</dt>
 <dd id="four-ddcontent" onmouseover="cancelHide('four')" onmouseout="ddMenu('four',-1)">
 <ul>
 <li><a href="#" class="underline">默认主页</a></li>
 <li><a href="#" class="underline">Navigation Item 2</a></li>
 <li><a href="#" class="underline">Navigation Item 3</a></li>
 <li><a href="#" class="underline">Navigation Item 4</a></li>
 <li><a href="#">Navigation Item 5</a></li>
 </ul>
 </dd>
 </dl>
 <dl class="dropdown">
 <dt id="fir-ddheader" onmouseover="ddMenu('fir',1)" onmouseout="ddMenu('fir',-1)">Two</dt>
 <dd id="fir-ddcontent" onmouseover="cancelHide('fir')" onmouseout="ddMenu('fir',-1)">
 <ul>
 <li><a href="#" class="underline">Navigation Item 1</a></li>
 <li><a href="#" class="underline">默认主页</a></li>
 <li><a href="#" class="underline">Navigation Item 3</a></li>
 <li><a href="#" class="underline">Navigation Item 4</a></li>
 <li><a href="#">Navigation Item 5</a></li>
 </ul>
 </dd>
 </dl>
 <dl class="dropdown">
 <dt id="six-ddheader" onmouseover="ddMenu('six',1)" onmouseout="ddMenu('six',-1)">Two</dt>
 <dd id="six-ddcontent" onmouseover="cancelHide('six')" onmouseout="ddMenu('six',-1)">
 <ul>
 <li><a href="#" class="underline">Navigation Item 1</a></li>
 <li><a href="#" class="underline">Navigation Item 2</a></li>
 <li><a href="#" class="underline">Navigation Item 3</a></li>
 <li><a href="#" class="underline">Navigation Item 4</a></li>
 <li><a href="#">Navigation Item 5</a></li>
 </ul>
 </dd>
 </dl>
 <dl class="dropdown">
 <dt id="seven-ddheader" onmouseover="ddMenu('seven',1)" onmouseout="ddMenu('seven',-1)">Two</dt>
 <dd id="seven-ddcontent" onmouseover="cancelHide('seven')" onmouseout="ddMenu('seven',-1)">
 <ul>
 <li><a href="#" class="underline">Navigat</a></li>
 <li><a href="#" class="underline">Naviga</a></li>
 <li><a href="#" class="underline">Navigati</a></li>
 <li><a href="#" class="underline">Navigat</a></li>
 <li><a href="#">Navigatio</a></li>
 </ul>
 </dd>
 </dl>
 <div style="clear:both">
 </div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

JavaScript,下拉菜单

快活林资源网 Design By www.csstdc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

快活林资源网 Design By www.csstdc.com

评论“JavaScript简单下拉菜单实例代码”

暂无评论...

www.csstdc.com 快活林资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

JavaScript简单下拉菜单实例代码

jquery仅用6行代码实现滑动门效果

jquery的幻灯片图片切换效果代码分享

评论“JavaScript简单下拉菜单实例代码”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

JavaScript简单下拉菜单实例代码

jquery仅用6行代码实现滑动门效果

jquery的幻灯片图片切换效果代码分享

评论“JavaScript简单下拉菜单实例代码”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存