JavaScript简单下拉菜单实例代码


Posted in Javascript onSeptember 07, 2015

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

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

运行效果截图如下:

JavaScript简单下拉菜单实例代码

在线演示地址如下:

具体代码如下:

<!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 相关文章推荐
jquery.validate使用攻略 第三部
Jul 01 Javascript
javascript 事件绑定问题
Jan 01 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
基于vue的短信验证码倒计时demo
Sep 13 Javascript
angularJS开发注意事项
May 26 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
微信小程序ibeacon三点定位详解
Oct 31 Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 #Javascript
jQuery实现简单下拉导航效果
Sep 07 #Javascript
JS实现弹性菜单效果代码
Sep 07 #Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 #Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 #Javascript
关于JS中prototype的理解
Sep 07 #Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 #Javascript
You might like
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
判断脚本加载是否完成的方法
2009/05/26 Javascript
一些mootools的学习资源
2010/02/07 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
python套接字流重定向实例汇总
2016/03/03 Python
Python3计算三角形的面积代码
2017/12/18 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
澳大利亚百货公司:David Jones
2018/02/08 全球购物
在校生钳工实习自我鉴定
2013/09/19 职场文书
医药个人求职信范文
2014/01/29 职场文书
爱国主义演讲稿
2014/05/07 职场文书
法人授权委托书样本
2014/09/19 职场文书
公司周年庆典致辞
2015/07/30 职场文书
《小小的船》教学反思
2016/02/18 职场文书
爱国之歌(8首)
2019/09/29 职场文书
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android