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 相关文章推荐
js Function类型
Dec 04 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 Javascript
jQuery实现菜单式图片滑动切换
Mar 14 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
纯js三维数组实现三级联动效果
Feb 07 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
Apr 13 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
微信小程序之onLaunch与onload异步问题详解
Mar 28 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 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
WHOIS类的修改版
2006/10/09 PHP
PHP 压缩文件夹的类代码
2009/11/05 PHP
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
php中关于换行的实例写法
2019/09/26 PHP
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
Python3 批量扫描端口的例子
2019/07/25 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
罗技美国官网:Logitech美国
2020/01/22 全球购物
期中考试后的反思
2014/02/08 职场文书
网吧消防安全责任书
2014/07/29 职场文书
2014年社区工作总结
2014/11/18 职场文书
学术会议邀请函
2015/01/30 职场文书
西安兵马俑导游词
2015/02/02 职场文书
内勤岗位职责
2015/02/10 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
Python基础之pandas数据合并
2021/04/27 Python
golang 实现并发求和
2021/05/08 Golang
无线电知识基础入门篇
2022/02/18 无线电
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript