JavaScript简单下拉菜单实例代码

2024-10-04 19:24:14

本文实例讲述了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实现多栏闭合展开式广告位菜单效果实例

本文实例讲述了javascript实现多栏闭合展开式广告位菜单效果.分享给大家供大家参考.具体如下: 从操作方式上来说,有似曾相识的感觉,有点手风琴菜单的味道,像一个折叠面板,用JavaScript和CSS结合来实现,虽然不华丽,但很简洁实用,也算是给喜欢网页特效的朋友们一个可参考素材吧. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果

本文实例讲述了Javascript仿新浪游戏频道鼠标悬停显示子菜单效果,分享给大家供大家参考.具体如下: 这里演示使用JS实现的网页栏目分类菜单,从新浪游戏频道扣下来的,操作方式类似于滑动门的效果,鼠标无需点击,只需把鼠标放在一级主菜单上,就可显示出二级分类菜单,这弹出的这个二级菜单中,实际上又重新进行了分类,可以说整体上,这是一款支持三级分类的网站菜单,目前新浪游戏还在用的效果哦. 先来看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-gam
JavaScript实现向右伸出的多级网页菜单效果

本文实例讲述了JavaScript实现向右伸出的多级网页菜单效果.分享给大家供大家参考.具体如下: 这里使用JavaScript实现向右伸出的多级网页菜单效果,鼠标放在左侧的主菜单上,右侧就伸展出二级菜单,基本没有美化,新手所写,欢迎指正,需要完善的地方还挺多. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-right-show-web-menu-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3
JavaScript实现带箭头标识的多级下拉菜单效果

本文实例讲述了JavaScript实现带箭头标识的多级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个支持多级显示的JS菜单,鼠标移向带有小三角的菜单项,可下拉出二级子菜单项,在该主菜单的上方会显示标记,指引当前的位置,本菜单代码使用了一个JS类,可根据代码地址自行下载,这个菜单未在网上测试,用在自己的网站里可能要修改代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-focus-m-select-menu-nav-codes/
JavaScript实现的伸展收缩型菜单代码

本文实例讲述了JavaScript实现的伸展收缩型菜单代码.分享给大家供大家参考.具体如下: 这是一款真正的JavaScript伸展收缩型菜单,鼠标放上看一看,是不是很酷?鼠标划出菜单项的时候,背景会伸长.菜单没有加链接,想用的自己加,再美化一下,绝对够个性吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-zkss-menu-codes/ 具体代码如下: <html> <head> <title>真正的Java
JavaScript实现横向滑出的多级菜单效果

本文实例讲述了JavaScript实现横向滑出的多级菜单效果.分享给大家供大家参考.具体如下: 这是一款JavaScript横向滑出的多级菜单,只用鼠标放上就可以动画出现二级菜单,整体设计精美,大气,博客上也可以用哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hx-show-menu-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit
javascript实现在下拉列表中显示多级树形菜单的方法

本文实例讲述了javascript实现在下拉列表中显示多级树形菜单的方法.分享给大家供大家参考.具体如下: 这里演示在下拉列表框中显示分级的菜单,在很多网站都可以看到的效果,很实用,下拉列表框中的选项是利用JS控制输出,如果你有更好的办法不用JS来显示,那最好了,因为像这种菜单用JS来实现,多多少少有点麻烦. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
Javascript实现的简单右键菜单类

本文实例讲述了Javascript实现的简单右键菜单类.分享给大家供大家参考.具体如下: 这是自己写的一个右键菜单类,屏蔽掉了IE固有的右键菜单,一共有四个参数:第一个是出发显示右键菜单的div的id 第二个是右键菜单这个层的id,根据这个id去创建一个新的层,menuList是菜单项的列表,对应了点击一个菜单项后触发的函数,classList是菜单的class名称,以及菜单项对应的class名称,包含了鼠标滑过时的class. 运行效果截图如下: 在线演示地址如下: http://demo.j
JavaScript实现非常简单实用的下拉菜单效果

本文实例讲述了JavaScript实现非常简单实用的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款实用的JS下拉菜单,鼠标移上菜单就显示出二级菜单,是从其它网站上整理下来的,修改花了不少时间,现在去除了一些无用代码,更简洁了,而且代码兼容性似乎也表现不错,这款两级下拉菜单,基本是由CSS和JavaScript共同实现的,真的挺简洁实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-down-show-menu-code
JavaScript+CSS实现仿天猫侧边网页菜单效果

本文实例讲述了JavaScript+CSS实现仿天猫侧边网页菜单效果.分享给大家供大家参考.具体如下: 这是一款自己写的仿天猫的菜单效果,二级分类的功能已经实现,但没有美化,留着用的朋友自己完善吧,JS功能已经实现,鼠标移在主分类上,二级分类向右伸出展开,目前淘宝网.天猫购物.京东都在用的导航菜单特效,测试时候请先点击一下菜单,主菜单就显示出来了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-ftamil-web-menu-st
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果

本文实例讲述了JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果.分享给大家供大家参考.具体如下: 这里演示JavaScript+CSS仿Mootools竖排黑色动画菜单,并非使用了Mootools,但效果却和使用了Mootools差不多,动画效果平滑,操作舒服,给菜单增色不少. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-mootools-style-demo/ 具体代码如下: <!DOCTYPE html

JavaScript简单下拉菜单实例代码

相关推荐

随机推荐