左右式相应弹出菜单栏

在做之前我们首先需要引入bootstrap和jquery

<script src="js/jquery/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/css/bootstrap.min.css" >
<----------------HTML部分----------------->

<div style="position: relative;">
    <div class="productsAsideCategory"  cid="1" style="display: none">
        <div class="row">
            <a href="#nowhere">
                大屏影院
            </a>
            <a href="#nowhere" >
                周末
            </a>
            <a href="#nowhere" >
                新品特惠
            </a>
            <a href="#nowhere">
                32吋电视机
            </a>
            <a href="#nowhere" style="color: rgb(135, 206, 250);">
                智能网络
             </a>
            <div class="seperator"></div>
        </div>
        <div class="row">
            <a href="#nowhere">
                USB高清解
            </a>
            <a href="#nowhere" style="color: rgb(135, 206, 250);">
                芒果TV在线
            </a>
            <a href="#nowhere">
                抢购价
            </a>
            <a href="#nowhere">
                USB解码
            </a>
            <a href="#nowhere">
                32英吋
            </a>
            <a href="#nowhere">
                10核
            </a>
            <a href="#nowhere">
                TCL品牌日
            </a>
            <div class="seperator"></div>
        </div>
        <div class="row ">
            <a href="#nowhere">
                不要赠品
            </a>
            <a href="#nowhere">
                新品上市
            </a>
            <a href="#nowhere">
                4K硬屏
            </a>
            <a href="#nowhere">
                领100元券
            </a>
            <a href="#nowhere" style="color: rgb(135, 206, 250);">
                智能高清
            </a>
            <a href="#nowhere">
                8月，酷暑
            </a>
            <a href="#nowhere" style="color: rgb(135, 206, 250);">
                8月大促
            </a>
            <a href="#nowhere">
                天猫定制
            </a>
            <div class="seperator"></div>
        </div>
        <div class="row  ">
            <a href="#nowhere" style="color: rgb(135, 206, 250);">
                智能操作系统
            </a>
            <a href="#nowhere">
                金色外观
            </a>
            <a href="#nowhere">
                三星屏幕
            </a>
            <a href="#nowhere">
                客厅爆款
            </a>
            <a href="#nowhere">
                八核配置
            </a>
            <a href="#nowhere">
                限时特惠
            </a>
            <div class="seperator"></div>
        </div>
        <div class="row ">
            <a href="#nowhere">
                限时特惠
            </a>
            <a href="#nowhere">
                热销爆款
            </a>
            <a href="#nowhere">
                4K全高清
            </a>
            <a href="#nowhere" style="color: rgb(135, 206, 250);">
                六核智能
            </a>
            <a href="#nowhere">
                14核4K
            </a>
            <a href="#nowhere">
                YUNOS
            </a>
            <a href="#nowhere" style="color: rgb(135, 206, 250);">
                YUNOS
            </a>
            <a href="#nowhere">
                64位处理器
            </a>
            <div class="seperator"></div>
        </div>
        <div class="row ">
            <a href="#nowhere">
                YUNOS
            </a>
            <a href="#nowhere">
                微信电视
            </a>
            <a href="#nowhere">
                4k超清
            </a>
            <a href="#nowhere"style="color: rgb(135, 206, 250);">
                64位真4K
            </a>
            <a href="#nowhere">
                10核机芯
            </a>
            <a href="#nowhere">
                V字黑釉底座
            </a>
            <a href="#nowhere">
                4K超清
            </a>
            <div class="seperator"></div>
        </div>
        <div class="row">
            <a href="#nowhere">
                64位14核
            </a>
            <a href="#nowhere">
                海量影视
            </a>
            <a href="#nowhere">
                人气爆款
            </a>
            <a href="#nowhere">
                限时特惠
            </a>
            <a href="#nowhere">
                真4K屏
            </a>
            <a href="#nowhere">
                65吋巨屏
            </a>
            <a href="#nowhere" style="color: rgb(135, 206, 250);">
                4K超清视界
            </a>
            <a href="#nowhere">
                限时特惠
            </a>
            <div class="seperator"></div>
        </div>
        <div class="row ">
            <a href="#nowhere">
                55寸旗舰
            </a>
            <a href="#nowhere">
                4K机皇
            </a>
            <a href="#nowhere">
                曲面机皇
            </a>
            <a href="#nowhere" style="color: rgb(135, 206, 250);">
                轻薄4K
            </a>
            <div class="seperator"></div>
        </div>
    </div>
</div>
<------------------------CSS部分----------------------------------->

.categoryMenu{
    width: 200px;
    height: 500px;
    background-color: #e2e2e3;
    margin-left: 70px;
    position: absolute;
    z-index: 1;
    top: -500px;
}
.categoryMenu a{
    color: #000;
}
.categoryMenu a:hover{
    color: #2aabd2;
    text-decoration: none;

}
.productsAsideCategory{
    width: 800px;
    height: 500px;
    background-color: #fff;
    margin-left: 270px;
    display: none;
    position:absolute;
    z-index: 1;
    top: -500px;

}
.productsAsideCategory .row{
    margin: 20px 0px 0px  80px;
}
.productsAsideCategory .row .seperator{
    margin-top: 19px;
    border-bottom-style: dashed;
    border-bottom-width: 1px;
    border-bottom-color: #e7e7e7;
}
.productsAsideCategory a{
    color: #999;
    font-size: 14px;
    margin: 8px;
}
.productsAsideCategory a:hover{
    color: #C40000;
    text-decoration: none;
}
.eachCategory{
    line-height: 29px;
    padding-left: 10px;
    font-size: 14px;
}
.eachCategory span{
    margin-right: 10px;

}
.eachCategory:hover{
    background-color: #fff;
}
<--------------------------JS部分--------------------------->

<script>
    /*整体思路
        1.先把所有右侧产品列表隐藏
        2.当鼠标移动到左侧菜单栏上时，右侧产品列表出现
        3.当鼠标移出左侧菜单到右侧产品列表时，右侧产品列表依然存在，直到移出右侧产品列表消失。

     */
    function showProductsAsideCategorys(cid){
        $("div.eachCategory[cid="+cid+"]").css("background-color","white");
        $("div.eachCategory[cid="+cid+"] a").css("color","#87CEFA");
        $("div.productsAsideCategory[cid="+cid+"]").show();
    }

    function hideProductsAsideCategorys(cid){
        $("div.eachCategory[cid="+cid+"]").css("background-color","#e2e2e3");
        $("div.eachCategory[cid="+cid+"] a").css("color","#000");
        $("div.productsAsideCategory[cid="+cid+"]").hide();
    }

    $(function(){
        $("div.eachCategory").mouseenter(function(){
            var cid = $(this).attr("cid");
            showProductsAsideCategorys(cid);
        });
        $("div.eachCategory").mouseleave(function(){
            var cid = $(this).attr("cid");
            hideProductsAsideCategorys(cid);
        });
        $("div.productsAsideCategory").mouseenter(function(){
            var cid = $(this).attr("cid");
            showProductsAsideCategorys(cid);
        });
        $("div.productsAsideCategory").mouseleave(function(){
            var cid = $(this).attr("cid");
            hideProductsAsideCategorys(cid);
        });
    });
</script>

　　

转载于:https://www.cnblogs.com/qinxuhui/p/9943932.html