Privacy Terms

發布日期
Who We Are At Walk In The Cloud, we are committed to maintaining the trust and confidence of all visitors to our web site. In particular, we want you to know that Walk In The Cloud is not in the business of selling, renting or trading email lists with other companies and businesses for marketing purposes.  In this Privacy Policy, we’ve provided detailed information on when and why we collect personal information, how we use it, the limited conditions under which we may disclose it to others, and how we keep it secure.  We take your privacy seriously and take measures to provide all visitors and users of Walk In The Cloud with a safe and secure environment. Cookies  Walk In The Cloud may set and access Walk In The Cloud cookies on your computer.  Cookies are used to provide our system with the basic information to provide the services you are requesting.  Cookies can be cleared at any time from your internet browser settings.  Google Analytics When someone v...
0

[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^
祝大家成功~>////<

留言

張貼留言