请教一个滑动菜单获取菜单值的问题

最近在做网站，网上找了个滑动菜单代码，css+js实现的：http://www.codefans.net/jscss/code/880.shtml
现在碰到个比较大的问题，现在鼠标一移走菜单就自动缩回了，最好在鼠标点击后伸出的菜单自动停顿，然后自动获取当前位置的菜单值，包括之前几层菜单的值。不知道该怎么实现啊？或者有其它能实现类似功能的js代码也行啊，谢谢了！

解决方案 »

  1.   

    代码如下，没人知道吗，好像是有点难度网上找到的所有滑动菜单样子倒是挺好看的，但都没有看到能取值的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>CSS滑动菜单</title> 
    <style type="text/css"> 
    body { 
    margin: 0; 
    padding: 30px; 
    background: #FFF; 
    color: #555; 
    } 
    h1 { 
    font: bold 16px Arial, Helvetica, sans-serif; 
    } 
    p { 
    font: 11px Arial, Helvetica, sans-serif; 
    } 
    a { 
    color: #900; 
    text-decoration: none; 
    } 
    a:hover { 
    background: #900; 
    color: #FFF; 
    } ul#navmenu, 
    ul#navmenu li, 
    ul#navmenu ul { 
    margin: 0; 
    border: 0 none; 
    padding: 0; 
    width: 160px; /*For KHTML*/ 
    list-style: none; 
    } 
    ul#navmenu li { 
    display: block !important;
    display: inline;
    position: relative; 
    } ul#navmenu a { 
    border: 1px solid #FFF; 
    border-right-color: #CCC; 
    border-bottom-color: #CCC; 
    padding: 0 6px; 
    display: block; 
    background: #EEE; 
    color: #666; 
    font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; 
    text-decoration: none; 
    height: auto !important; 
    height: 1%; /*For IE*/ 
    } ul#navmenu a:hover, 
    ul#navmenu li:hover a, 
    ul#navmenu li.iehover a { 
    background: #CCC; 
    color: #FFF; 
    } ul#navmenu li:hover li a, 
    ul#navmenu li.iehover li a { 
    background: #EEE; 
    color: #666; 
    } ul#navmenu li:hover li a:hover, 
    ul#navmenu li:hover li:hover a, 
    ul#navmenu li.iehover li a:hover, 
    ul#navmenu li.iehover li.iehover a { 
    background: #CCC; 
    color: #FFF; 
    } ul#navmenu li:hover li:hover li a, 
    ul#navmenu li.iehover li.iehover li a { 
    background: #EEE; 
    color: #666; 
    } 
    /* 3rd Menu Hover Persistence */ 
    ul#navmenu li:hover li:hover li a:hover, 
    ul#navmenu li:hover li:hover li:hover a, 
    ul#navmenu li.iehover li.iehover li a:hover, 
    ul#navmenu li.iehover li.iehover li.iehover a { 
    background: #CCC; 
    color: #FFF; 
    } ul#navmenu li:hover li:hover li:hover li a, 
    ul#navmenu li.iehover li.iehover li.iehover li a { 
    background: #EEE; 
    color: #666; 
    } 
     
    ul#navmenu li:hover li:hover li:hover li a:hover, 
    ul#navmenu li.iehover li.iehover li.iehover li a:hover { 
    background: #CCC; 
    color: #FFF; 
    } 
    ul#navmenu ul, 
    ul#navmenu ul ul, 
    ul#navmenu ul ul ul { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 160px; 
    } ul#navmenu li:hover ul ul, 
    ul#navmenu li:hover ul ul ul, 
    ul#navmenu li.iehover ul ul, 
    ul#navmenu li.iehover ul ul ul { 
    display: none; 
    } 
    ul#navmenu li:hover ul, 
    ul#navmenu ul li:hover ul, 
    ul#navmenu ul ul li:hover ul, 
    ul#navmenu li.iehover ul, 
    ul#navmenu ul li.iehover ul, 
    ul#navmenu ul ul li.iehover ul { 
    display: block; 
    } 
    </style> 
    <script type="text/javascript"> 
    <!-- 
    navHover = function() { 
    var lis = document.getElementById("navmenu").getElementsByTagName("LI"); 
    for (var i=0; i<lis.length; i++) { 
    lis[i].onmouseover=function() { 
    this.className+=" iehover"; 
    } 
    lis[i].onmouseout=function() { 
    this.className=this.className.replace(new RegExp(" iehover\\b"), ""); 
    } 
    } 
    } 
    if (window.attachEvent) window.attachEvent("onload", navHover); 
    --> 
    </script> 
    </head> 
    <body> 
    <h1>CSS Menu - Vertical</h1> 
    <hr /> 
    <ul id="navmenu"> 
    <li><a href="/">My Blog</a></li> 
    <li><a href="#">Work +</a> 
    <ul> 
    <li><a href="#">Websites +</a> 
    <ul> 
    <li><a href="#">jQuery</a></li> 
    <li><a href="#">ajax</a></li> 
    <li><a href="#">extjs</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Links</a></li> 
    <li><a href="#">Contact</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Learn +</a> 
    <ul> 
    <li><a href="#">CSS +</a> 
    <ul> 
    <li><a href="#">Html</a></li> 
    <li><a href="#">spriteNav</a></li> 
    </ul> 
    </li> 
    </ul> 
    </li> 
    <li><a href="#">Messages</a></li> 
    </ul> 
    </body> 
    </html>
      

  2.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>CSS 滑动菜单</title> 
    <style type="text/css"> 
    body { 
    margin: 0; 
    padding: 30px; 
    background: #FFF; 
    color: #555; 
    } 
    h1 { 
    font: bold 16px Arial, Helvetica, sans-serif; 
    } 
    p { 
    font: 11px Arial, Helvetica, sans-serif; 
    } 
    a { 
    color: #900; 
    text-decoration: none; 
    } 
    a:hover { 
    background: #900; 
    color: #FFF; 
    } ul#navmenu, 
    ul#navmenu li, 
    ul#navmenu ul { 
    margin: 0; 
    border: 0 none; 
    padding: 0; 
    width: 160px; /*For KHTML*/ 
    list-style: none; 
    } 
    ul#navmenu li { 
    display: block !important;
    display: inline;
    position: relative; 
    } ul#navmenu a { 
    border: 1px solid #FFF; 
    border-right-color: #CCC; 
    border-bottom-color: #CCC; 
    padding: 0 6px; 
    display: block; 
    background: #EEE; 
    color: #666; 
    font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; 
    text-decoration: none; 
    height: auto !important; 
    height: 1%; /*For IE*/ 
    } ul#navmenu a:hover, 
    ul#navmenu li:hover a, 
    ul#navmenu li.iehover a { 
    background: #CCC; 
    color: #FFF; 
    } ul#navmenu li:hover li a, 
    ul#navmenu li.iehover li a { 
    background: #EEE; 
    color: #666; 
    } ul#navmenu li:hover li a:hover, 
    ul#navmenu li:hover li:hover a, 
    ul#navmenu li.iehover li a:hover, 
    ul#navmenu li.iehover li.iehover a { 
    background: #CCC; 
    color: #FFF; 
    } ul#navmenu li:hover li:hover li a, 
    ul#navmenu li.iehover li.iehover li a { 
    background: #EEE; 
    color: #666; 
    } 
    /* 3rd Menu Hover Persistence */ 
    ul#navmenu li:hover li:hover li a:hover, 
    ul#navmenu li:hover li:hover li:hover a, 
    ul#navmenu li.iehover li.iehover li a:hover, 
    ul#navmenu li.iehover li.iehover li.iehover a { 
    background: #CCC; 
    color: #FFF; 
    } ul#navmenu li:hover li:hover li:hover li a, 
    ul#navmenu li.iehover li.iehover li.iehover li a { 
    background: #EEE; 
    color: #666; 
    } 
     
    ul#navmenu li:hover li:hover li:hover li a:hover, 
    ul#navmenu li.iehover li.iehover li.iehover li a:hover { 
    background: #CCC; 
    color: #FFF; 
    } 
    ul#navmenu ul, 
    ul#navmenu ul ul, 
    ul#navmenu ul ul ul { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 160px; 
    } ul#navmenu li:hover ul ul, 
    ul#navmenu li:hover ul ul ul, 
    ul#navmenu li.iehover ul ul, 
    ul#navmenu li.iehover ul ul ul { 
    display: none; 
    } 
    ul#navmenu li:hover ul, 
    ul#navmenu ul li:hover ul, 
    ul#navmenu ul ul li:hover ul, 
    ul#navmenu li.iehover ul, 
    ul#navmenu ul li.iehover ul, 
    ul#navmenu ul ul li.iehover ul { 
    display: block; 
    } 
    </style> 
    <script type="text/javascript"> 
    <!-- 
    var str = "",clickMark=false;
    navHover = function() { 
    var lis = document.getElementById("navmenu").getElementsByTagName("LI"); 
    for (var i=0; i<lis.length; i++) { 
    lis[i].onmouseover=function() { 
    this.className+=" iehover"; 
    } 
    lis[i].onclick=function() { 
    clickMark = true;
    window.event.cancelBubble = true;
    str = getParentNodeValue(this).join(",");
    }
    lis[i].onmouseout=function() { 
    if(!clickMark){
    this.className=this.className.replace(new RegExp(" iehover\\b"), ""); 
      }else{
       this.className=this.className.replace(new RegExp(" iehover\\b"), "") + " iehover"; 
       clickMark = false;
      }
    } 
    } 
    } 
    if (window.attachEvent) window.attachEvent("onload", navHover); function getParentNodeValue(node){
    var menuValue=[];
    while(node.id != "navmenu"){
    if(node.tagName == "LI"){
    menuValue.push(node.firstChild.innerText); //FF 用innerContent
    }
    node = node.parentNode;
    }
    return menuValue;
    }function show(){
    alert(str);
    }
    --> 
    </script> 
    </head> 
    <body> 
    <h1>CSS Menu - Vertical</h1> 
    <hr /> 
    <ul id="navmenu"> 
    <li><a href="/">My Blog</a></li> 
    <li><a href="#">Work +</a> 
    <ul> 
    <li><a href="#">Websites +</a> 
    <ul> 
    <li><a href="#">jQuery</a></li> 
    <li><a href="#">ajax</a></li> 
    <li><a href="#">extjs</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Links</a></li> 
    <li><a href="#">Contact</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Learn +</a> 
    <ul> 
    <li><a href="#">CSS +</a> 
    <ul> 
    <li><a href="#">Html</a></li> 
    <li><a href="#">spriteNav</a></li> 
    </ul> 
    </li> 
    </ul> 
    </li> 
    <li><a href="#">Messages</a></li> 
    </ul> 
    <input type="button" onclick="show();" value="click" />
    </body> 
    </html>不知道是不是你要的效果，感觉很别扭，你点击后面的li时，显示这个li，那我点击其他的li项时岂不是会被先前显示的菜单覆盖，可能是你css布局不到位吧，仅供参考