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 相关文章推荐
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
js 调用百度分享功能
Feb 27 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
基于模板引擎Jade的应用(详解)
Dec 12 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
vue3+typescript实现图片懒加载插件
Oct 26 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
php生成缩略图的类代码
2008/10/02 PHP
Javascript的一种模块模式
2008/03/22 Javascript
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
JS 在指定数组中随机取出N个不重复的数据
2014/06/10 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
python 读取文件并替换字段的实例
2018/07/12 Python
python 检查文件mime类型的方法
2018/12/08 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
final, finally, finalize的区别
2012/03/01 面试题
股份合作协议书范本
2014/04/14 职场文书
服务行业演讲稿
2014/09/02 职场文书
Python实现为PDF去除水印的示例代码
2022/04/03 Python