zoukankan      html  css  js  c++  java
  • 左侧分类导航菜单

    左侧分类导航菜单

    html结构:

    <div id="showlist" class="showlist" style="display: block; ">
        <ul class="lists">
            <li>                                                       <!-- li 相对定位 多级 -->
                <a class="tit">手机</a>
                <em class="icon-common icon-common-arrowright"></em>   <!-- 绝对定位 icon图标   -->
                <label class="tri" ><i></i></label>                    <!-- 绝对定位 tri三角形  -->
                <div class="show cfl"   style="display:none;">         <!-- 绝对定位 展示列表   -->
                    <div class="lt">
                        <dl>
                            <dt>分类</dt>
                            <dd><a href="#">小米手机</a></dd>
                            <dd><a href="#">三星手机</a></dd>
                            <dd><a href="#">苹果手机</a></dd>
                        </dl>
                        <dl>
                            <dt>热门</dt>
                            <dd><a href="#">小米手机</a></dd>
                            <dd><a href="#">三星手机</a></dd>
                        </dl>
                    </div>
                    <div class="rt">
                        <a href="#">
                            <img alt="" src="./images/baohu.jpg">
                        </a>
                    </div>
                </div>
            </li>
        </ul>
    </div>


    js代码:

    $(function(){
        var showlist = $("#showlist");
        var isok = true;
        showlist.find("li").live("mouseover",function(){
            var jthis = $(this);
            if(isok){
                jthis.addClass("on");
                jthis.find(".tri").show();
                var index = jthis.index();
                if(jthis.index()<=5){
                    var val = index*-41;
                    jthis.find(".show").show().css({"top":val+"px"});
                } else{
                    var val = (index - 5) *-41;
                    jthis.find(".show").show().css({"top":val+"px"});
                }
            }
        });
    
        showlist.find("li").live("mousemove",function(){
            var jthis = $(this);
            if(isok){
                jthis.addClass("on");
                jthis.find(".tri").show();
                var index = jthis.index();
                if(jthis.index()<=5){
                    var val = index*-41;
                    jthis.find(".show").show().css({"top":val+"px"});
                } else{
                    var val = (index - 5) *-41;
                    jthis.find(".show").show().css({"top":val+"px"});
                }
            }
        });
    
        showlist.find("li").live("mouseleave",function(){
            $(this).removeClass("on");
            $(this).find(".tri").hide();
            $(this).find(".show").hide();
            isok = false;
            setTimeout(function(){
                isok = true;
            },100);
        });
    });





  • 相关阅读:
    bzoj1415 NOI2005聪聪和可可
    Tyvj1952 Easy
    poj2096 Collecting Bugs
    COGS 1489玩纸牌
    COGS1487 麻球繁衍
    cf 261B.Maxim and Restaurant
    cf 223B.Two Strings
    cf 609E.Minimum spanning tree for each edge
    cf 187B.AlgoRace
    cf 760B.Frodo and pillows
  • 原文地址:https://www.cnblogs.com/kuikui/p/3222077.html
Copyright © 2011-2022 走看看