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 相关文章推荐
禁止你的左键复制实用技巧
Jan 04 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
less简单入门(CSS 预处理语言)
Mar 08 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
element-ui多文件上传的实现示例
Apr 10 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
p5.js临摹动态图形的方法
Oct 23 Javascript
javascript 设计模式之享元模式原理与应用详解
Apr 08 Javascript
在vue中实现echarts随窗体变化
Jul 27 Javascript
vue2.0 解决抽取公用js的问题
Jul 31 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
PHP XML error parsing SOAP payload on line 1
2010/06/17 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
php更新修改excel中的内容实例代码
2014/02/26 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
jQuery 无刷新分页实例代码
2013/11/12 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
详解PyTorch批训练及优化器比较
2018/04/28 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
目标责任书范文
2014/04/14 职场文书
政府法律服务方案
2014/06/14 职场文书
本科应届生自荐信
2014/06/29 职场文书
卖房授权委托书样本
2014/10/05 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js
Java Spring Lifecycle的使用
2022/05/06 Java/Android