单击后弹出的下拉菜单代码

代码简介:

一款别致、漂亮、操作形式新颖的下拉菜单,一般的下拉菜单都是在鼠标滑过的时候出现菜单,这一款则是在点击后才激活下拉菜单,个人感觉这种比滑动的更方便于用户,让用户随心所欲的操作,这是最重要的。

代码内容:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>单击后弹出的下拉菜单代码_网页代码站(www.webdm.cn)</title>
<style>
#outer {748px; height:300px; background:url(clock.jpg) no-repeat right bottom; border:1px solid #ddd; 

border-5px 1px 1px; position:relative;}
#menu {list-style-type:none; 644px; padding:0; margin:0 auto;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#088; margin:1px 1px 0 0;position:relative;}
#menu li.sub {background:#f80;}
/*/*/
#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:24px; 

160px; text-decoration:none; text-align:center; cursor:pointer; font-weight:bold;}
#menu li:hover, #menu li a:hover {background:#c00;}
#menu ul {position:absolute;left:-9999px;128px;}
#menu li.click {background:#c00;}
#menu li.click ul{left:0; top:24px; 
</style>
<script type="text/javascript">
clickMenu = function(menu) {
	var getEls = document.getElementById(menu).getElementsByTagName("LI");
	var getAgn = getEls;

	for (var i=0; i<getEls.length; i++) {
			getEls[i].onclick=function() {
				for (var x=0; x<getAgn.length; x++) {
				getAgn[x].className=getAgn[x].className.replace("unclick", "");
				getAgn[x].className=getAgn[x].className.replace("click", "unclick");
				}
			if ((this.className.indexOf('unclick'))!=-1) {
				this.className=this.className.replace("unclick", "");;
				}
				else {
				this.className+=" click";
				}
			}
		}
	}
</script>
</head>
<body onload="clickMenu('menu')">
<ul id="menu">
<li class="sub">ASP Codes
<ul>
<li><a href="http://www.webdm.cn">聊天留言</a></li>
<li><a href="/">企业建站</a></li>
<li><a href="/">论坛社区</a></li>
</ul>
</li>
<li class="sub">PHP Codes
<ul>
<li><a href="http://www.webdm.cn">影音视频</a></li>
<li><a href="/">商务商城</a></li>
<li><a href="/">查询搜索</a></li>
</ul>
</li>
<li class="sub">eShop
<ul>
<li><a href="/">图片相册</a></li>
<li><a href="/">主机邮件</a></li>
<li><a href="/">动画娱乐</a></li>
</ul>
</li>
<li class="sub">网页代码站<ul>
<li><a href="/">文件管理</a></li>
<li><a href="/">Ajax相关</a></li>
<li><a href="/">综合其它</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>

代码来自:http://www.webdm.cn/webcode/136fb897-716e-4793-add8-3716c7e7630e.html

原文地址:https://www.cnblogs.com/webdm/p/1985803.html