跳到主要內容

[JQuery] 如何實現三層垂直主選單

HTML部分:將以下的code放至您想放選單的位置。

<div class="menu">
    <ul>
        <li>
            <a href="#">► Level 1</a>
            <ul class="submenu">
                <li>
                    <a href="#">► Level 1-1</a>
                    <ul class="lastmenu">
                        <li>
                            <a href="#" target="_blank">Level 1-1-1</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">► Level 1-2</a>
                    <ul class="lastmenu">
                        <li>
                            <a href="#" target="_blank">Level 1-2-1</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>



JQuery的部分

<script language="javascript">
    $(function(){
        $(".menu > ul > li > a").click(function(){
            var _this=$(this);
            if(_this.next("ul").length>0){
                if(_this.next().is(":visible")){
                    
                    _this.html(_this.html().replace("▼","►")).next().hide();
                }else{
                    
                    _this.html(_this.html().replace("►","▼")).next().show();
                }
               
                return false;
            }
        });
        
        $(".submenu > li > a").click(function(){
            var _this=$(this);
            if(_this.next("ul").length>0){
                if(_this.next().is(":visible")){
                    
                    _this.html(_this.html().replace("▼","►")).next().hide();
                }else{
                    
                    _this.html(_this.html().replace("►","▼")).next().show();
                }
                
                return false;
            }
        });
        
       
        $("a").focus( function(){
            $(this).blur();
        });
    });
</script>


CSS部分:放置CSS要設定的值

.menu ul li{
    list-style-type: none;
}

.menu a{
    color:#333333; 
    text-decoration:none; 
    font-size:12px;
}

.menu a:hover{
    text-decoration:underline;
}


.menu  .submenu{
    margin-left:5px;
    color:#333333;
    display:none;
    list-style-type: none;
}

.menu  .lastmenu{
    margin-left:10px;
    color:#333333;
    display:none;
    list-style-type: none;
}


 就完成了JQuery實作的三層垂直主選單喔~!! 效果如下:

有問題歡迎留言喔~^O^
祝大家成功~>////<

留言

這個網誌中的熱門文章

[新竹] 系統傢俱各家比較與心得(三商美福、安德康、木可、歐德、綠的)

最近花蠻多時間在比較系統傢俱,與趕著預售屋客變有關,不過也因此了解不少。以往都覺得系統傢俱較死板、無造型、設計。但這次的經驗,讓我對系統傢俱有較不一樣的感覺。

其實,系統傢俱是個蠻能「客製化」的設計,只要自己有做足功課,我認為每家系統傢俱都可以達到客戶喜好的風格、效果,而它們相較於木工親民的價格真的會讓人感動落淚。

我自己的感覺是,大家(如:綠的、三商美福)的系統傢俱在聘請設計師上,較有經驗也較有獨特見解,而且空間規劃較熟練,比較抓得到客戶的喜好與需求,當然價格較高。

小家(如:木可、安德康等)的系統傢俱最大好處在於價格親民,但設計師如果也願意用心,做出來的作品一定不輸大的。前提是,客戶自己必須明白自己要的是甚麼?喜好?需求?風格.......等。

[生活] 幸福新居落成

這次預售屋拖了很久,所以我們匆匆安排裝修,同時也還有一些地方需要修繕,整個忙翻天了!但仍然很滿意這個新家,不管是格局還是大小,打算至少再住個十年!

時程上原先預定於 102年12月可以交屋,拖到103年3月底才勉強交到一個差強人意仍須修繕的屋。匆匆簽了切結,就安排木工入場。木工張先生也是很配合,4月11日就幫我們正式入場,該保護的都做好保護就開始施工。

[生活] 愛惠浦淨水器濾心更換之S100

用了快兩年的愛惠浦淨水器 (Ever Pure),天才的我竟然連第一道都沒換,沒辦法嘛~濾心很貴.....orz

今天逛大潤發,問了價格馬上衝一發,3100元買一送一,一隻1550元還算可以接受。只是以我使用的速度,我猜搬家後還不會換下一隻...不過放著不用保存期限可以放三年...應該還可以吧......?!orz

總之,趁著便宜,撿便宜的心態趨使我買回家自己換濾心,人性啊人性.....順便買了一隻全適用的第一道濾心約 90元。0w0