js 漂亮的导航菜单

求一个js 漂亮的导航菜单，就是一般在网页的左侧或者左上侧，来导航右侧的内容

解决方案 »

  1.   

    我的资源中有，也是网上的修改的，是ff版本的，也有ie的，你要就给你，有比较好看的图片，不知道是不是你要的那么漂亮
      

  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>
    <title>仿苹果风格的导航菜单</title>
    <meta http-equiv="content-type" content="text/html;charset=gb2312">
    <!--把下面代码加到<head>与</head>之间-->
    <style type="text/css">
    BODY {
     FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 0.85em
    }
    .kwicks {
     BACKGROUND-IMAGE: url(/html/UploadPic/2010-1/2010161291220.jpg); POSITION: relative; PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; LIST-STYLE-IMAGE: none; PADDING-TOP: 0px
    }
    .kwicks LI {
     BACKGROUND-IMAGE: url(/html/UploadPic/2010-1/2010161292271.jpg); PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; WIDTH: 125px; PADDING-RIGHT: 0px; DISPLAY: block; BACKGROUND-REPEAT: no-repeat; FLOAT: left; HEIGHT: 40px; OVERFLOW: hidden; CURSOR: pointer; MARGIN-RIGHT: 0px; PADDING-TOP: 0px
    }
    .kwicks A {
     TEXT-INDENT: -9999px; OUTLINE-STYLE: none; OUTLINE-COLOR: invert; OUTLINE-WIDTH: medium; DISPLAY: block; HEIGHT: 40px
    }
    #kwick1 {
     BACKGROUND-POSITION: 0px 0px
    }
    #kwick2 {
     BACKGROUND-POSITION: -200px 0px
    }
    #kwick3 {
     BACKGROUND-POSITION: -400px 0px
    }
    #kwick4 {
     BACKGROUND-POSITION: -600px 0px
    }
    .active#kwick1 {
     BACKGROUND-POSITION: 0px bottom
    }
    #kwick1:hover {
     BACKGROUND-POSITION: 0px bottom
    }
    .active#kwick2 {
     BACKGROUND-POSITION: -200px bottom
    }
    #kwick2:hover {
     BACKGROUND-POSITION: -200px bottom
    }
    .active#kwick3 {
     BACKGROUND-POSITION: -400px bottom
    }
    #kwick3:hover {
     BACKGROUND-POSITION: -400px bottom
    }
    .active#kwick4 {
     BACKGROUND-POSITION: -600px bottom
    }
    #kwick4:hover {
     BACKGROUND-POSITION: -600px bottom
    }
    #kwick1 A {
     BACKGROUND-IMAGE: url(/html/UploadPic/2010-1/2010161292950.jpg); BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: left 0px
    }
    #kwick1 A:hover {
     BACKGROUND-POSITION: left -80px
    }
    #kwick4 A {
     BACKGROUND-IMAGE: url(/html/UploadPic/2010-1/2010161292950.jpg); BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: right -40px
    }
    #kwick4 A:hover {
     BACKGROUND-POSITION: right -120px
    }
    </style>
    <script type="text/javascript" src="http://www.zzsky.cn/effect/images/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="http://www.zzsky.cn/effect/images/200912070100/kwicks.js"></script>
    <script type="text/javascript">
    function my_kwicks(){
        $('.kwicks').kwicks({
      duration: 300,   
            max: 200,  
            spacing:  0  
        });
    }  
    $(document).ready(function(){     
     my_kwicks();
    });
    </script>
    </head>
    <body>
    预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以了；当然，在实际使用中，不会出现这样的问题。
    <!--把下面代码加到<body>与</body>之间-->
    <ul class="kwicks">  
      <li id="kwick1"><a href="#">首页</a></li>  
      <li id="kwick2"><a href="#">联系方式</a></li>  
      <li id="kwick3"><a href="#">下载</a></li>  
      <li id="kwick4"><a href="#">搜索</a></li>  
    </ul>  
    <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
    var pageTracker = _gat._getTracker("UA-785212-1");
    pageTracker._trackPageview();
    </script>
    </body>
    </html>