21.模拟天猫的侧面菜单
这是我模拟的效果图：图片自己去天猫扣吧
注：需要jQuery
DOM（标注省略的位置复制粘贴一下a标签）
<div class="slide-menu">
<div class="content">
<div class="slide-menu-con">
<!--父级菜单-->
<div class="tab-content">
<div class="con">
<ul class="con-content">
<li data-spm="panel-0">
<div class="">
女装/内衣
</div>
</li>
<li data-spm="panel-1">
<div class="">
男装/运动户外
</div>
</li>
<li data-spm="panel-2">
<div class="">
女鞋/男鞋/箱包
</div>
</li>
<li data-spm="panel-3">
<div class="">
化妆品/个人护理
</div>
</li>
<li data-spm="panel-4">
<div class="">
腕表/个人饰品
</div>
</li>
<li data-spm="panel-5">
<div class="">
手机/数码
</div>
</li>
<li data-spm="panel-6">
<div class="">
母婴/玩具
</div>
</li>
<li data-spm="panel-7">
<div class="">
零食/进口食品
</div>
</li>
<li data-spm="panel-8">
<div class="">
生鲜水果
</div>
</li>
<li data-spm="panel-9">
<div class="">
大家电/生活电器
</div>
</li>
<li data-spm="panel-0">
<div class="">
家居建材
</div>
</li>
<li data-spm="panel-10">
<div class="">
汽车/配件/用品
</div>
</li>
<li data-spm="panel-11">
<div class="">
家纺/家饰
</div>
</li>
<li data-spm="panel-12">
<div class="">
医药保健
</div>
</li>
<li data-spm="panel-13">
<div class="">
厨具/收纳/宠物
</div>
</li>
<li data-spm="panel-14">
<div class="">
图书音像
</div>
</li>
</ul>
</div>
</div>
<div class="tab-sub-content">
<!--子菜单-->
<div class="con-sub">
<div class="panel-0 panel-cus">
<div class="panel-content">
<div class="hot-word-con">
<div class="hot-word-line">
<div class="line-title" style="word-break: keep-all;">
当季流行
</div>
<div class="line-con">
<a href="#">夏季新品</a>
<a href="#">商场同款</a>
<a href="#">气质连衣裙</a>
<a href="#">印花衬衫</a>
<a href="#">牛仔单品</a>
<a href="#">百搭休闲裤</a>
<a href="#">无痕文胸</a>
<a href="#">运动文胸</a>
<a href="#">超柔内裤</a>
<a href="#">百搭船袜</a>
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">夏季新品</a>
<a href="#">商场同款</a>
<a href="#">气质连衣裙</a>
<a href="#">印花衬衫</a>
<a href="#">牛仔单品</a>
<a href="#">百搭休闲裤</a>
<a href="#">无痕文胸</a>
<a href="#">运动文胸</a>
<a href="#">超柔内裤</a>
<a href="#">百搭船袜</a>
<a href="#">夏季新品</a>
<a href="#">商场同款</a>
<a href="#">气质连衣裙</a>
<a href="#">印花衬衫</a>
<a href="#">牛仔单品</a>
<a href="#">百搭休闲裤</a>
<a href="#">无痕文胸</a>
<a href="#">运动文胸</a>
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">印花衬衫</a>
<a href="#">牛仔单品</a>
<a href="#">百搭休闲裤</a>
<a href="#">无痕文胸</a>
<a href="#">运动文胸</a>
<a href="#">超柔内裤</a>
<a href="#">百搭船袜</a>
<a href="#">夏季新品</a>
<a href="#">商场同款</a>
<a href="#">气质连衣裙</a>
<a href="#">印花衬衫</a>
<a href="#">牛仔单品</a>
<a href="#">百搭休闲裤</a>
<a href="#">无痕文胸</a>
<a href="#">运动文胸</a>
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">印花衬衫</a>
<a href="#">牛仔单品</a>
<a href="#">百搭休闲裤</a>
<a href="#">无痕文胸</a>
<a href="#">运动文胸</a>
<a href="#">超柔内裤</a>
<a href="#">百搭船袜</a>
<a href="#">夏季新品</a>
<a href="#">商场同款</a>
<a href="#">气质连衣裙</a>
<a href="#">印花衬衫</a>
<a href="#">牛仔单品</a>
<a href="#">百搭休闲裤</a>
<a href="#">无痕文胸</a>
<a href="#">运动文胸</a>
<a href="#">印花衬衫</a>
<a href="#">牛仔单品</a>
<a href="#">百搭休闲裤</a>
<a href="#">无痕文胸</a>
<a href="#">运动文胸</a>
<a href="#">超柔内裤</a>
<a href="#">百搭船袜</a>
<a href="#">夏季新品</a>
<a href="#">商场同款</a>
<a href="#">气质连衣裙</a>
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">印花衬衫</a>
<a href="#">牛仔单品</a>
<a href="#">百搭休闲裤</a>
<a href="#">无痕文胸</a>
<a href="#">运动文胸</a>
<a href="#">超柔内裤</a>
<a href="#">百搭船袜</a>
<a href="#">夏季新品</a>
<a href="#">商场同款</a>
<a href="#">气质连衣裙</a>
<a href="#">印花衬衫</a>
<a href="#">牛仔单品</a>
</div>
</div>
</div>
<div class="sub-logo">
<div>
<img src="img/logo.gif" width="100px"/>
<img src="img/logo.gif" width="100px"/>
<img src="img/logo.gif" width="100px"/>
<img src="img/logo.gif" width="100px"/>
<img src="img/logo.gif" width="100px"/>
<img src="img/logo.gif" width="100px"/>
<img src="img/logo.gif" width="100px"/>
<img src="img/logo.gif" width="100px"/>
<img src="img/logo.gif" width="100px"/>
<img src="img/logo.gif" width="100px"/>
<img src="img/logo.gif" width="100px"/>
<img src="img/logo.gif" width="100px"/>
<img src="img/logo.gif" width="100px"/>
<img src="img/logo.gif" width="100px"/>
<img src="img/logo.gif" width="100px"/>
<img src="img/logo.gif" width="100px"/>
<img src="img/logo.gif" width="100px"/>
</div>
</div>
</div>
</div>
</div>
<div class="con-sub">
<div class="panel-1 panel-cus">
<div class="panel-content">
<div class="hot-word-con">
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
</div>
<div class="sub-logo">
<div>
<img src="img/logo.gif" width="100px"/>
<!--省略-->
</div>
</div>
</div>
</div>
</div>
<div class="con-sub">
<div class="panel-2 panel-cus">
<div class="panel-content">
<div class="hot-word-con">
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
</div>
<div class="sub-logo">
<div>
<img src="img/logo.gif" width="100px"/>
<!--省略-->
</div>
</div>
</div>
</div>
</div>
<div class="con-sub">
<div class="panel-3 panel-cus">
<div class="panel-content">
<div class="hot-word-con">
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
</div>
<div class="sub-logo">
<div>
<img src="img/logo.gif" width="100px"/>
<!--省略-->
</div>
</div>
</div>
</div>
</div>
<div class="con-sub">
<div class="panel-4 panel-cus">
<div class="panel-content">
<div class="hot-word-con">
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
<a href="#">12345</a>
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
</div>
<div class="sub-logo">
<div>
<img src="img/logo.gif" width="100px"/>
<!--省略-->
</div>
</div>
</div>
</div>
</div>
<div class="con-sub">
<div class="panel-5 panel-cus">
<div class="panel-content">
<div class="hot-word-con">
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
</div>
<div class="sub-logo">
<div>
<img src="img/logo.gif" width="100px"/>
<!--省略-->
</div>
</div>
</div>
</div>
</div>
<div class="con-sub">
<div class="panel-6 panel-cus">
<div class="panel-content">
<div class="hot-word-con">
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
</div>
<div class="sub-logo">
<div>
<img src="img/logo.gif" width="100px"/>
<!--省略-->
</div>
</div>
</div>
</div>
</div>
<div class="con-sub">
<div class="panel-7 panel-cus">
<div class="panel-content">
<div class="hot-word-con">
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
</div>
<div class="sub-logo">
<div>
<img src="img/logo.gif" width="100px"/>
<!--省略-->
</div>
</div>
</div>
</div>
</div>
<div class="con-sub">
<div class="panel-8 panel-cus">
<div class="panel-content">
<div class="hot-word-con">
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
</div>
<div class="sub-logo">
<div>
<img src="img/logo.gif" width="100px"/>
<!--省略-->
</div>
</div>
</div>
</div>
</div>
<div class="con-sub">
<div class="panel-9 panel-cus">
<div class="panel-content">
<div class="hot-word-con">
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
</div>
<div class="sub-logo">
<div>
<img src="img/logo.gif" width="100px"/>
<!--省略-->
</div>
</div>
</div>
</div>
</div>
<div class="con-sub">
<div class="panel-10 panel-cus">
<div class="panel-content">
<div class="hot-word-con">
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
</div>
<div class="sub-logo">
<div>
<img src="img/logo.gif" width="100px"/>
<!--省略-->
</div>
</div>
</div>
</div>
</div>
<div class="con-sub">
<div class="panel-11 panel-cus">
<div class="panel-content">
<div class="hot-word-con">
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
</div>
<div class="sub-logo">
<div>
<img src="img/logo.gif" width="100px"/>
<!--省略-->
</div>
</div>
</div>
</div>
</div>
<div class="con-sub">
<div class="panel-12 panel-cus">
<div class="panel-content">
<div class="hot-word-con">
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
</div>
<div class="sub-logo">
<div>
<img src="img/logo.gif" width="100px"/>
<!--省略-->
</div>
</div>
</div>
</div>
</div>
<div class="con-sub">
<div class="panel-13 panel-cus">
<div class="panel-content">
<div class="hot-word-con">
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
</div>
<div class="sub-logo">
<div>
<img src="img/logo.gif" width="100px"/>
<!--省略-->
</div>
</div>
</div>
</div>
</div>
<div class="con-sub">
<div class="panel-14 panel-cus">
<div class="panel-content">
<div class="hot-word-con">
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
<div class="hot-word-line">
<div class="line-title">
分类1
</div>
<div class="line-con">
<a href="#">12345</a>
<!--省略-->
</div>
</div>
</div>
<div class="sub-logo">
<div>
<img src="img/logo.gif" width="100px"/>
<!--省略-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
/*slide-menu*/ *{ margin: 0; padding: 0; font-size: 12px; font: "Microsoft YaHei",SimSun,'\5b8b\4f53',sans-serif; } body{ max-width: 1198px; margin: 0 auto; margin-top: 10rem; background: #E8E8E8; } .slide-menu{ position: relative; background: #e8e8e8; } .slide-menu-con{ position: relative; /*height: 500px;*/ /*width: 100%;*/ z-index: 999; } .slide-menu-con>.menu-type{ position: absolute; top: -36px; width: 200px; background: #e22127; } .slide-menu-con .logo-1{ position: absolute; top: -167px; width: 290px; margin-left: -45px; text-align: center; } .logo-1 img{ display: block; margin: 1px auto; } .slide-menu-con>.menu-type>.text{ display: inline-block; color: white; height: 36px; font-size: 17px; font-weight: 700; word-spacing: normal; line-height: 36px; padding-left: 3em; } .tab-content>.con{ width: 200px; height: 0; } .selected{ background: #FFFFFF; color: #FF0036!important; font-weight: bold; } .con ul{ width: 200px; height: 500px; background: #EEEEEE; } .con ul li{ height: 31.2px; line-height: 31.2px; position: relative; font-size: 14px; color: #333; list-style: none; cursor: pointer; } .con li>div{ margin-left: 30px; font-size: 13px; } .tab-sub-content{ position: absolute; left: 0; height: 500px; top: 0; } .con-sub{ position: absolute; left: 200px; height: 499px; width: 800px; background: #fff; border: 1px solid #EEEEEE; border-left-width: 0; border-top-width: 0; color: #333; right: 0; } .con-sub>.panel-cus{ display: inline-block; width: 740px; height: 470px; margin: 15px 30px; background: white; } .hot-word-line .line-title{ float: left; width: 60px; color: #333; position: relative; height: 22px; line-height: 22px; font-size: 14px; font-weight: 700; } .hot-word-line .line-con{ float: left; width: 425px; border-bottom: 1px dashed #EEEEEE; margin-bottom: 5px; } .line-con a{ float: left; margin-left: 13px; font-size: 14px; line-height: 22px; height: 22px; color: #666; } .hot-word-con,.hot-word-line{ clear: both; } .hot-word-con{ float: left; } .panel-content{ height: 470px; } .panel-content .sub-logo{ height: 100%; width: 245px; float: left; } .sub-logo{ }
js
let panel = $('.con-sub')
panel.css({
'display':'none'
})
$('.con-content li').mouseover(function(){
let _this = this
let ele = $(_this)
ele.addClass('selected')
ele.siblings().removeClass('selected')
let data = ele.data('spm')
let con = $('.'+data).parents('.con-sub')
con.css({
'display':'block'
})
con.siblings().css({
'display':'none'
})
con.unbind('mouseleave').bind('mouseleave',function(){
con.css({
'display':'none'
})
ele.removeClass('selected')
})
})
$('.slide-menu').unbind('mouseleave').bind('mouseleave',function(){
let $li = $('.con-content li')
let conSub = $('.con-sub')
$li.removeClass('selected')
conSub.css({
'display':'none'
})
})
