下拉菜单，点击后拉出，而非滑过

2024-09-05 12:19:39

字体：大中小

来源：转载

供稿：网友

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

<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>下拉菜单</title><style>#outer {width:748px; height:300px; background:url() no-repeat right bottom; border:1px solid #ddd; border-width:5px 1px 1px; position:relative;}#menu {list-style-type:none; width: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; width: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;width: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>聊天留言</li><li>企业建站</li><li>论坛社区</li></ul></li><li class="sub">JAVA源码<ul><li>影音视频</li><li>商务商城</li><li>查询搜索</li></ul></li><li class="sub">PHP源码<ul><li>图片相册</li><li>主机邮件</li><li>动画娱乐</li></ul></li><li class="sub">其它分类<ul><li>文件管理</li><li>Ajax相关</li><li>综合其它</li></ul></li></ul></div></body></html>

上一篇：完美兼容的纯CSS下拉菜单，不可错过

下一篇：响应鼠标变色的按钮式蓝色菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注