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 相关文章推荐
详谈jQuery中的this和$(this)
Nov 13 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
Javascript实现单例模式
Jan 24 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 Javascript
Vue h函数的使用详解
Feb 18 Vue.js
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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
PHP之数组学习
2011/05/29 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
JS 获取滚动条高度示例代码
2013/10/24 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
python 中的列表解析和生成表达式
2011/03/10 Python
python实现堆栈与队列的方法
2015/01/15 Python
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
django使用LDAP验证的方法示例
2018/12/10 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
基于PyTorch中view的用法说明
2021/03/03 Python
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
文秘大学生求职信
2014/02/25 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
检讨书1000字
2014/10/11 职场文书
禁毒主题班会教案
2015/08/14 职场文书
初中团支书竞选稿
2015/11/21 职场文书
导游词之张家界
2019/10/31 职场文书
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python