JS+CSS实现简单的二级下拉导航菜单效果


Posted in Javascript onSeptember 21, 2015

本文实例讲述了JS+CSS实现简单的二级下拉导航菜单效果。分享给大家供大家参考。具体如下:

这是一款CSS配合JavaScript实现二级下拉导航菜单,好像CSS要配合JS才能写出好效果来,本款菜单同样用到了JS,菜单目前支持两级,下拉导航是我们经常用的一种菜单形式,把这个修改一下你就能用了,结构挺简单,相信你会做好的。

运行效果截图如下:

JS+CSS实现简单的二级下拉导航菜单效果

在线演示地址如下:

具体代码如下:

<!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>CSS二级下拉导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
body,html{padding:0;margin:0;text-align:center;font:normal 14px 'arial';}
#mainNavBar{width:100%;background:#999;padding:10px 0;}
#nav{width:760px;height:30px;margin:0 auto;}
#nav ul{padding:0;margin:0;}
#nav ul li{position:relative;float:left;width:60px;height:30px;line-height:30px;overflow:hidden;list-style-type:none;}
#nav ul li a{display:block;color:#fff;text-decoration:none;}
#nav ul li a:hover{font-weight:bold;background:#666;}
#subNav{position:absolute;width:150px;top:30px;left:0px;padding:5px;background:#666;color:#fff;text-align:left;}
#subNav a{text-decoration:none;font-weight:normal;display:block;}
#subNav a:hover{color:#f00;background:#f00;}
</style>
</head>
<body>
<div id="mainNavBar">
 <div id="nav">
  <ul>
   <li>
    <a href="#">添加</a>
    <div id="subNav">
     <a href="#">日志</a>
     <a href="#">分类</a>
    </div>
   </li>
   <li>
    <a href="#">管理</a>
    <div id="subNav">
     <a href="#">分类</a>
     <a href="#">文章</a>
    </div>
   </li>
   <li>
    <a href="#">扩展</a>
    <div id="subNav">
     <a href="#">评论管理</a>
     <a href="#">留言管理</a>
     <a href="#">注销退出</a>
    </div>
   </li>
  </ul>
 </div>
</div>
<script language="javascript">
var nav=document.getElementById("nav").getElementsByTagName("li");
for(i=0;i<nav.length;i++){
nav[i].onmouseover=function(){
 this.style.fontWeight="bold";
 this.style.overflow="visible";
 this.style.background="#666666";
 }
nav[i].onmouseout=function(){
 this.style.fontWeight="normal";
 this.style.background="#999999"
 this.style.overflow="hidden";
 }
}
</script>
</body>
</html>

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

Javascript 相关文章推荐
用js判断用户浏览器是否是XP SP2的IE6
Mar 08 Javascript
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
使用UglifyJS合并/压缩JavaScript的方法
Mar 07 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
Mar 18 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
微信小程序 引用其他js文件实现代码
Feb 22 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
利用Blob进行文件上传的完整步骤
Aug 02 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
ES6 解构赋值的原理及运用
May 25 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 #Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 #Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 #Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 #Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 #Javascript
jquery+正则实现统一的表单验证
Sep 20 #Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 #Javascript
You might like
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
JObj预览一个JS的框架
2008/03/13 Javascript
javascript 写类方式之九
2009/07/05 Javascript
javascript getElementsByName()的用法说明
2009/07/31 Javascript
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
JavaScript简介
2015/02/15 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
jquery自定义组件实例详解
2020/12/31 jQuery
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
python实现简单遗传算法
2018/03/19 Python
python线程池threadpool实现篇
2018/04/27 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
python如何把字符串类型list转换成list
2020/02/18 Python
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
介绍一下gcc特性
2015/10/31 面试题
幼儿园长自我鉴定
2013/10/17 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
长江三峡导游词
2015/01/31 职场文书
yolov5返回坐标的方法实例
2022/03/17 Python