分享马尔杜克家3D立体感导航特效源码

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-10-17 18:09:19　-　阅:　-　评:0　-　积分:0

适用范围：京东/天猫/淘宝店铺。

本屌丝前些日子在京东论坛里面发的帖子《全屏banner居中（箭头+圆点+内容居中）》在昨天翻时竟然被加精，本屌丝深感万分荣幸，发个图容我得瑟一下

于是决定分享本店（马尔杜克旗舰店）的狂拽炫酷屌炸天的3D立体感导航特效分享给大家。店铺预览地址： http://mall.jd.com/index-45532.html 附上截图。

附两张操作流程图

下面再附上源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>狂拽炫酷屌炸天3D立体感导航--艺灵设计，qq群：231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com">
<meta name="keywords" content="css3导航特效,二级下拉菜单,导航下拉弹出层,京东店铺装修,3D立体,轮播特效,css3过渡动画">
<!--京东导航样式文件-->
<link href="/d/file/css3/2013-10-17/jd-nav.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="user1-jdhead">
<div class="user1head">
<ul class="user1_nav_l">
<li><span>首页</span><a href="/" title="首页" target="_blank">首页</a></li>
<li><span>全部产品</span><a href="/" title="全部产品" target="_blank">全部产品</a></li>
</ul>
<div class="user1_lb">
<div class="user1_lbs"><span class="z_s_jt">产品类型</span><span class="z_a_jt">产品类型</span></div>
<div class="user1_lbx">
<div class="user1slide">
<input type="radio" name="user1slider" id="user1slider1" />
<input type="radio" name="user1slider" id="user1slider2" />
<input type="radio" name="user1slider" id="user1slider3" />
<input type="radio" name="user1slider" id="user1slider4" />
<div class="user1slide_bd">
<ul class="ce">
<li><a href="#" target="_blank"><img src="/d/file/css3/2013-10-17/image/bx.jpg" alt="" /></a></li>
<li><a href="#" target="_blank"><img src="/d/file/css3/2013-10-17/image/dbx.jpg" alt="" /></a></li>
<li><a href="#" target="_blank"><img src="/d/file/css3/2013-10-17/image/zbx.jpg" alt="" /></a></li>
<li><a href="#" target="_blank"><img src="/d/file/css3/2013-10-17/image/gbx.jpg" alt="" /></a></li>
</ul>
</div>
<div class="user1slide_hd">
<label for="user1slider1"><span></span><a href="#" target="_blank">板  鞋</a></label>
<label for="user1slider2"><span></span><a href="#" target="_blank">低帮鞋</a></label>
<label for="user1slider3"><span></span><a href="#" target="_blank">中帮鞋</a></label>
<label for="user1slider4"><span></span><a href="#" target="_blank">高帮鞋</a></label>
</div>
</div>
</div>
</div>
<ul class="user1_nav_l" style="left:293px;padding-right:40px">
<li><span>布洛克系</span><a href="#" title="布洛克系" target="_blank">布洛克系</a></li>
<li><span>马丁潮靴</span><a href="#" title="马丁潮靴" target="_blank">马丁潮靴</a></li>
</ul>
</div>
</div>
</div>
<h3 style="text-align:center; margin-top:300px;">点击圆点才进行轮播</h3>
<h2>京东店铺预览地址：mall.jd.com/index-45532.html<br />
天猫店铺预览地址：maerduke.tmall.com/<br />
返回原文：<a href="/code/2013-10-17/95.html" target="_blank" tit;e="分享马尔杜克家3D立体感导航特效源码">分享马尔杜克家3D立体感导航特效源码</a>
</h2>
</body>
</html>

Demo演示点此下载：→→狂拽炫酷屌炸天3D立体感导航.zip　　　

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/code/2013-10-17/95.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！