js+css实现超简洁的二级下拉菜单效果代码


Posted in Javascript onSeptember 07, 2015

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

这是一个很简洁的CSS+JavaScript二级菜单,没有使用过多的修饰素材,尽量不调用外部图片,简洁大方,而且便于二级开发完善,最初是一个政府网站上的菜单。

运行效果截图如下:

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>二级下拉菜单</title>
<style type="text/css">
/*
#193B5F 栏目字体颜色
*/
*{margin:0; padding:0}
body{width:960px; margin:20px auto; font-size:14px;}
/*导航条*/
#nav {background-color:blue; color:#fff;height:25px;line-height:25px;text-align:center;list-style:none;}
 #nav a{color:#fff;}
 #nav li{width:75px;float:left;position:relative;z-index:1;}
 #nav li .title{display:block;}
 #nav li .title:hover{background-color:green;}
 #nav li .submenu{width:75px;margin:0 auto;background:green;position:absolute;left:0;top:25px;display:none;}
 #nav li .submenu dd{border-top:1px dotted #ddd;color:#fff;}
</style>
</head>
<body>
<ul id="nav">
<!-- 有二级菜单的,给li加class="menu" 没有的不用加 -->
  <li class="menu">
   <a href="#" class="title">国家政务</a>
   <dl class="submenu">
    <dd><a href="#">时政要闻</a></dd>
    <dd><a href="#">远程党教</a></dd>
    <dd><a href="#">村务管理</a></dd>
   </dl>
  </li>
  <li>
   <a href="#" class="title">网络服务</a>
  </li>
  <li class="menu">
   <a href="#" class="title">信息交流</a>
   <dl class="submenu">
    <dd><a href="#">求购信息</a></dd>
    <dd><a href="#">转让信息</a></dd>
   </dl>
  </li>
</div><!--end nav-->
<script type="text/javascript">
<!--
var nav = document.getElementById("nav").childNodes;
for (var i=0;i<nav.length;i++)
{
 if (nav[i].className=="menu")
 {
  nav[i].onmouseover = function(){fnNav(this,"block")};
  nav[i].onmouseout = function(){fnNav(this,"none")};
 }
}
function fnNav(obj,flag)
{
 obj.getElementsByTagName("dl")[0].style.display = flag;
}
//-->
</script>
</body>
</html>

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

Javascript 相关文章推荐
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
微信小程序如何实现五星评价功能
Oct 15 Javascript
Element Alert警告的具体使用方法
Jul 27 Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 #Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 #Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 #Javascript
js实现可折叠展开的手风琴菜单效果
Sep 07 #Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 #Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 #Javascript
纯javascript代码实现计算器功能(三种方法)
Sep 07 #Javascript
You might like
PHP array 的加法操作代码
2010/07/24 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
原生js实现查询天气小应用
2016/12/09 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
Node.js pipe实现源码解析
2017/08/12 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
讲解python参数和作用域的使用
2013/11/01 Python
python类参数self使用示例
2014/02/17 Python
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
python文件的md5加密方法
2016/04/06 Python
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
电子信息专业学生自荐信
2013/11/09 职场文书
初中生学习生活的自我评价
2013/11/20 职场文书
会计电算化专业个人的自我评价
2013/11/24 职场文书
函授本科自我鉴定
2014/02/04 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
工厂见习报告范文
2014/10/31 职场文书
MySQL Router的安装部署
2021/04/24 MySQL
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL
Java获取字符串编码格式实现思路
2022/09/23 Java/Android