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 相关文章推荐
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
jquery清空textarea等输入框实现代码
Apr 22 Javascript
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
简单实现Vue的observer和watcher
Dec 21 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
结合mint-ui移动端下拉加载实践方法总结
Nov 08 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 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面试题附答案
2009/01/07 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
js鼠标左右键 键盘值小结
2010/06/11 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
Python中使用partial改变方法默认参数实例
2015/04/28 Python
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
bat和python批量重命名文件的实现代码
2016/05/19 Python
Python深度优先算法生成迷宫
2018/01/22 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
Python continue语句实例用法
2020/02/06 Python
Python中的With语句的使用及原理
2020/07/29 Python
Python如何急速下载第三方库详解
2020/11/02 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
python中pow函数用法及功能说明
2020/12/04 Python
python 如何在测试中使用 Mock
2021/03/01 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
高级3D打印市场:Gambody
2019/12/26 全球购物
高中毕业生个人自我鉴定
2013/11/24 职场文书
教师自我评价范文
2013/12/16 职场文书
信用社员工先进事迹材料
2014/02/04 职场文书
心理咨询承诺书
2014/05/20 职场文书
离婚起诉状范本
2015/05/19 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS