这种的导航js如何写呢？


这种菜单js如何写呢？求例子

解决方案 »

  1.   

    参考一个类似的
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>自定义提示层(下拉菜单)</title>
    </head><body>
    <script language="javascript">
    <!--
    function getPosition(theElement){
        var positionX =0;
        var positionY =0;
        while (theElement !=null){
            positionX +=theElement.offsetLeft;
            positionY +=theElement.offsetTop;
            theElement =theElement.offsetParent;
        }
        return [positionX,positionY];
    }
    var timer
    function shouDiv(_this,_id){
        clearTimeout(timer);
        var p=getPosition(_this);
        var obj=document.getElementById(_id);
        with(obj.style){
            left=p[0]+"px";
            top=p[1]+18+"px";
            display="block";
        }
        _this.onmouseout=function(){timer=setTimeout(function(){hidDiv(_id);},1000);}
        obj.onmouseover=function(){clearTimeout(timer);}
        obj.onmouseout=function(){timer=setTimeout(function(){hidDiv(_id)},1000);}
        obj.onclick=function(){hidDiv(_id);}
    }function hidDiv(_id){
    var obj=document.getElementById(_id);
    obj.style.display="none";
    }
    //-->
    </script>
    <p>&nbsp;</p>
    自定义提示层(下拉菜单)，在连接处显示菜单,兼容MS IE 和 FF IE
    <p>&nbsp;</p>
    我想实现 将鼠标移到<a href="###" onmousemove="shouDiv(this,'more_inf')">“更多”</a>上 会在光标旁边出现个象列表框一样的界面 里面是会把网站依次排列的，<a href="###" onmousemove="shouDiv(this,'more_inf')">帮助</a> 我不知道这叫什么可能形容的不太准确 希望有人能帮我
    <style type="text/css">
    body {font-size:12px;}
    #more_inf {position:absolute;display:none; width:130px; border:1px solid #eee; padding:2px;padding-top:4px; text-align:left; background:#fff;}
    #more_inf a:visited, #more_inf a {display:block; width:120px; height:20px; margin:2px ;  text-align:left; text-decoration:none; line-height:20px; color:#0000CC;background:#efefef}
    #more_inf a:hover {background:#aaa; color:#fff;}
    </style>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <div id="more_inf">
    <a href="http://forum.csdn.net/SList/ASP//" title="CSDN社区">CSDN社区Web开发ASP</a>
    <a href="#" title="">http://2</a>
    <a href="#" title="">http://3</a>
    <a href="#" title="">http://4</a>
    <a href="#" title="">http://5</a>
    <a href="#" title="">http://6</a>
    <a href="#" title="">http://7</a>
    <a href="#" title="">http://8</a>
    <a href="#" title="">http://9</a>
    </div>
    </body>
    </html>
      

  2.   

    参考一下，很多
    http://www.111cn.net/js_a/76/9b966be28c8a25f784f2e1f8f554bc57.htm
    http://blog.bingo929.com/300-jquery-css-mootools-js-navigation-menus.html
      

  3.   

    参考：http://www.gdjky.com的导航即可
      

  4.   

    类似的很多，但要完全实现楼主给的图的那些细致效果，最方便的还是用FLASH，用DIV+CSS构造比较麻烦。
      

  5.   

    几行代码....样式改改就行了
    <ul>
    <li onmouseover="jsmenu('submenu1',true)" onmouseout="jsmenu('submenu1',false)"><a href="column.php?cid=1">主菜单</a>
    <!-- 子菜单,DIV/UL都行,反正ID=submenu1就行了 -->   
    <ul id="submenu1" style="display:none">
      <li><a href="column.php?cid=1">下级菜单</a></li></ul>
    <!-- 子菜单结束 -->
    </li>
    </ul>
    <script language="javascript">
    function jsmenu(id, op){
    var o = document.getElementById(id);
    o.style.display = op ? "" : "none";
    }
    </script>
      

  6.   

    onmouseout的延时效果，1楼已经给了。
    但圆角和透明的效果，用CSS做不仅麻烦，更重要的是浏览器的兼容问题，IE678都不支持圆角。所以要想做一样的效果，还是用FLASH吧。