JS伸缩的菜单 + 右键菜单

最新推荐文章于 2023-12-26 14:14:48 发布

wt3443

最新推荐文章于 2023-12-26 14:14:48 发布

阅读量301

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/wt3443/article/details/50729940

版权

应朋友需要，要求写一个伸缩菜单，并且要求菜单上可以选择右键菜单，分别搜了一下两者的实例，整合了一下并做适当的修改

实例来源：

伸缩菜单： 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>

wt3443

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS伸缩的菜单 + 右键菜单

应朋友需要，要求写一个伸缩菜单，并且要求菜单上可以选择右键菜单，分别搜了一下两者的实例，整合了一下并做适当的修改实例来源：伸缩菜单： http://www.jb51.net/article/44079.htm右键菜单：http://www.cnblogs.com/snandy/archive/2011/03/09/1977789.html 伸缩的菜单+右键菜单
复制链接

扫一扫