js实现简洁大方的二级下拉菜单效果代码


Posted in Javascript onSeptember 01, 2015

本文实例讲述了js实现简洁大方的二级下拉菜单效果代码。分享给大家供大家参考。具体如下:

这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整体效果看上去相当实用,下拉导航菜单也是大家比较常用的。

运行效果截图如下:

js实现简洁大方的二级下拉菜单效果代码

在线演示地址如下:

具体代码如下:

<!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>
<title>简洁大方的二级下拉菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{margin:0;padding:0;font-style:normal;font-family:宋体;}
body{text-align:center;font-size:14px;}
#content{margin:0 auto;width:600px;}
#content #nav{background:#006400;height:32px;margin-top:10px;}
#content #nav ul{list-style:none;}
#content #nav ul li{float:left;width:100px;line-height:32px;position:relative;}
#nav div{width:100px;position:absolute;left:0px;padding-bottom:0px;background:#006400;float:left;height:0;overflow:hidden;}
#content #nav li .a{text-decoration:none;color:#00CD00;line-height:32px;display:block;border-right:1px solid #009800;}
#nav div a{text-decoration:none;color:#00CD00;line-height:26px;display:block;}
#nav div a:hover{background:#005400;}
</style>
</head>
<body>
<div id="content">
 <div id="nav">
  <ul id="supnav">
   <li><a href="#" class="a">菜单项1</a>
    <div>
     <a href="#">菜单测试1</a>
     <a href="#">菜单测试1</a>
     <a href="#">菜单测试1</a>
    </div>
   </li>
   <li><a href="#" class="a">菜单项2</a>
    <div>
     <a href="#">菜单测试2</a>
     <a href="#">菜单测试2</a>
     <a href="#">菜单测试2</a>
    </div>
   </li>
   <li><a href="#" class="a">菜单项3</a>
    <div>
     <a href="#">菜单测试3</a>
     <a href="#">菜单测试3</a>
     <a href="#">菜单测试3</a>
     <a href="#">菜单测试3</a>
     <a href="#">菜单测试3</a>
    </div>
   </li>
   <li><a href="#" class="a">菜单项4</a>
    <div>
     <a href="#">菜单测试4</a>
     <a href="#">菜单测试4</a>
     <a href="#">菜单测试4</a>
    </div>
   </li>
   <li><a href="#" class="a">菜单项5</a>
    <div>
     <a href="#">菜单测试5</a>
     <a href="#">菜单测试5</a>
     <a href="#">菜单测试5</a>
     <a href="#">菜单测试5</a>
    </div>
   </li>
   <li><a href="#" class="a">菜单项6</a>
    <div>
     <a href="#">菜单测试6</a>
     <a href="#">菜单测试6</a>
     <a href="#">菜单测试6</a>
    </div>
   </li>
  </ul>
 </div>
</div>
<script type="text/javascript">
var supnav=document.getElementById("supnav");
var nav=document.getElementById("nav");
var btns=document.getElementsByTagName("li");
var subnavs=nav.getElementsByTagName("div");
var paddingbottom=20;
var defaultHeight=0;
function drop(obj,ivalue){
 var a=obj.offsetHeight;
 var speed=(ivalue-obj.offsetHeight)/8;
 a+=Math.floor(speed);
 obj.style.height=a+"px";
}
window.onload=function(){
 for(var i=0;i<btns.length;i++){
  btns[i].index=i;
  btns[i].onmouseover=function(){
   var osubnav=subnavs[this.index];
   var sublinks=osubnav.getElementsByTagName("a");
   if(osubnav.firstChild.tagName==undefined){
    var itarheight=parseInt(osubnav.childNodes[1].offsetHeight)*sublinks.length+paddingbottom;
   }else{
    var itarheight=parseInt(osubnav.firstChild.offsetHeight)*sublinks.length+paddingbottom;
   }
   clearInterval(this.itimer);
   this.itimer=setInterval(function(){drop(osubnav,itarheight);},30);
  }
  btns[i].onmouseout=function(){
   var osubnav=subnavs[this.index];
   clearInterval(this.itimer);
   this.itimer=setInterval(function(){drop(osubnav,defaultHeight);},30);
  }
 }
}
</script>
</body>
</html>

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

Javascript 相关文章推荐
修复IE9&amp;safari 的sort方法
Oct 21 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
浅谈Angular 中何时取消订阅
Nov 22 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 #Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 #Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 #Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 #Javascript
JS实现黑客帝国文字下落效果
Sep 01 #Javascript
JavaScript中this详解
Sep 01 #Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 #Javascript
You might like
PHP运行模式的深入理解
2013/06/03 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
php中的观察者模式简单实例
2015/01/20 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
JavaScript中的Document文档对象
2008/01/16 Javascript
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
使用bootstrap3开发响应式网站
2016/05/12 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
Django实现文件上传下载
2019/10/06 Python
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
思想品德自我评价
2014/02/04 职场文书
合同意向书范本
2014/07/30 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
丧事答谢词
2015/01/05 职场文书
工作表扬信范文
2015/01/17 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
JavaScript组合继承详解
2021/11/07 Javascript
Python 键盘事件详解
2021/11/11 Python
各种货币符号快捷输入
2022/02/17 杂记