以下是 欧飞数卡jQuery分类导航特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<title>欧飞数卡jQuery分类导航</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/b2c_pub.css" />
</head>
<body>
<link rel="stylesheet" type="text/css" href="css/b2c.tip.css" />
<div class="header">
<div class="topM sline clearfix">
<div class="OfcardLogo"><a href="/">欧飞数卡</a></div>
<div class="searchBar">
<div class="searchVInput">
<form action="#" 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="#">首页</a>
<a href="#" target="_blank">网游交易区</a>
<a href="#" target="_blank">积分商城</a>
<a href="#?" 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="#?cp22.html">游戏直充</a></h6>
<p><a href="#?2226.html">91游戏</a><a href="http://www.ofcard.com#?2216.html">梦幻国度</a><a href="#?2206.html">Q币随意直充</a><a href="#?2209.html">魔兽世界</a><a href="#?cp22.html" class="more">查看更多...</a></p>
<h6><a href="#?cp21.html">游戏卡密</a></h6>
<p><a href="#">骏网一卡通</a><a href="#?2108.html">完美一卡通</a><a href="#?2102.html">盛大一卡通</a><a href="#?2107.html">巨人一卡通</a><a href="#?cp22.html" class="more">查看更多...</a></p>
<h5>上面没找到，别漏了这些哦。</h5>
<ul>
<li><a href="#?cp26.html">网页游戏充值</a></li>
<li><a href="#?cp24.html">外服网游点卡</a></li>
<li><a href="#?cp23.html">游戏辅助卡</a></li>
<li><a href="#?cp25.html">棋牌休闲游戏</a></li>
<li><a href="#?cp42.html">游戏相关实物</a></li>
<li><a href="#?cp27.html">手机游戏</a></li>
</ul>
</dd>
<dt>游戏充值类</dt>
</dl>
<dl class="navM2">
<dd>
<h2><a href="#?140101.htm">手机充值(直充)</a></h2>
<h6><a href="#?cp13.html">话费充值卡</a></h6>
<p><a href="#?130102.htm">全国移动话费100元卡密</a><a href="#?130204.htm">全国联通话费100元卡密</a><a href="#?cp13.html" class="more">查看更多...</a></p>
<ul class="hide">
<li><a href="#?cp12.html">IP电话卡</a></li>
</ul>
</dd>
<dt>话费充值类</dt>
</dl>
<dl class="navM3">
<dd>
<ul>
<li><a href="#?cp31.html">网络及休闲</a></li>
<li><a href="#?cp34.html">学习教育</a></li>
<li><a href="#?cp35.html">娱乐影视</a></li>
<li><a href="#?cp38.html">网络加速器</a></li>
<li><a href="#?cp43.html">网上保险</a></li>
<li><a href="#?cp37.html">电子杂志</a></li>
<li><a href="#?cp65.html">生活服务类</a></li>
</ul>
</dd>
<dt>互联网充值类</dt>
</dl>
<dl class="navM4">
<dd>
<h2>
<a href="#?620101.htm">银行转帐</a>
</h2>
<ul class="hide">
<li><a href="#?610101.htm">信用卡还款</a></li>
<li><a href="#?3603.html">欧飞游戏一卡通</a></li>
<li><a href="#?3604.html">欧飞话费一卡通</a></li>
</ul>
<h6><a href="#?cp63.html">支付帐号充值</a></h6>
<p><a href="#?630101.htm">支付宝账号充值</a><a href="#?6303.html">支付宝卡</a><a href="#?6304.html">支付宝实物卡</a><a href="#?cp63.html" class="more">查看详情...</a></p>
<h6><a href="#?6401.html">江苏电费充值缴费卡</a></h6>
<p><a href="#?640103.htm">50元</a><a href="#?640101.htm">100元</a><a href="#?640102.htm">200元</a><a href="#?6401.html" class="more">查看其他面值...</a></p>
<h6><a href="#?3603.html">欧飞游戏一卡通</a></h6>
<p><a href="#?360301.htm">5元</a><a href="#?360302.htm">10元</a><a href="#?360303.htm">15元</a><a href="#?360304.htm">30元</a><a href="#?360305.htm">50元</a><a href="#?360306.htm">100元</a><a href="#?3603.html" class="more">查看详情...</a></p>
<h6><a href="#?3604.html">欧飞话费一卡通</a></h6>
<p class="last"><a href="#?360401.htm">30元</a><a href="#?360402.htm">50元</a><a href="#?360403.htm">100元</a><a href="#?3604.html" class="more">查看详情...</a></p>
</dd>
<dt>缴费支付类</dt>
</dl>
<dl class="navM5">
<dd>
<ul>
<li><a href="#?cp33.html">系统应用类</a></li>
<li><a href="#?cp41.html">媒体娱乐类</a></li>
<li><a href="#?cp46.html">股票证券类</a></li>
<li><a href="#?cp47.html">图形图像类</a></li>
<li><a href="#?cp48.html">行业管理类</a></li>
<li><a href="#?cp49.html">网吧特供类</a></li>
<li><a href="#?cp32.html">在线杀毒卡</a></li>
</ul>
</dd>
<dt>软件产品类</dt>
</dl>
<dl class="navM6">
<dd>
<ul>
<li><a href="#" target="_blank">武尊</a></li>
<li><a href="#" target="_blank">无双三国</a></li>
<li><a href="#" target="_blank">武斗乾坤</a></li>
<li><a href="#" target="_blank">烈焰</a></li>
<li><a href="#" target="_blank">三国论剑</a></li>
<li><a href="#" target="_blank">战三国</a></li>
</ul>
<h2><a href="#" target="_blank">更多超酷游戏</a></h2>
</dd>
<dt>超酷游戏</dt>
</dl>
</div><!-- mainProNav end -->
</div>
</body>
</html>
CSS代码(b2c.tip.css):
body{font:12px/1.5 Tahoma,Helvetica,Arial,Simsun,sans-serif;color:#484848;}
/* header */
.sline{margin:0 auto;width:1000px;}
.topM{margin:18px auto 30px;_margin:26px auto 30px;}
.header .OfcardLogo{float:left;padding-left:20px;}
.header .OfcardLogo a{display:block;width:146px;height:48px;background:url(headPic.png) left top no-repeat;text-indent:-9999px;}
.header .searchBar{float:right;}
.header .searchBar .searchVInput{border:3px solid #d3d3d3;width:364px;height:40px;}
.header .searchBar #cardname{margin:0;vertical-align:middle;padding-left:8px;width:310px;height:38px;line-height:40px;border:0;font-size:18px;font-family:verdana,Tahoma,Arial,Hei,"Microsoft Yahei",SimHei;}
.header .searchBar .cardnameV{background:url(headPic.png) 10px -228px no-repeat;}
.header .searchBar .searchVInput a{float:right;width:40px;height:40px;background:url(headPic.png) left -153px no-repeat;text-indent:-9999px;}
.header .searchBar .searchVInput a:hover{background-position:-60px -153px}
.header .searchBar .searchVInput a:active{background-position:-116px -153px}
.header .navigationBar{display:block;height:42px;background:#f60;}
.header .navigationBar .navigationBarInnel{display:block;margin:0 auto;width:1000px;}
.header .navigationBar tt{display:block;position:relative;float:left;margin:-10px 0;width:200px;height:62px;background:url(headPic.png) left -76px no-repeat;}
.header .navigationBar tt .mainProNavArea{position:absolute;top:62px;}
.header .navigationBar tt.slideOpenNAV .mainProNavArea{display:none;}
.header .navigationBar tt.slideOpenNAV{height:56px;}
.header .navigationBar .mainMenuV{float:left;padding-left:5px;}
.header .navigationBar .mainMenuV a{float:left;margin:0 2px;padding:0 25px;height:42px;line-height:42px;font-size:14px;color:#fff;font-family:verdana,Tahoma,Arial,Hei,"Microsoft Yahei",SimHei;* font-weight:bold;}
.header .navigationBar .mainMenuV a:hover{color:#000;background:#bc6022;}
.header .navigationBar .mainMenuV a:active{color:#ccc;background:#999999;}
/* 搜索弹出窗口 */
#KsmanDisp{position:absolute;z-index:9999!important;margin:0!important;padding:0!important;border:3px solid #d3d3d3!important;background:#fff!important;width:364px!important;text-align:left;transition:display 0.2s linear 0s;box-shadow:0px 5px 5px #999;}
#KsmanDisp div{margin:1px;padding:2px 10px;line-height:26px;cursor:default;}
#KsmanDisp b{color:#5bbc39;}
#KsmanDisp .sman_selectedStyle{background:#82d864!important;color:#fff;transition:background 0.2s linear 0s;}
#KsmanDisp .sman_selectedStyle b{color:#fefc56;}
#producttype{display:none;}
/* 主导航模块 */
.mainProNav{border:1px solid #ddd;position:relative;z-index:9996;cursor:default;transition:background 0.2s linear 0s;text-align:left;width:188px;background:#fff;}
.mainProNavHover{border:1px solid #ececec;background:#ececec;color:#666;}
.mainProNav dl,.mainProNav dt,.mainProNav dd{display:block;margin:0;padding:0;}
.mainProNav dt{padding-left:24px;height:50px;line-height:50px;font-size:16px;background:url(mainProNavIcon.png) right -54px no-repeat;font-family:verdana,Tahoma,Arial,Hei,"Microsoft Yahei",SimHei;transition:background-color 0.2s linear 0s,padding-left 0.2s linear 0s;}
.mainProNav .dlHover dt{position:relative;z-index:9999;margin:-1px -3px -1px -1px;*margin:-2px -3px -2px -1px;#top:-1px;padding-left:45px;height:52px;line-height:52px;background:#f60 url(mainProNavIcon.png) left top no-repeat;color:#fff;}
.mainProNav dd{display:none;position:absolute;left:188px;top:-1px;_top:0px;z-index:9998;padding:20px;border:1px solid #b9b9b9;border-left:3px solid #f60;background:#fff;width:467px;height:260px;box-shadow:0px 0px 5px #999;}
.mainProNav .dlHover dd{display:block;}
.mainProNav dl dd a{transition:background-color 0.1s linear 0s,color 0.1s linear 0s;color:#666;line-height:18px;}
.mainProNav dl dd a:hover{color:#f60;}
.mainProNav dl dd a:active{color:#ccc;}
.mainProNav dl dd h6 a{font-size:14px;line-height:20px;color:#f60;font-weight:normal;}
.mainProNav dl dd h6 a:hover{color:#2567d3;}
.mainProNav dl dd h6 a:active{color:#666;}
.mainProNav dl dd p{padding:4px 0 15px;*padding:0px 0 14px;}
.mainProNav dl dd ul{padding:10px;overflow:hidden;}
.mainProNav dl dd ul li{line-height:24px;}
.mainProNav dl dd p a{display:inline-block;*zoom:1;display:inline;padding:2px 2px 0;margin-right:10px;}
.mainProNav dl dd p a.more{color:#999;}
.mainProNav dl dd p a.more:hover{color:#f60;}
.mainProNav dl dd p a.more:active{color:#ccc;}
.mainProNav dl dd h2 a{display:inline-block;*zoom:1;display:inline;padding:5px 12px 8px;*padding:5px 12px;font-size:25px;background:#6dd5d7;color:#fff;}
.mainProNav dl dd h2 a:hover{background:#4bc1c3;color:#fff;}
.mainProNav dl dd h2 a:active{background:#b1b1b1;color:#fff;}
.mainProNav .bankPayBar{display:block;width:160px;margin-bottom:10px;padding:5px 0 8px;text-align:center;font-size:18px;color:#fff;background:#8eb84a;font-family:verdana,Tahoma,Arial,Hei,"Microsoft Yahei",SimHei;}
.mainProNav .bankPayBar:hover{background:#95d134}
.mainProNav .bankPayBar:active{background:#b1b1b1;}
.mainProNav dl.navM1 h5{margin:75px 0 5px;font-size:12px;color:#333;}
.mainProNav dl.navM1 ul{padding:0;width:280px;*width:260px;}
.mainProNav dl.navM1 ul li{display:inline;padding:0 12px 0 0;}
.mainProNav dl.navM2 p a{display:block;}
.mainProNav dl.navM2 h2{margin:32px 0 100px;}
.mainProNav dl.navM2 h2 a{_color:#fff;}
.mainProNav dl.navM2 ul{margin-top:140px;background:#ffebcf;}
.mainProNav dl.navM3 ul{margin:120px -10px 0 0;padding:10px 2px 10px 2px;background:#f9f8a6;width:246px;*width:256px;_width:266px;}
.mainProNav dl.navM3 ul li{float:left;margin:0 15px;}
.mainProNav dl.navM4 h2{margin-bottom:25px;}
.mainProNav dl.navM4 h2 a{background:#539fc8;font-size:14px;color:#fff;}
.mainProNav dl.navM4 h2 a:hover{background:#3caae6}
.mainProNav dl.navM4 h2 a:active{background:#b1b1b1;}
.mainProNav dl.navM4 ul{overflow:hidden;margin-top:75px;padding:0;}
.mainProNav dl.navM4 ul li a{display:block;padding:5px 12px 8px;width:100px;margin-bottom:3px;background:#c98e3a;color:#fff;font-size:14px;font-family:verdana,Tahoma,Arial,Hei,"Microsoft Yahei",SimHei;}
.mainProNav dl.navM4 ul li a:hover{background:#d38617}
.mainProNav dl.navM4 ul li a:active{background:#b1b1b1}
.mainProNav dl.navM4 dd p.last{_margin-bottom:-12px;}
.mainProNav dl.navM5 ul{background:#d2697e;width:80px;}
.mainProNav dl.navM5 ul li{padding-left:8px;}
.mainProNav dl.navM5 ul li a{color:#fff;line-height:28px;}
.mainProNav dl.navM5 ul li a:hover{color:#71071c;}
.mainProNav dl.navM5 ul li a:active{color:#ccc;}
.mainProNav dl.navM6 ul{width:206px;*width:210px;border:2px solid #768b9a;}
.mainProNav dl.navM6 ul li{display:inline;padding:0 12px;}
.mainProNav dl.navM6 h2{margin-top:146px;_margin-top:141px;}
.mainProNav dl.navM6 h2 a{background:#eb6952}
.mainProNav dl.navM6 h2 a:hover{background:#c13b11}
.mainProNav .hide{display:none;}
.mainProNav dl dd{background-position:right bottom;background-repeat:no-repeat;}
.mainProNav dl.navM1 dd{background-image:url(images/nav0006.jpg)}
.mainProNav dl.navM2 dd{background-image:url(images/nav0002.jpg)}
.mainProNav dl.navM3 dd{background-image:url(images/nav0003.jpg)}
.mainProNav dl.navM4 dd{background-image:url(images/nav0004.jpg)}
.mainProNav dl.navM5 dd{background-image:url(images/nav0005.jpg)}
.mainProNav dl.navM6 dd{background-image:url(images/nav0001.jpg)}
CSS代码(common.css):
*{margin:0;padding:0;}
.hand{cursor:pointer;}
img{border:0;}
ol,ul{list-style:none;}
a{text-decoration:none;}
input{vertical-align:middle;}
/*�߿�*/
.border_gray{border:solid 1px #ddd;}
.borderT_none{border-top:0 !important;}
.borderB_none{border-bottom:0 !important;}
.border_none{border:none;}
/*�ı����뷽ʽ*/
.text_c{text-align:center;}
.text_r{text-align:right;}
.text_l{text-align:left!important;}
/*����߾�*/
.push_all{margin:10px;}
.push_t{margin-top:10px;}
.push_r{margin-right:10px;}
.push_b{margin-bottom:10px;}
.push_l{margin-left:10px;}
.push_t0{margin-top:-10px;}
.fill_all{padding:10px;}
.fill_t{padding-top:10px;}
.fill_r{padding-right:10px;}
.fill_b{padding-bottom:10px;}
.fill_l{padding-left:10px;}
/*�������������*/
.clear_both{clear:both;}
.float_l{float:left;}
.float_r{float:right;}
/*��λ*/
.position_ab{position:absolute;}
.position_re{position:relative;}
/*��ʾ����*/
.text_hide{text-indent:-9999px;}
.tag_show{display:block!important;}
.tag_hide{display:none!important;}
.tag_c{margin:0 auto;}
.tag_line{display:inline;}
.over_hide{overflow:hidden;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
/* Hides from IE-mac \*/
* html .clearfix{height:1%;}
/* End hide from IE-mac */
/*������ɫ*/
.orange{color:#e37513;}
.orange2{color:#f90;}
.orange3{color:#e30;}
.blue{color:#1292cd;}
.gray{color:#6d6d6d;}
.oatmeal{color:#ccc;}
.red{color:#f00;}
.green{color:#093;}
.white{color:#fff;}
/*�����С*/
.font_12{font-size:12px;}
.font_14{font-size:14px;}
.font_16{font-size:16px;}
/*��������*/
.font_bold{font-weight:bold;}
.font_lineThrough{text-decoration:line-through;}
.font_underline{text-decoration:underline;}
.lineH_20{line-height:20px;}
.lineH_24{line-height:24px;}
/*������ʽ1-----------Ĭ�Ϻ�ɫ����ͣ��ɫ�����»�ɫ---------*/
.a_default{color:#000;}
.a_default:hover{color:#f00;}
.a_default:active{color:#ccc;}
/*������ʽ2-----------Ĭ�Ϻ�ɫ����ͣ��ɫ---------*/
.a_red{color:#f00;}
.a_red:hover{color:#ccc;}
/*������ʽ3-----------Ĭ����ɫ����ͣ��ɫ---------*/
.a_blue{color:#1292cd;}
.a_blue:hover{color:#f00;}
分享到QQ
分享到微博
微信扫一扫
