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

2019-11-20 11:29:09

字体：大中小

来源：转载

供稿：网友

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/js/2015/js-simple-style-hp-menu-demo/

具体代码如下：

<!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实现横向滑出的多级菜单效果

下一篇：jQuery表格行上移下移和置顶的实现方法