利用jquery实现淘宝电器左侧分类菜单特效



37 145 49



特效描述:利用jquery实现 淘宝电器 左侧分类菜单,利用jquery实现淘宝电器左侧分类菜单特效

代码结构

1. 引入CSS

<link type="text/css" rel="stylesheet" href="css/style.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/3c-menu.js"></script>

3. HTML代码

<div style="width:720px;margin:0px auto;">
	<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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: flash导航菜单 flash导航条 flash导航 flash菜单 flash下拉菜单 flash下拉导航菜单 导航切换 菜单切换 滑动导航菜单 滑动导航 滑动菜单 浮动菜单 浮动导航 滚动导航菜单 滚动菜单 滚动导航 右键菜单 收缩菜单 收缩导航 h5动画导航 h5动画菜单 html5动画导航 html5动画菜单 滑动选项卡 滑动切换 滚动切换 滚动条切换 滑动手风琴 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动星星打分 收缩展开 展开收缩 收缩 展开 导航菜单 导航条 菜单栏 导航栏 分类导航 响应式导航条 响应式导航 其他 鼠标悬停 导航切换 菜单切换 收缩菜单 收缩导航 侧边菜单 侧边导航 导航菜单插件 导航插件 菜单插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到