JS伸缩的菜单 + 右键菜单

来源：互联网发布：如何做数据拟合曲线编辑：程序博客网时间：2024/06/06 08:54
应朋友需要，要求写一个伸缩菜单，并且要求菜单上可以选择右键菜单，分别搜了一下两者的实例，整合了一下并做适当的修改
实例来源：
伸缩菜单： http://www.jb51.net/article/44079.htm
右键菜单：http://www.cnblogs.com/snandy/archive/2011/03/09/1977789.html

该段代码只提供思路，其本身有缺陷，需要根据实际情况进行就改，切勿拿来主义！
<!DOCTYPE html><html><head><title>伸缩的菜单+右键菜单</title><meta http-equiv="content-type" content="text/html; charset=gbk"><script src="http://api.51ditu.com/js/ajax.js"></script><style><!--body{   background-color:#ffdee0;}.skin {    width : 100px;    border : 1px solid gray;    padding : 2px;    background-color: #FFFFFF;    visibility : hidden;    position : absolute;}div.menuitems {    margin : 1px 0;}div.menuitems a {    text-decoration : none;}div.menuitems:hover {    background-color : #c0c0c0;}#navigation {   width:200px;   font-family:Arial;}#navigation > ul {   list-style-type:none;/* 不显示项目符号 */   margin:0px;   padding:0px;}#navigation > ul > li {   border-bottom:1px solid #ED9F9F;/* 添加下划线 */}#navigation > ul > li > a{   display:block;/* 区块显示 */   padding:5px 5px 5px 0.5em;   text-decoration:none;   border-left:12px solid #711515;/* 左边的粗红边 */   border-right:1px solid #711515;/* 右侧阴影 */}#navigation > ul > li > a:link, #navigation > ul > li > a:visited{   background-color:#c11136;   color:#FFFFFF;}#navigation > ul > li > a:hover{ /* 鼠标经过时 */   background-color:#990020;/* 改变背景色 */   color:#ffff00;/* 改变文字颜色 */}/* 子菜单的CSS样式 */#navigation ul li ul{   list-style-type:none;   margin:0px;   padding:0px 0px 0px 0px;}#navigation ul li ul li{   border-top:1px solid #ED9F9F;}#navigation ul li ul li a{   display:block;   padding:3px 3px 3px 0.5em;   text-decoration:none;   border-left:28px solid #a71f1f;   border-right:1px solid #711515;}#navigation ul li ul li a:link, #navigation ul li ul li a:visited{   background-color:#e85070;   color:#FFFFFF;}#navigation ul li ul li a:hover{   background-color:#c2425d;   color:#ffff00;}#navigation ul li ul.myHide{ /* 隐藏子菜单 */   display:none;}#navigation ul li ul.myShow{ /* 显示子菜单 */   display:block;}--></style><script language="javascript">function change(){//通过父元素li，找到兄弟元素ul   var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];   //CSS交替更换来实现显、隐   if(oSecondDiv.className == "myHide")      oSecondDiv.className = "myShow";   else      oSecondDiv.className = "myHide";}function rightKey(obj, child) {        var mdiv = document.createElement('div');    mdiv.className = 'skin';        for(var i = 0; i < child.length; i++) {       var cdiv = document.createElement('div');       cdiv.className = 'menuitems';       var ca = document.createElement('a');       ca.href = child[i].url;       ca.text = child[i].text;       cdiv.appendChild(ca);       mdiv.appendChild(cdiv);    }         obj.appendChild(mdiv);         /*显示菜单*/    function showMenu() {        var evt = window.event || arguments[0];                 /*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/        var rightedge = obj.clientWidth+evt.clientX;        var bottomedge = obj.clientHeight+evt.clientY;         /*如果从鼠标位置到容器右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度*/        if (rightedge < mdiv.offsetWidth)                           mdiv.style.left = obj.scrollLeft + evt.clientX - mdiv.offsetWidth + "px";                    else        /*否则，就定位菜单的左坐标为当前鼠标位置*/            mdiv.style.left = obj.scrollLeft + evt.clientX + "px";                 /*如果从鼠标位置到容器下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度*/        if (bottomedge < mdiv.offsetHeight)            mdiv.style.top = obj.scrollTop + evt.clientY - mdiv.offsetHeight + "px";        else        /*否则，就定位菜单的上坐标为当前鼠标位置*/            mdiv.style.top = obj.scrollTop + evt.clientY + "px";                     /*设置菜单可见*/        mdiv.style.visibility = "visible";                     LTEvent.addListener(mdiv,"mdiv",LTEvent.cancelBubble);    }    /*隐藏菜单*/    function hideMenu() {        mdiv.style.visibility = 'hidden';    }                                  LTEvent.addListener(obj,"contextmenu",LTEvent.cancelBubble);    LTEvent.addListener(obj,"contextmenu",showMenu);    LTEvent.addListener(document,"click",hideMenu);                   }window.onload = function(){   var oUl = document.getElementById("listUL");   var aLi = oUl.childNodes;//子元素   var oA;   for(var i=0;i<aLi.length;i++){      if(aLi[i].tagName == "LI") {         rightKey(aLi[i],[{text:'我真帅',url:'#'},{text:'好牛逼',url:'#'},{text:'太酷了',url:'#'}]);      }   //如果子元素为li，且这个li有子菜单ul      if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){         oA = aLi[i].firstChild;//找到超链接         oA.onclick = change;//动态添加点击函数      }   }}</script></head><body>   <div id="navigation">      <ul id="listUL">         <li><a href="#">Home</a></li>         <li><a href="#">News</a>            <ul class="myHide">               <li><a href="#">Lastest News</a></li>               <li><a href="#">All News</a></li>            </ul>         </li>         <li><a href="#">Sports</a>            <ul class="myHide">               <li><a href="#">Basketball</a></li>               <li><a href="#">Football</a></li>               <li><a href="#">Volleyball</a></li>            </ul>         </li>         <li><a href="#">Weather</a>            <ul class="myHide">               <li><a href="#">Today's Weather</a></li>               <li><a href="#">Forecast</a></li>            </ul>         </li>         <li><a href="#">Contact Me</a></li>      </ul>   </div></body></html>
0 0