效果图
index.html
<!DOCTYPE html> <html lang="en"head> Meta charset="UTF-8"title>index</link rel="stylesheet" href="css/style.css"> bodydiv class="container"="mallCategory"> <!-- 一级菜单 --> ="catList"> h2><a href="#">家用电器a></ul ="clearfix"> li ="J_MenuItem"> h3 ="itemtit1"span>大家电 h3p ="itemCol">空调> >LED电视 >冰箱 pli="itemtit2">生活电器/ >个人护理 >空调扇 >挂烫机 >剃须刀 ="itemtit3">厨房电器 >豆浆机>电饭煲>微波炉 ="itemtit4">影音电器 >耳机 >硬盘播放器 >组合音响 uldiv> 遮罩层 ="border"="mask-top"="mask-bottom"> 二级菜单 ="cat-subcategory"="shadow"="entity-main" 左侧二级菜单 --> ="shadow-left"> >LED电视>LCD电视>3D电视>等离子电视>家庭影院>配件>壁挂空调>柜式空调>移动空调>冷暖空调>对开门>双门冰箱>三门冰箱>迷你冰箱>酒柜>冷柜>烟灶套装>油烟机>燃气灶>消毒柜>欧式>中式>侧吸式>滚筒洗衣机>双缸洗衣机>迷你洗衣机>单脱水机 右侧广告 dl ="shadow-right"dtb>大家电品牌 dd>海尔>TCL>海信>创维>格力>方太>西门子>美的>华帝>老板>奥克斯>容声>夏普>索尼>清华同方>pangoo>康佳>长虹>帅康>LG>康宝>德意>乐华>科龙dl> >风扇>空调扇>吊扇>落地扇>转页扇>台扇>挂烫机>电熨斗>蒸汽刷/干汽刷>干鞋器>干衣机>吸尘器>智能扫地机>蒸汽拖把>超声波清洁机>迷你吸尘器>空气净化器>加湿器>抽湿器>活氧/解毒机>对讲机>电话机>子母机>剃须刀>足浴器>电吹风>按摩器材>电动牙刷> 卷/直发器>足疗机>美容仪>冲牙器>鼻毛修剪器>剃/脱毛器>理发器>计步器>体重秤>医疗器械>血压计>血糖仪>温度计>生活电器/个人护理品牌>艾美特>小狗>贝尔莱德>飞利浦>益节>伊莱克斯>亚都>松下>KV8>天骏>科沃斯>泰昌>飞科>博朗>沙宣>朗欣特>露华浓>奔腾>罗氏>欧姆龙>净水器>电热水壶>榨汁机>酸奶机>饮水机>咖啡机>豆芽机>果蔬清洁>面包机>电烤箱>三明治机>电动打蛋器>电炸锅>炙烤炉>电压力锅>电磁炉>微波炉>电饼铛>料理机>电炖锅>煮蛋器>电蒸锅>冰淇淋机>刨冰/碎冰/冰沙机>电热杯>爆米花机>厨房电器品牌>九阳>苏泊尔>东菱>福库>格兰仕>小熊>德龙="ACA"> ACA>组合音箱>HiFi音箱>低音炮>功放>扩音器>麦克风>收音机>收录机>复读机>耳机耳麦>硬盘播放器>移动/便携DVD>影碟机>线材>插座>影音电器品牌>森海塞尔>铁三角>雅马哈>JBL>开博尔>秋叶原>美如画>JVC>硕美科>山水>忆捷>天敏>天龙>德生>雷柏>爱科技>魔声>雷蛇>迪优美特script src='https://libs.baidu.com/jquery/1.10.2/jquery.min.js'script='js/script.js'html>
style.css
@charset "utf-8"; * { margin:0; padding: list-style-type:none } a,img { border:0 } a:link,a:visited { color:#666; font-size:12px; text-decoration: body { font:12px/180% Arial,Helvetica,sans-serif,"新宋体" } .container{ width:720px;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 {0 -45px } .itemtit3 {0 -95px } .itemtit4 {0 -144px } .itemtit5 {0 -192px } .itemtit6 {0 -241px } .itemtit7 {0 -291px } .itemtit8 {0 -339px } .itemtit9 {0 -389px } .itemtit10 {0 -438px } .itemtit11 {0 -486px } .mallCategory { position:relative;185px;3px solid #798fcb;#fff } .mallCategory .border {181px; height:73px;2px solid #476ba3;absolute; top:370px; z-index:14; display: .mallCategory .border .mask-top {39px; border-right:solid 2px #ebf0fe } .mallCategory .border .mask-bottom {34px;solid 2px #fff } .catList h2 {29px; overflow:hidden; background-color:#a5b3da } .catList h2 a {block;3px 0 0 10px;12px } .catList h2 a:link,.catList h2 a:visited {#fff; .catList h2 a:hover,.catList h2 a:active { .catList h3 { padding-left:42px;40px;#ebf0fe } .catList h3 span { float:right;16px 10px 0 0;5px;7px;url(../img/sprite-700.png) no-repeat scroll 0 -621px transparent } .catList h3 a { line-height: font-weight:700 } .catList li {1px; border-color:#fff #fff #e5e5e5 #fff; border-style:solid; border-width:1px 0; border-bottom:1px solid #c3cde7; padding-bottom:3px } .catList .itemCol {7px 0 0 20px;164px;20px; _zoom:1 } .catList p a { margin-right:3px; #margin-right:#666 } .catList p a:hover { .cat-subcategory { left:183px;10;457px; .shadow {relative } .shadow a,.shadow a:hover { .shadow-left {left;inline;232px; min-height:100px; _height:100px } .shadow-left li { margin-top:10px;220px;url(../img/listbg.gif) left bottom no-repeat;24px } .shadow-left li a {inline-block;19px; white-space:nowrap } .shadow-right {12px 0 0 18px;164px } .shadow-right dt {30px } .shadow-right dt b {700;#1d1d1e } .shadow-right a {4px 9px 4px -9px;0 8px;15px; border-left:1px solid #eee;nowrap;15px } .shadow-right dd { .entity-main {0 0 0 39px;100%;url(../img/listbg2.gif) right top repeat-y }
script.js
$(document).ready(function() { $(".J_MenuItem").each((index) { $(this).mouSEOver(() { var catTop,borderTop = $(this).offset().top - 3,viewHeight = $(window).height(),scrollTop = $(document).scrollTop(),relaxHeight = viewHeight - (borderTop - scrollTop); $(".border").css("top").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").show(); $(this).find("span").hide(); }); $(".mallCategory").mouseleave(() { $(".cat-subcategory").hide(); $(".border").hide(); $("span").show(); }); }); });
