以下是 懒人图库CSS抽屉导航菜单特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.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 content="text/html; charset=gb2312" http-equiv="Content-Type">
<meta name="keywords" content="JS代码,{keyword},JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为{title}，属于站长常用代码" />
<title>{title}</title>
<link rel="stylesheet" type="text/css" href="css/a.css">
</head>
<body>
<div class="topbg">
<div class="topnav">
<div class="l">您好，欢迎来到这里！<a name="gotop"> </a></div>
<div class="r"><a target="_blank" href="#/">返回首页</a> | <a onclick="addToFavorite()">收藏本站</a> | <a target="_blank" href="#/data/sitemap.html"> 网站地图</a></div>
</div>
</div>
<div id="b">
<!--代码开始-->
<div id="header">
<a target="_blank" href="#/" class="logo"><img src="images/logo.jpg" alt="程序员设计师联盟淘宝店"/></a>
<span class="weibo"><iframe width="120" height="24" frameborder="0" allowtransparency="true" marginwidth="0" marginheight="0" scrolling="no" border="0" src="http://widget.weibo.com/relationship/followbutton.php?language=zh_cn&width=136&height=24&uid=2556500765&style=2&btn=red&dpc=1"></iframe></span>
</div>
<div id=daohang>
<li class="tab home"><a target="_blank" href="#/" class="tablink">首 页</a></li>
<li class="tab dropdown"><a target="_blank" href="#/vector/" class="tablink arwlink">矢量素材</a>
<ul class="subnav">
<a target="_blank" href="#/vector/flower/">矢量花纹</a>
<a target="_blank" href="#/vector/classics/">经典实用</a>
<a target="_blank" href="#/vector/festival/">矢量节日</a>
<a target="_blank" href="#/vector/design/">广告设计</a>
<a target="_blank" href="#/vector/chinese_style/">矢量中国</a>
<a target="_blank" href="#/vector/icon/">矢量图标</a>
<a target="_blank" href="#/vector/trend/">矢量潮流</a>
<a target="_blank" href="#/vector/logo/">矢量标志</a>
<a target="_blank" href="#/vector/life/">生活百科</a>
<a target="_blank" href="#/vector/cartoon/">矢量卡通</a>
<a target="_blank" href="#/vector/people/">矢量人物</a>
<a target="_blank" href="#/vector/transport/">交通运输</a>
<a target="_blank" href="#/vector/animal/">矢量动物</a>
<a target="_blank" href="#/vector/plant/">矢量植物</a>
<a target="_blank" href="#/vector/landscape/">风景建筑</a>
<a target="_blank" href="#/vector/food_fruit/">食品果蔬</a>
<a target="_blank" href="#/vector/font/">矢量字体</a>
<a target="_blank" href="#/vector/background/">矢量背景</a>
<a target="_blank" href="#/vector/sport/">体育运动</a>
<a target="_blank" href="#/vector/other/">其他矢量</a>
</ul>
</li>
<li class="tab dropdown"><a target="_blank" href="#/png/" class="tablink arwlink">PNG图标</a>
<ul class="subnav">
<a target="_blank" href="#/png/32x32.html">32x32</a>
<a target="_blank" href="#/png/48x48.html">48x48</a>
<a target="_blank" href="#/png/64x64.html">64x64</a>
<a target="_blank" href="#/png/128x128.html">128x128</a>
<a target="_blank" href="#/png/256x256.html">256x256</a>
<a target="_blank" href="#/png/512x512.html">512x512</a>
</ul>
</li>
<li class="tab dropdown"><a target="_blank" href="#/js/" class="tablink arwlink">JS代码</a><div class="hot"></div>
<ul class="subnav">
<a target="_blank" href="#/js/jiaodiantu.html">焦 点 图</a>
<a target="_blank" href="#/js/quanping.html">全屏广告</a>
<a target="_blank" href="#/js/duilian.html">对联广告</a>
<a target="_blank" href="#/js/kefu.html">在线客服</a>
<a target="_blank" href="#/js/xiangce.html">相册代码</a>
<a target="_blank" href="#/js/daohang.html">菜单导航</a>
<a target="_blank" href="#/js/biaoqian.html">TAB标签</a>
<a target="_blank" href="#/js/piaofu.html">悬浮漂浮</a>
<a target="_blank" href="#/js/shipin.html">视频播放</a>
<a target="_blank" href="#/js/tupian.html">图片特效</a>
<a target="_blank" href="#/js/fanpai.html">翻牌书角</a>
<a target="_blank" href="#/js/qita.html">其他代码</a>
<a target="_blank" href="#/js/nav.html">导航菜单</a>
<a target="_blank" href="#/js/form.html">表单按钮</a>
<a target="_blank" href="#/js/text.html">文字特效</a>
<a target="_blank" href="#/js/table.html">表格图层</a>
<a target="_blank" href="#/js/picture.html">图片特效</a>
<a target="_blank" href="#/js/date.html">时间日期</a>
<a target="_blank" href="#/js/scroll.html">滚动代码</a>
<a target="_blank" href="#/js/window.html">窗口特效</a>
<a target="_blank" href="#/js/color.html">颜色背景</a>
<a target="_blank" href="#/js/website.html">网站常用</a>
<a target="_blank" href="#/js/css.html">CSS样式</a>
<a target="_blank" href="#/js/other.html">其他特效</a>
</ul>
</li>
<li class="tab dropdown"><a target="_blank" href="#/psd/" class="tablink arwlink">PSD素材</a>
<ul class="subnav">
<a target="_blank" href="#/psd/sheji/">设计元素</a>
<a target="_blank" href="#/psd/wangye/">网页元素</a>
<a target="_blank" href="#/psd/anniu/">按钮素材</a>
<a target="_blank" href="#/psd/huawen/">花纹元素</a>
<a target="_blank" href="#/psd/fangchan/">房产模板</a>
<a target="_blank" href="#/psd/mingpian/">名片模板</a>
<a target="_blank" href="#/psd/ziti/">字体设计</a>
<a target="_blank" href="#/psd/tubiao/">图标设计</a>
<a target="_blank" href="#/psd/baozhuang/">包装设计</a>
<a target="_blank" href="#/psd/jiemian/">界面设计</a>
<a target="_blank" href="#/psd/nianli/">年历台历</a>
<a target="_blank" href="#/psd/zhongguo/">中国元素</a>
<a target="_blank" href="#/psd/katong/">卡通素材</a>
<a target="_blank" href="#/psd/renwu/">人物素材</a>
<a target="_blank" href="#/psd/shenghuo/">生活百科</a>
</ul>
</li>
<li class="tab dropdown"><a target="_blank" href="#/lanren/" class="tablink arwlink">网页素材</a>
<ul class="subnav">
<a target="_blank" href="#/gif/">网页小图片</a>
<a target="_blank" href="#/bg/">网页背景</a>
<a target="_blank" href="#/software/">软件分享</a>
<a target="_blank" href="#/qq/">QQ表情</a>
<a target="_blank" href="#/news/">酷文分享</a>
<a target="_blank" href="http://tool.lanrentuku.com/">懒人工具箱</a>
</ul>
</li>
<li class="tab dropdown"><a target="_blank" href="#" class="tablink arwlink">用户体验</a><div class="new"></div>
<ul class="subnav">
<a target="_blank" href="http://ued.lanrentuku.com/ui/">视觉设计</a>
<a target="_blank" href="http://ued.lanrentuku.com/id/">交互设计</a>
<a target="_blank" href="http://ued.lanrentuku.com/ad/">广告设计</a>
<a target="_blank" href="http://ued.lanrentuku.com/di/">设计思想</a>
<a target="_blank" href="http://ued.lanrentuku.com/ur/">用户研究</a>
<a target="_blank" href="http://ued.lanrentuku.com/wd/">前端开发</a>
<a target="_blank" href="http://ued.lanrentuku.com/pm/">产品经理</a>
<a target="_blank" href="http://ued.lanrentuku.com/doc/">资源文档</a>
</ul>
</li>
<li class="tab dropdown"><a target="_blank" href="#/show/" class="tablink arwlink">设计分享</a>
<ul class="subnav">
<a target="_blank" href="#/show/pingmian/">平面设计</a>
<a target="_blank" href="#/show/baozhuang/">包装设计</a>
<a target="_blank" href="#/show/mingpian/">名片设计</a>
<a target="_blank" href="#/show/qita/">其他艺术</a>
<a target="_blank" href="#/show/guanggao/">广告创意</a>
<a target="_blank" href="#/show/biaozhi/">标志设计</a>
<a target="_blank" href="#/show/huihua/">绘画艺术</a>
<a target="_blank" href="#/show/chanpin/">产品设计</a>
<a target="_blank" href="#/show/sheying/">摄影欣赏</a>
<a target="_blank" href="#/show/jiaohu/">交互设计</a>
<a target="_blank" href="#/show/shipin/">视频广告</a>
</ul>
</li>
<li class="tab"><a target="_blank" href="#" class="tablink">懒人论坛</a></li>
</div>
<!--代码结束-->
</div><!-- /b -->
</body>
</html>
CSS代码(a.css):
/* ת���뱣���Ȩ��Ϣ������ͼ�� www.lanrentuku.com */
*{padding:0;margin:0}
html{min-height:101%}
body{font-family:verdana,arial,tahoma;font-size:12px;color:#333}
div{margin:0 auto}
ul,ol,li{list-style:none}
a{text-decoration:none;word-wrap:break-word}
a:hover{text-decoration:underline}
img{border:0}
p{line-height:26px}
/* ��� */
#b{width:1160px;padding:0 12px;background-color:#FFF;position:relative}
/* �������� */
.topbg{height:33px;background:url(../images/a.png) repeat -20px 0}
.topnav{width:1160px;height:33px;line-height:33px;padding:0 12px}
.topnav .l{float:left;color:#999}
.topnav .r{float:right;color:#DDD}
.topnav .r a{color:#666;cursor:pointer}
.topnav .r a:hover{color:#390}
/* logo */
#header{width:1160px;height:80px}
#header .logo img{width:446px;height:42px;position:absolute;top:20px;left:12px}
#header .weibo{position:absolute;top:34px;right:12px}
/* ȫվ���� */
#daohang{width:1160px;height:32px;background-color:#333;margin-bottom:2px;position:relative;z-index:99}
.home{margin-left:16px}
.tab{position:relative;display:block;float:left;cursor:pointer}
.tab .tablink{position:relative;padding:1px 12px;line-height:30px;display:block;height:30px;color:#fff;font-size:14px;z-index:99;float:left}
.tab .tablink a{line-height:30px;color:#FFF;text-decoration:none}
.tab:hover{background-color:#FFF}
.tab:hover .tablink{color:#357d13;border:1px solid #629d2a;padding:0 11px;text-decoration:none}
.tab:hover .tablink a{color:#357d13}
.dropdown:hover .arwlink{border-bottom:1px solid #FFF;border-left:1px solid #629d2a;height:31px}
.dropdown ul{display:none}
.dropdown:hover ul{position:absolute;display:block;margin-left:-1px;top:32px;left:1px;z-index:9}
.subnav{width:250px}
.subnav a{padding:4px 0 4px 10px;line-height:16px;width:70px;display:block;white-space:nowrap;color:#333;float:left}
.subnav:hover{text-decoration:underline;color:#080}
.dropdown .subnav{background-color:#FFF;border:1px solid #390;padding:8px}
/* ���� */
.hot{width:22px;height:12px;background:url(../images/a.png) no-repeat -111px -40px;position:absolute;right:22px;top:-9px;z-index:999}
.new{width:22px;height:12px;background:url(../images/a.png) no-repeat -85px -40px;position:absolute;right:22px;top:-9px;z-index:999}
分享到QQ
分享到微博
微信扫一扫
