首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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简单下拉菜单实例代码

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js中的scroll和offset 使用比较的实例与分析
Sep 29 Javascript
获取下拉列表框的值是数组，split，$.inArray示例
Nov 13 Javascript
js动态拼接正则表达式的两种方法
Mar 04 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
vue init失败简单解决方法(终极版)
Dec 22 Javascript
JQuery常见节点操作实例分析
May 15 jQuery
原生js 实现表单验证功能
Feb 08 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
吸血鬼(1) 死亡搁浅(1) 原神(1) 铁拳(1) FS1016(1) 74HC4066(1) BCLer(1) 大话西游(1) 模拟人生(1) AGC(1)
You might like
PHP学习之数组的定义和填充
2011/04/17 PHP
PHP多线程类及用法实例
2014/12/03 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
PHP学习笔记（三）：数据类型转换与常量介绍
2015/04/17 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
Python中类型关系和继承关系实例详解
2015/05/25 Python
python实现计算倒数的方法
2015/07/11 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
python机器学习之随机森林（七）
2018/03/26 Python
python中删除某个元素的方法解析
2019/11/05 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
详解python中的异常和文件读写
2021/01/03 Python
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
日本PLST在线商店：日本时尚杂志刊载的人气服装
2016/12/10 全球购物
C#里面如何倒序排列一个数组的元素？
2013/06/21 面试题
在校生自我鉴定
2014/01/23 职场文书
法制演讲稿
2014/09/10 职场文书
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL