信鸽网

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

  作者：bea

本文实例讲述了JS实现样式清新的横排下拉菜单效果。分享给大家供大家参考。具体如下： 这是一款灰色调横排清新的下拉菜单，完全符合WEB标准，兼容性不错，菜单简洁好用，适合大部分的网页风格。如果色调不是你想要的，自己发挥聪明才智，修改一下吧。 运行效果截图如下： 在线演示地址如下： http://demo./js/2015/js-simple-style-hp-menu-demo/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD

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


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


运行效果截图如下：



在线演示地址如下：


http://demo./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程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: