左侧导航栏_ide左侧导航栏_ico_02
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery.min.js"></script>
        <link href="bootstrap/bootstrap/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"/>
        <script src="bootstrap/bootstrap/js/bootstrap/3.3.6/bootstrap.min.js"></script>
        <script src="bootstrap/bootstrap/js/jquery/2.0.0/jquery.min.js"></script>
        <style>
            .categoryMenu{
                width: 200px;
                background-color: #e2e2e3;
                margin-left: 20px;
                position: absolute;
                top: 0px;
                left: 0px;
                z-index: 1;
            }
            .categoryMenu a{
                color: black;
            }
            .categoryMenu a:hover{
                color: lightblue;
                text-decoration: none;
            }
            .productAsideCategory{
                width: 800px;
                height: 510px;
                margin-left: 220px;
                background-color: white;
                position: absolute;
                top: 0;
                left: 0px;
                z-index: 1;
            }
            div.productAsideCategory div.row{
                margin: 20px 80px 0px 80px;
            }
            div.seperator{
                margin-top: 20px;
                border-bottom-style: dashed;
                border-bottom-width: 1px;
                border-bottom-color: #e7e7e7;
            }
            div.productAsideCategory a{
                color: #999;
                font-size: 14px;
                margin: 8px;
            }
            div.productAsideCategory a:hover{
                color: #C40000;
                text-decoration: none;
            }
            div.eachCategory{
                padding-left: 10px;
                line-height: 30px;
                font-size: 14px;
            }
            
            div.eachCategory span{
                margin-right: 10px;
            }
            div.eachCategory:hover{
                background-color: white;
            }
        </style>
    </head>
    <body>
        <script>
            function showProductAsideCategorys(cid){
                $("div.eachCategory[cid="+cid+"]").css("background-color","white");
                $("div.eachCategory[cid="+cid+"]").css("color","#87CEFA");
                $("div.productAsideCategory[cid="+cid+"]").show();
            }
            
            function hideProductAsideCategorys(cid){
                $("div.eachCategory[cid="+cid+"]").css("background-color","#E2E2E3");
                $("div.eachCategory[cid="+cid+"]").css("color","#000");
                $("div.productAsideCategory[cid="+cid+"]").hide();
            }
            
            $(function(){
                $("div.eachCategory").mouseenter(function(){
                    var cid=$(this).attr("cid");
                    showProductAsideCategorys(cid);
                })
                 
                 $("div.eachCategory").mouseleave(function(){
                     var cid=$(this).attr("cid");
                     hideProductAsideCategorys(cid);
                 })
                 
                 $("div.productAsideCategory").mouseenter(function(){
                     var cid=$(this).attr("cid");
                     showProductAsideCategorys(cid);
                 })
                 
                 $("div.productAsideCategory").mouseleave(function(){
                     var cid=$(this).attr("cid");
                     hideProductAsideCategorys(cid);
                 })
            })
        </script>
        
        
        <div style="position: relative;"></div>
        <div class="categoryWithCarousel">
            <div class="categoryMenu">
                
            <div class="eachCategory" cid="83">
                <span class="glyphicon glyphicon-link" ></span>
                <a href="#">平板电视</a>
            </div>
            <div class="eachCategory" cid="82" >
                <span class="glyphicon glyphicon-link" ></span>
                <a href="#">马桶</a>
            </div>
            <div class="eachCategory" cid="81">
                <span class="glyphicon glyphicon-link" ></span>
                <a href="#">沙发</a>
            </div><div class="eachCategory" cid="80">
                <span class="glyphicon glyphicon-link" ></span>
                <a href="#">电热水器</a>
            </div>
            
            <div class="eachCategory" cid="79">
                <span class="glyphicon glyphicon-link" ></span>
                <a href="#">平衡车</a>
            </div>
            <div class="eachCategory" cid="78">
                <span class="glyphicon glyphicon-link" ></span>
                <a href="#">扫地机器人</a>
            </div>
            <div class="eachCategory" cid="77">
                <span class="glyphicon glyphicon-link" ></span>
                <a href="#">原汁机</a>
            </div>
            <div class="eachCategory" cid="76">
                <span class="glyphicon glyphicon-link" ></span>
                <a href="#">冰箱</a>
            </div>
            <div class="eachCategory" cid="75">
                <span class="glyphicon glyphicon-link" ></span>
                <a href="#">空调</a>
            </div>
            <div class="eachCategory" cid="74">
                <span class="glyphicon glyphicon-link" ></span>
                <a href="#">女表</a>
            </div>
            <div class="eachCategory" cid="73">
                <span class="glyphicon glyphicon-link" ></span>
                <a href="#">男表</a>
            </div>
            <div class="eachCategory" cid="72">
                <span class="glyphicon glyphicon-link" ></span>
                <a href="#">男士手拿包</a>
            </div>
            <div class="eachCategory" cid="71">
                <span class="glyphicon glyphicon-link" ></span>
                <a href="#">男士西服</a>
            </div>
            <div class="eachCategory" cid="70">
                <span class="glyphicon glyphicon-link" ></span>
                <a href="#">时尚男鞋</a>
            </div>
            <div class="eachCategory" cid="69">
                <span class="glyphicon glyphicon-link" ></span>
                <a href="#">品牌女装</a>
            </div>
            <div class="eachCategory" cid="68">
                <span class="glyphicon glyphicon-link" ></span>
                <a href="#">太阳镜</a>
            </div>
            <div class="eachCategory" cid="67">
                <span class="glyphicon glyphicon-link" ></span>
                <a href="#">安全座椅</a>
            </div>
        </div>
        
        <div class="productAsideCategory" cid="83" style="display: none;">
            <div class="row show1">
                <a href="#">屏大影院</a>
                    <a href="#">周末</a>
                    <a href="#" style="color: lightblue;">新品特惠</a>
                    <a href="#">32吋电视机</a>
                    <a href="#" style="color: lightblue;">智能网络</a>
                    <div class="seperator"></div>
            </div>
            
            <div class="row show1">
                <a href="#">USB高清解</a>
                <a href="#">芒果TV在线</a>
                <a href="#" style="color: lightblue;">抢购价</a>
                <a href="#">USB解码</a>
                <a href="#">32英寸</a>
                <a href="#">10核</a>
                <a href="#">TCL品牌日</a>
                <div class="seperator"></div>
            </div>
            
            <div class="row show1">
                <a href="#">不要赠品</a>
                <a href="#">新品上市</a>
                <a href="#"style="color: lightblue;">4K硬屏</a>
                <a href="#">领100元券</a>
                <a href="#">智能高清</a>
                <a href="#"style="color: lightblue;">8月,酷暑</a>
                <a href="#">8月大促</a>
                <a href="#">天猫定制</a>
                <div class="seperator"></div>
            </div>
            
            <div class="row show1">
                <a href="#">智能操作系统</a>
                <a href="#">金色外观</a>
                <a href="#"style="color: lightblue;">三星屏幕</a>
                <a href="#">客厅爆款</a>
                <a href="#">八核配置</a>
                <a href="#">限时特惠</a>
                <div class="seperator"></div>
            </div>
            
            <div class="row show1">
                <a href="#">限时特惠</a>
                <a href="#">热销爆款</a>
                <a href="#">4K全高清</a>
                <a href="#"style="color: lightblue;">六核智能</a>
                <a href="#">14核4K</a>
                <a href="#">YUNOS</a>
                <a href="#">YUNOS</a>
                <a href="#">64位处理器</a>
                <div class="seperator"></div>
            </div>
            
            <div class="row show1">
                <a href="#">YUNOS</a>
                <a href="#"style="color: lightblue;">微信电视</a>
                <a href="#">4K超清</a>
                <a href="#"style="color: lightblue;">64位真4K</a>
                <a href="#">10核机芯</a>
                <a href="#">V字黑釉底座</a>
                <a href="#">4K超清</a>
                <div class="seperator"></div>
            </div>
            
            <div class="row show1">
                <a href="#">64位14核</a>
                <a href="#">海量影视</a>
                <a href="#">人气爆款</a>
                <a href="#">限时特惠</a>
                <a href="#"style="color: lightblue;">真4K屏</a>
                <a href="#"style="color: lightblue;">65吋巨屏</a>
                <a href="#">4K超清视界</a>
                <a href="#">限时特惠</a>
                <div class="seperator"></div>
            </div>
            
            <div class="row show1">
                <a href="#">55吋旗舰</a>
                <a href="#" style="color: royalblue">4K机皇</a>
                <a href="#">曲面机皇</a>
                <a href="#">轻薄4K</a>
                <div class="seperator"></div>
            </div>
        </div>
        
        
        <div class="productAsideCategory" cid="82" style="display: block;">
            <div class="row show1">
                <a href="#">fg</a>
                    <a href="#">gre</a>
                    <a href="#" style="color: lightblue;">新品特惠</a>
                    <a href="#">32吋电视机</a>
                    <a href="#" style="color: lightblue;">智能网络</a>
                    <div class="seperator"></div>
            </div>
            
            <div class="row show1">
                <a href="#">USB高清解</a>
                <a href="#">芒果TV在线</a>
                <a href="#" style="color: lightblue;">抢购价</a>
                <a href="#">USB解码</a>
                <a href="#">32英寸</a>
                <a href="#">10核</a>
                <a href="#">TCL品牌日</a>
                <div class="seperator"></div>
            </div>
            
            <div class="row show1">
                <a href="#">不要赠品</a>
                <a href="#">新品上市</a>
                <a href="#"style="color: lightblue;">4K硬屏</a>
                <a href="#">领100元券</a>
                <a href="#">智能高清</a>
                <a href="#"style="color: lightblue;">8月,酷暑</a>
                <a href="#">8月大促</a>
                <a href="#">天猫定制</a>
                <div class="seperator"></div>
            </div>
            
            <div class="row show1">
                <a href="#">智能操作系统</a>
                <a href="#">金色外观</a>
                <a href="#"style="color: lightblue;">三星屏幕</a>
                <a href="#">客厅爆款</a>
                <a href="#">八核配置</a>
                <a href="#">限时特惠</a>
                <div class="seperator"></div>
            </div>
            
            <div class="row show1">
                <a href="#">限时特惠</a>
                <a href="#">热销爆款</a>
                <a href="#">4K全高清</a>
                <a href="#"style="color: lightblue;">六核智能</a>
                <a href="#">14核4K</a>
                <a href="#">YUNOS</a>
                <a href="#">YUNOS</a>
                <a href="#">64位处理器</a>
                <div class="seperator"></div>
            </div>
            
            <div class="row show1">
                <a href="#">YUNOS</a>
                <a href="#"style="color: lightblue;">微信电视</a>
                <a href="#">4K超清</a>
                <a href="#"style="color: lightblue;">64位真4K</a>
                <a href="#">10核机芯</a>
                <a href="#">V字黑釉底座</a>
                <a href="#">4K超清</a>
                <div class="seperator"></div>
            </div>
            
            <div class="row show1">
                <a href="#">64位14核</a>
                <a href="#">海量影视</a>
                <a href="#">人气爆款</a>
                <a href="#">限时特惠</a>
                <a href="#"style="color: lightblue;">真4K屏</a>
                <a href="#"style="color: lightblue;">65吋巨屏</a>
                <a href="#">4K超清视界</a>
                <a href="#">限时特惠</a>
                <div class="seperator"></div>
            </div>
            
            <div class="row show1">
                <a href="#">55吋旗舰</a>
                <a href="#" style="color: royalblue">4K机皇</a>
                <a href="#">曲面机皇</a>
                <a href="#">轻薄4K</a>
                <div class="seperator"></div>
            </div>
        </div>
        
        </div>
        </div>
        
        
    </body>
</html>
View Code

效果图如下:

左侧导航栏_bootstrap_03

 

左侧导航栏_bootstrap_04