电器类电商网站分类大菜单，配色超舒服~
程序员文章站
2022-03-10 08:37:48
效果图 index.html index
效果图
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="mallcategory">
<!-- 一级菜单 -->
<div class="catlist">
<h2><a href="#">家用电器</a></h2>
<ul class="clearfix">
<li class="j_menuitem">
<h3 class="itemtit1"><span></span><a href="#">大家电 </a></h3>
<p class="itemcol"><a href="#">空调</a> <a href="#">led电视 </a> <a href="#">冰箱 </a></p>
</li>
<li class="j_menuitem">
<h3 class="itemtit2"><span> </span> <a href="#">生活电器/ </a> <a href="#">个人护理 </a></h3>
<p class="itemcol"> <a href="#">空调扇 </a> <a href="#">挂烫机 </a> <a href="#">剃须刀 </a></p>
</li>
<li class="j_menuitem">
<h3 class="itemtit3"><span> </span><a href="#">厨房电器 </a></h3>
<p class="itemcol"><a href="#">豆浆机</a> <a href="#">电饭煲</a> <a href="#">微波炉 </a></p>
</li>
<li class="j_menuitem">
<h3 class="itemtit4"><span></span><a href="#">影音电器 </a></h3>
<p class="itemcol"><a href="#">耳机 </a> <a href="#">硬盘播放器 </a> <a href="#">组合音响 </a></p>
</li>
</ul>
</div>
<!-- 遮罩层 -->
<div class="border">
<ul>
<li class="mask-top"></li>
<li class="mask-bottom"></li>
</ul>
</div>
<!-- 二级菜单 -->
<div class="cat-subcategory">
<div class="shadow">
<div class="entity-main">
<!-- 左侧二级菜单 -->
<ul class="shadow-left">
<li><a href="#">led电视</a> <a href="#">lcd电视</a> <a href="#">3d电视</a> <a href="#">等离子电视</a> <a href="#">家庭影院</a> <a href="#">配件</a></li>
<li><a href="#">壁挂空调</a> <a href="#">柜式空调</a> <a href="#">移动空调</a> <a href="#">冷暖空调</a></li>
<li><a href="#">对开门</a> <a href="#">双门冰箱</a> <a href="#">三门冰箱</a> <a href="#">迷你冰箱</a> <a href="#">酒柜</a> <a href="#">冷柜</a></li>
<li><a href="#">烟灶套装</a> <a href="#">油烟机</a> <a href="#">燃气灶</a> <a href="#">消毒柜</a> <a href="#">欧式</a> <a href="#">中式</a> <a href="#">侧吸式</a></li>
<li><a href="#">滚筒洗衣机</a> <a href="#">双缸洗衣机</a> <a href="#">迷你洗衣机</a> <a href="#">单脱水机</a></li>
</ul>
<!-- 右侧广告 -->
<dl class="shadow-right">
<dt><b>大家电品牌 </b></dt>
<dd><a href="#">海尔</a> <a href="#">tcl</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="#">pangoo</a> <a href="#">康佳</a> <a href="#">长虹</a> <a href="#">帅康</a> <a href="#">lg</a> <a href="#">康宝</a> <a href="#">德意</a> <a href="#">乐华</a> <a href="#">科龙</a>
</dd>
</dl>
</div>
<div class="entity-main">
<ul class="shadow-left">
<li><a href="#">风扇</a> <a href="#">空调扇</a> <a href="#">吊扇</a> <a href="#">落地扇</a> <a href="#">转页扇</a> <a href="#">台扇</a></li>
<li><a href="#">挂烫机</a> <a href="#">电熨斗</a> <a href="#">蒸汽刷/干汽刷</a> <a href="#">干鞋器</a> <a href="#">干衣机</a></li>
<li><a href="#">吸尘器</a> <a href="#">智能扫地机</a> <a href="#">蒸汽拖把</a> <a href="#">超声波清洁机</a> <a href="#">迷你吸尘器</a></li>
<li><a href="#">空气净化器</a> <a href="#">加湿器</a> <a href="#">抽湿器</a> <a href="#">活氧/解毒机</a></li>
<li><a href="#">对讲机</a> <a href="#">电话机</a> <a href="#">子母机</a></li>
<li><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></li>
</ul>
<dl class="shadow-right">
<dt><b>生活电器/个人护理品牌</b></dt>
<dd><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="#">kv8</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>
</dd>
</dl>
</div>
<div class="entity-main">
<ul class="shadow-left">
<li><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></li>
<li><a href="#">面包机</a> <a href="#">电烤箱</a> <a href="#">三明治机</a> <a href="#">电动打蛋器</a> <a href="#">电炸锅</a> <a href="#">炙烤炉</a></li>
<li><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></li>
<li><a href="#">冰淇淋机</a> <a href="#">刨冰/碎冰/冰沙机</a> <a href="#">电热杯</a> <a href="#">爆米花机</a></li>
</ul>
<dl class="shadow-right">
<dt><b>厨房电器品牌</b></dt>
<dd><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 title="aca" href="#"> aca</a>
</dd>
</dl>
</div>
<div class="entity-main">
<ul class="shadow-left">
<li><a href="#">组合音箱</a> <a href="#">hifi音箱</a> <a href="#">低音炮</a> <a href="#">功放</a> <a href="#">扩音器</a> <a href="#">麦克风</a></li>
<li><a href="#">收音机</a> <a href="#">收录机</a> <a href="#">复读机</a></li>
<li><a href="#">耳机耳麦</a> <a href="#">硬盘播放器</a> <a href="#">移动/便携dvd</a> <a href="#">影碟机</a> <a href="#">扩音器</a> <a href="#">麦克风</a></li>
<li><a href="#">线材</a> <a href="#">插座</a></li>
</ul>
<dl class="shadow-right">
<dt><b>影音电器品牌</b></dt>
<dd><a href="#">飞利浦</a> <a href="#">森海塞尔</a> <a href="#">铁三角</a> <a href="#">雅马哈</a> <a href="#">jbl</a> <a href="#">开博尔</a> <a href="#">秋叶原</a> <a href="#">美如画</a> <a href="#">jvc</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>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<script src='https://libs.baidu.com/jquery/1.10.2/jquery.min.js'></script>
<script src='js/script.js'></script>
</body>
</html>
style.css
@charset "utf-8";
* {
margin:0;
padding:0;
list-style-type:none
}
a,img {
border:0
}
a:link,a:visited {
color:#666;
font-size:12px;
text-decoration:none
}
body {
font:12px/180% arial,helvetica,sans-serif,"新宋体"
}
.container{
width:720px;
margin:0px auto;
}
.itemtit1,.itemtit2,.itemtit3,.itemtit4,.itemtit5,.itemtit6,.itemtit7,.itemtit8,.itemtit9,.itemtit10,.itemtit11 {
background:url(../img/sprite-700.png) no-repeat scroll transparent
}
.itemtit1 {
background-position:0 0
}
.itemtit2 {
background-position:0 -45px
}
.itemtit3 {
background-position:0 -95px
}
.itemtit4 {
background-position:0 -144px
}
.itemtit5 {
background-position:0 -192px
}
.itemtit6 {
background-position:0 -241px
}
.itemtit7 {
background-position:0 -291px
}
.itemtit8 {
background-position:0 -339px
}
.itemtit9 {
background-position:0 -389px
}
.itemtit10 {
background-position:0 -438px
}
.itemtit11 {
background-position:0 -486px
}
.mallcategory {
position:relative;
width:185px;
border:3px solid #798fcb;
background:#fff
}
.mallcategory .border {
width:181px;
height:73px;
border:2px solid #476ba3;
position:absolute;
top:370px;
z-index:14;
display:none
}
.mallcategory .border .mask-top {
width:181px;
height:39px;
border-right:solid 2px #ebf0fe
}
.mallcategory .border .mask-bottom {
width:181px;
height:34px;
border-right:solid 2px #fff
}
.catlist h2 {
height:29px;
overflow:hidden;
background-color:#a5b3da
}
.catlist h2 a {
display:block;
padding:3px 0 0 10px;
font-size:12px
}
.catlist h2 a:link,.catlist h2 a:visited {
color:#fff;
text-decoration:none
}
.catlist h2 a:hover,.catlist h2 a:active {
color:#fff;
text-decoration:none
}
.catlist h3 {
padding-left:42px;
height:40px;
background-color:#ebf0fe
}
.catlist h3 span {
float:right;
display:block;
margin:16px 10px 0 0;
width:5px;
height:7px;
background:url(../img/sprite-700.png) no-repeat scroll 0 -621px transparent
}
.catlist h3 a {
overflow:hidden;
height:40px;
font-size:12px;
line-height:40px;
font-weight:700
}
.catlist li {
overflow:hidden;
padding-left:1px;
height:73px;
border-color:#fff #fff #e5e5e5 #fff;
border-style:solid;
border-width:1px 0;
border-bottom:1px solid #c3cde7;
padding-bottom:3px
}
.catlist .itemcol {
overflow:hidden;
padding:7px 0 0 20px;
width:164px;
height:20px;
_zoom:1
}
.catlist p a {
margin-right:3px;
#margin-right:0;
color:#666
}
.catlist p a:hover {
color:#666
}
.cat-subcategory {
position:absolute;
top:29px;
left:183px;
z-index:10;
width:457px;
border:2px solid #476ba3;
background:#fff;
display:none
}
.shadow {
position:relative
}
.shadow a,.shadow a:hover {
color:#666
}
.shadow-left {
float:left;
display:inline;
width:232px;
min-height:100px;
_height:100px
}
.shadow-left li {
float:left;
margin-top:12px;
padding-bottom:10px;
width:220px;
background:url(../img/listbg.gif) left bottom no-repeat;
line-height:24px
}
.shadow-left li a {
display:inline-block;
margin-right:19px;
white-space:nowrap
}
.shadow-right {
float:right;
display:inline;
padding:12px 0 0 18px;
width:164px
}
.shadow-right dt {
background:0;
height:30px
}
.shadow-right dt b {
font-size:12px;
font-weight:700;
color:#1d1d1e
}
.shadow-right a {
float:left;
margin:4px 9px 4px -9px;
padding:0 8px;
height:15px;
border-left:1px solid #eee;
white-space:nowrap;
line-height:15px
}
.shadow-right dd {
overflow:hidden;
width:164px
}
.entity-main {
overflow:hidden;
padding:0 0 0 39px;
height:100%;
background:url(../img/listbg2.gif) right top repeat-y
}
script.js
$(document).ready(function() {
$(".j_menuitem").each(function(index) {
$(this).mouseover(function() {
var cattop, bordertop = $(this).offset().top - 3,
viewheight = $(window).height(),
scrolltop = $(document).scrolltop(),
relaxheight = viewheight - (bordertop - scrolltop);
$(".border").css("top", bordertop).show();
$(".cat-subcategory").show();
$(".shadow div").hide().eq(index).show();
var catheight = $(".cat-subcategory").height();
if (catheight <= relaxheight) {
cattop = bordertop;
} else if (catheight > relaxheight && catheight < viewheight) {
cattop = scrolltop + viewheight - catheight - 10;
} else {
cattop = scrolltop + 5;
}
$(".cat-subcategory").css("top", cattop);
$("span").show();
$(this).find("span").hide();
});
$(".mallcategory").mouseleave(function() {
$(".cat-subcategory").hide();
$(".border").hide();
$("span").show();
});
});
});
原文参考：https://www.cnblogs.com/chenyingying0/p/12851479.html
上一篇： jq使用jsonp实现百度搜索
下一篇： 水平导航-三级导航-切换流畅