JS实现样式清新的横排下拉菜单效果


Posted in Javascript onOctober 09, 2015

本文实例讲述了JS实现样式清新的横排下拉菜单效果。分享给大家供大家参考。具体如下:

这是一款灰色调横排清新的下拉菜单,完全符合WEB标准,兼容性不错,菜单简洁好用,适合大部分的网页风格。如果色调不是你想要的,自己发挥聪明才智,修改一下吧。

运行效果截图如下:

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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS下拉菜单,竖向</title>
<style type="text/css" media="screen">
<!--
#Nav {
width: auto;
float: left;
border-left: 1px solid #777;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
position: relative;
width: 120px;
float: left;
}
li ul {
position: absolute;
left: 0px;
top: 23px;
display: none;
border-bottom: 1px solid #777;
border-left: 0px;
}
ul li a {
display: block;
font-size: 12px;
line-height: 22px;
text-decoration: none;
color: #333;
background-color: #FFF;
height: 22px;
padding-left: 8px;
border: 1px solid #777;
border-left: 0px;
}
ul li ul li a {
border: 1px solid #777;
border-bottom: 0px;
}
a:hover {
color: #F60;
background-color: #EFEFEF;
}
* html ul li {
float: left;
height: 1%;
}
* html ul li a {
height: 1%;
}
li:hover ul, li.over ul {
display: block;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
startList = function() {
if (document.all && document.getElementById) {
var menuRoot = document.getElementById("Menu");
for (var i = 0; i < menuRoot.childNodes.length; i++) {
var node = menuRoot.childNodes[i];
if (node.nodeName == "LI") {
node.onmouseover = function() {
this.className += " over";
}
node.onmouseout = function() {
this.className = this.className.replace(" over", "");
}
}
}
}
}
window.onload = startList;
-->
</script>
</head>
<body>
<div id="Nav">
<ul id="Menu">
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">网站介绍</a></li>
<li><a href="#">客户反馈</a></li>
<li><a href="#">产品服务</a></li>
</ul>
</li>
<li><a href="#">脚本下载</a>
<ul>
<li><a href="#">最新脚本</a></li>
<li><a href="#">下载排行</a></li>
<li><a href="#">分类索引</a></li>
</ul>
</li>
<li><a href="#">网页特效</a>
<ul>
<li><a href="#">菜单</a></li>
<li><a href="#">布局</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

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

Javascript 相关文章推荐
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
jQuery中$.fn的用法示例介绍
Nov 05 Javascript
不要使用jQuery触发原生事件的方法
Mar 03 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
javascript实现带节日和农历的日历特效
Feb 01 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 Javascript
jQuery表格行上移下移和置顶的实现方法
Oct 08 #Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 #Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
Oct 08 #Javascript
js小数运算出现多位小数如何解决
Oct 08 #Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 #Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 #Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 #Javascript
You might like
PHP抽象类 介绍
2012/06/13 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
js加解密 脚本解密
2008/02/22 Javascript
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
JQuery显示、隐藏div的几种方法简明总结
2015/04/16 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
AngularJS入门之动画
2016/07/27 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
python实现在sqlite动态创建表的方法
2015/05/08 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
Python可迭代对象操作示例
2019/05/07 Python
Python初学者常见错误详解
2019/07/02 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
Python 处理文件的几种方式
2019/08/23 Python
django有哪些好处和优点
2020/09/01 Python
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
中国文明网签名寄语
2014/01/18 职场文书
民主生活会意见
2015/06/05 职场文书
关于军训的感想
2015/08/07 职场文书
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技