jquery仿天貓商城左側導航菜單

      之前看到有博友寫了一個仿天貓商城左側導航菜單，可惜不提供免費下載，也沒有代碼。以前自己也寫過類似的效果，只是都是一小塊一小塊的，現在重新拼湊。我將一步一步的實現拼湊過程，希望對你有所幫助。

Demo在ie8 、 谷歌、 火狐、遨游、ie6 瀏覽器下運行，效果良好！但在ie6下有個bug，就是滾動條可以無限滾動，沒有找到好的解決方案，哪位朋友知道怎么改告訴我一下，謝謝！如果沒有更好的方法我就打算用js來解決！

      好了，可以先下載例子來看看（Demo）。

看看效果圖：

              

一、定位左側整體菜單欄

.slides {
    position: fixed;
    top: 22px;
    z-index: 1;
    width: 200px;
    height: 500px;
    left: 5px;
    background: #fff;
    _position: absolute;
    _top: expression(eval(document.documentElement.scrollTop));
    _margin-top: 22px;
}
<div class="slides"></div>

     為了測試，在.slides里加入background-color:#eee;把body的高度改為1200px，背景色 background: #F6E8CB。這段可以直接復制去測試，你會發現無論的怎么滾動，都是會固定在左邊。

_position（帶 “_” 都是）是為了兼容ie6，只有ie6能識別它。但是ie6會有滾動閃爍的問題，加上*html {background-image: url(about:blank); background-attachment: fixed;}就可以解決了！

二、導航菜單選項

.slides_center {
    width: 200px;
    height: 450px;
    overflow: auto;//內容太多時出現滾動條
}

.slides_ul {
}

.menu {
    padding-left: 34px;
    line-height: 34px;
    height: 34px;
    font-weight: bold;
    cursor: pointer;
    display: block;
}
/* 鼠標點擊顯示效果 */
.first {
    background: url("../img/ICON.gif") no-repeat;
}

.close {
    background-position: 5px -37px;
}

.on {
    background-position: 5px 6px;
}


<div class="slides_center">
        <ul class="slides_ul">
            <li>
                <a class="menu first close">運動戶外</a>

                <div class="selectSlide hide">
                    <span><a href="#">運動鞋</a></span>
                    <span><a href="#">運動服</a></span>
                    <span><a href="#">跑步鞋</a></span>
                    <span><a href="#">板鞋</a></span>
                    <span><a href="#">戶外</a></span>
                </div>
            </li>
            ........
           </ul>
</div>

.slides_center樣式 的overflow:auto是為了讓導航菜單很多的時候出現滾動條。每行的背景圖  可以通過background-position 來做定位。

三、鼠標經過出現右邊的菜單列表

.menu_over {
    background-color: #fff;
    position: absolute;//絕對定位固定在右邊
    min-width: 600px;//設置最小寬度
    _width: 600px;
    min-height: 400px;
    _height: 400px;
    overflow: auto;
    border: 1px solid #DFDFDF;
    box-shadow: 3px 3px 10px #878787;//css3樣式（ie8 以下版本沒效果）
    left: 200px;//定位
    top: 26px;
}
<!-- 右邊菜單 -->
    <div class="menu_over hide"><h3>運動戶外</h3></div>

四、jquery 鼠標點擊，經過等方法

<script type="text/javascript">
    $(function () {
        $('.slides_ul li:odd').css("background-color", "#f1f1f1"); //菜單欄隔行變色
        //jquery 鏈式操作 點擊事件
        $('.menu').click(function () {
            // jQ slideToggle方法 段落滑上或滑下 200是滑動速度,stop():停止當前正在運行的動畫（迅速點擊很多次，只執行一次效果）
            $(this).siblings('.selectSlide').stop().slideToggle(200);
            if($(this).hasclass("close"))
            {
                $(this).removeClass("close").addClass("on");
            }
            else
            {
                $(this).removeClass("on").addClass("close");
            }
        });

        //展開所有 效果
        $('#showall').click(function () {
            $('.selectSlide').stop().slideDown();//jQ slideDown() 段落滑下
            $('.menu').removeClass("close").addClass("on");
            $(this).removeClass("span1").addClass("span1on");
            $('#closeall').removeClass("span2").addClass("span2on");

        });

        //關閉所有 效果
        $('#closeall').click(function () {
            $('.selectSlide').stop().slideUp();
            $('.menu').removeClass("on").addClass("close");
            $(this).removeClass("span2on").addClass("span2");
            $('#showall').removeClass("span1on").addClass("span1");
        });
        $('.slides_ul li').mousemove(function () {
            //鼠標經過某個菜單，右邊顯示對應的列表
 //除了與鼠標經過的菜單所相對應的('.menu_over')這個div顯示，其他的div都隱藏。
 //eq($(this).index())通過索引與鼠標經過的li相對應，siblings('.menu_over')表示除了他自己本身外其他的('.menu_over')都隱藏。
            $('.menu_over').eq($(this).index()).show().siblings('.menu_over').hide();

        });

     //鼠標離開 效果
        $('.slides').mouseleave(function(){
            $('.menu_over').hide();
        });
    });

五、結束

重要的部分都已經貼出來，完整的效果可以下載demo看看。

css代碼很多地方都可以使用全局樣式，比如可以使用slides_ul>li>a (slides_ul li a 會影響后面的樣式) 這種方式來寫樣式，這樣就不需要在每個div 或者 a標簽去定義class了。但是這種方式ie6是不支持的。所以如果你不需要兼容ie6，就改為slides_ul>li>a這種方式。

沒有太多的、復雜的jquery，都是一些平時經常用到的方法，把一個個小的效果整合在一起就慢慢變成一個我們想要的效果了。

這個demo沒有很好的重構，只是把要顯示的效果做出來，有興趣的話可以把它重構成小插件。外觀上需要根據自己的需求去改寬度，高度，定位等。

如果您覺得還不錯，贊一個唄！！

 

 

版權所有，轉載請注明出處，謝謝！