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


    代码简介:

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

    代码内容:

    <!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

  • 相关阅读:
    科学计算和可视化,做数据分析与雷达图。
    Leetcode 429 N叉树的层序遍历
    Leetcode 867转置矩阵
    Leetcode 832 翻转图像
    Leetcode 1052 爱生气的书店老板
    Leetcode 337打家劫舍 III
    Leetcode 766 托普利茨矩阵
    Leetcode 1438绝对差不超过限制的最长连续子数组
    Leetcode 697 数组的度
    Leetcode 567 字符串的排列
  • 原文地址:https://www.cnblogs.com/webdm/p/1985803.html
Copyright © 2020-2023  润新知