一款基于jQuery左侧产品分类二级菜单导航
阅读：4198
时间：2018-02-01 03:25
今天要为大家分享一款基于jQuery左侧产品分类二级菜单导航。这款二级导航菜单非常适合的电商网站。或导航比较多的网站。效果非常不错。一起看下效果图：
实现的代码。
html代码：
<div class="header">
<div class="topM sline clearfix">
<div class="searchBar">
<div class="searchVInput">
<form action="http://www.w2bc.com/" method="post" name="fo" id="fo" target="_blank">
<a href="javascript:document.getElementById('fo').submit()">搜索</a>
<div>
<input type="text" id="cardname" name="cardname" autocomplete="off" /></div>
</form>
</div>
<!-- searchVInput end -->
<input name="producttype" id="producttype" value="0" type="hidden" />
</div>
<!-- searchBar end -->
</div>
<!-- sline end -->
<div class="navigationBar">
<div class="navigationBarInnel">
<tt title="所有产品分类"></tt>
<div class="mainMenuV">
<a href="http://www.w2bc.com/">首页</a> <a href="http://www.w2bc.com/" target="_blank">
网游交易区</a> <a href="http://www.w2bc.com/" target="_blank">积分商城</a> <a href="http://www.w2bc.com/?"
target="_blank">免费游戏</a>
</div>
<!-- mainMenuV end -->
</div>
<!-- mainMenudl end -->
</div>
<!-- navigationBar end -->
</div>
<!-- header end -->
<div class="of_whole">
<!--tp通栏广告-->
<!--tp通栏广告-->
<!--主体内容区开始-->
<div id="of_mainBody" class="push_t">
<!--左侧栏开始-->
<script>
$(document).ready(function () {
var OLeft = $(".searchBar").offset().left;
var Otop = $(".searchBar").offset().top + $(".searchBar").height() - 3;
$("#KsmanDisp").css({ left: OLeft, top: Otop }); //搜索联想的DIV被幻灯片图片盖住。
$("#cardname").addClass("cardnameV");
$("#cardname").focus(function () {
if ($(this).val() != "") {
$(this).removeClass("cardnameV");
} else {
$(this).addClass("cardnameV");
}
})
$("#cardname").keyup(function () {
$(this).removeClass("cardnameV");
})
$("#cardname").blur(function () {
if ($(this).val() != "") {
$(this).removeClass("cardnameV");
} else {
$(this).addClass("cardnameV");
}
})
$(".mainProNav dl dt").mouseover(function () {
$(".mainProNav dl").removeClass("dlHover");
$(this).parent().addClass("dlHover");
})
$(".mainProNav").hover(function () {
$(this).addClass("mainProNavHover");
}, function () {
$(this).removeClass("mainProNavHover");
$(".mainProNav dl").removeClass("dlHover");
})
});
</script>
<div class="side_small tag_line float_l">
<div class="mainProNav">
<dl class="navM1">
<dd>
<h6>
<a href="http://www.w2bc.com/">聚合分享</a></h6>
<p>
<a href="http://www.w2bc.com/">91游戏</a><a href="http://www.w2bc.com/">梦幻国度</a><a
href="http://www.w2bc.com/">Q币随意直充</a><a href="http://www.w2bc.com/">魔兽世界</a><a href="http://www.w2bc.com/"
class="more">查看更多...</a></p>
<h6>
<a href="http://www.w2bc.com/">游戏卡密</a></h6>
<p>
<a href="http://www.w2bc.com/">骏网一卡通</a><a href="http://www.w2bc.com/">完美一卡通</a><a
href="http://www.w2bc.com/">聚合素材</a><a href="http://www.w2bc.com/">巨人一卡通</a><a href="http://www.w2bc.com/"
class="more">查看更多...</a></p>
<h5>
上面没找到，别漏了这些哦。</h5>
<ul>
<li><a href="http://www.w2bc.com/">网页游戏充值</a></li>
<li><a href="http://www.w2bc.com/">外服网游点卡</a></li>
<li><a href="http://www.w2bc.com/">游戏辅助卡</a></li>
<li><a href="http://www.w2bc.com/">棋牌休闲游戏</a></li>
<li><a href="http://www.w2bc.com/">游戏相关实物</a></li>
<li><a href="http://www.w2bc.com/">手机游戏</a></li>
</ul>
</dd>
<dt>游戏充值类</dt>
</dl>
<dl class="navM2">
<dd>
<h2>
<a href="http://www.w2bc.com/">手机充值(直充)</a></h2>
<h6>
<a href="http://www.juheweb.com">话费充值卡</a></h6>
<p>
<a href="http://www.w2bc.com/">全国移动话费100元卡密</a><a href="http://www.w2bc.com/">全国联通话费100元卡密</a><a
href="http://www.w2bc.com/" class="more">查看更多...</a></p>
<ul class="hide">
<li><a href="http://www.w2bc.com/">IP电话卡</a></li>
</ul>
</dd>
<dt>话费充值类</dt>
</dl>
<dl class="navM3">
<dd>
<ul>
<li><a href="http://www.w2bc.com/">网络及休闲</a></li>
<li><a href="http://www.w2bc.com/">学习教育</a></li>
<li><a href="http://www.w2bc.com/">娱乐影视</a></li>
<li><a href="http://www.w2bc.com/">网络加速器</a></li>
<li><a href="http://www.w2bc.com/">网上保险</a></li>
<li><a href="http://www.w2bc.com/">电子杂志</a></li>
<li><a href="http://www.w2bc.com/">生活服务类</a></li>
</ul>
</dd>
<dt>互联网充值类</dt>
</dl>
<dl class="navM4">
<dd>
<h2>
<a href="http://www.w2bc.com/">银行转帐</a>
</h2>
<ul class="hide">
<li><a href="http://www.w2bc.com/">信用卡还款</a></li>
<li><a href="http://www.w2bc.com/">欧飞游戏一卡通</a></li>
<li><a href="http://www.w2bc.com/">欧飞话费一卡通</a></li>
</ul>
<h6>
<a href="http://www.w2bc.com/?cp63.html">支付帐号充值</a></h6>
<p>
<a href="http://www.w2bc.com/?630101.htm">支付宝账号充值</a><a href="http://www.w2bc.com/?6303.html">支付宝卡</a><a
href="http://www.w2bc.com/?6304.html">支付宝实物卡</a><a href="http://www.w2bc.com/?cp63.html"
class="more">查看详情...</a></p>
<h6>
<a href="http://www.w2bc.com/?6401.html">江苏电费充值缴费卡</a></h6>
<p>
<a href="http://www.w2bc.com/?640103.htm">50元</a><a href="http://www.w2bc.com/?640101.htm">100元</a><a
href="http://www.w2bc.com/?640102.htm">200元</a><a href="http://www.w2bc.com/?6401.html"
class="more">查看其他面值...</a></p>
<h6>
<a href="http://www.w2bc.com/?3603.html">欧飞游戏一卡通</a></h6>
<p>
<a href="http://www.w2bc.com/">5元</a><a href="http://www.w2bc.com/">10元</a><a href="http://www.w2bc.com/">15元</a><a
href="http://www.w2bc.com/">30元</a><a href="http://www.w2bc.com/">50元</a><a href="http://www.w2bc.com/">100元</a><a
href="http://www.w2bc.com/" class="more">查看详情...</a></p>
<h6>
<a href="http://www.w2bc.com/">欧飞话费一卡通</a></h6>
<p class="last">
<a href="http://www.w2bc.com/">30元</a><a href="http://www.w2bc.com/">50元</a><a href="http://www.w2bc.com/">100元</a><a
href="http://www.w2bc.com/" class="more">查看详情...</a></p>
</dd>
<dt>缴费支付类</dt>
</dl>
<dl class="navM5">
<dd>
<ul>
<li><a href="http://www.w2bc.com/">系统应用类</a></li>
<li><a href="http://www.w2bc.com/">媒体娱乐类</a></li>
<li><a href="http://www.w2bc.com/">股票证券类</a></li>
<li><a href="http://www.w2bc.com/">图形图像类</a></li>
<li><a href="http://www.w2bc.com/">行业管理类</a></li>
<li><a href="http://www.w2bc.com/">网吧特供类</a></li>
<li><a href="http://www.w2bc.com/">在线杀毒卡</a></li>
</ul>
</dd>
<dt>软件产品类</dt>
</dl>
<dl class="navM6">
<dd>
<ul>
<li><a href="http://www.w2bc.com/" target="_blank">武尊</a></li>
<li><a href="http://www.w2bc.com/" target="_blank">无双三国</a></li>
<li><a href="http://www.w2bc.com/" target="_blank">武斗乾坤</a></li>
<li><a href="http://www.w2bc.com/" target="_blank">烈焰</a></li>
<li><a href="http://www.w2bc.com/" target="_blank">三国论剑</a></li>
<li><a href="http://www.w2bc.com/" target="_blank">战三国</a></li>
</ul>
<h2>
<a href="http://www.w2bc.com/" target="_blank">更多超酷游戏</a></h2>
</dd>
<dt>超酷游戏</dt>
</dl>
</div>
<!-- mainProNav end -->
</div>
<!--以下代码不作为插件效果内容 -->
</div>
</div>
版权所有 爱编程 © Copyright 2012. All Rights Reserved.
闽ICP备12017094号-3
闽ICP备12017094号-3