以下是 懒人图库导航菜单升级版特效代码 的示例演示效果:
部分效果截图:
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/style.css">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</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 class="top">
<ul class="menu">
<li class="no_sub"><a target="_blank" href="#/" class="tablink nosub">首 页</a></li>
<li>
<a target="_blank" href="#/vector/" class="tablink">矢量素材</a>
<ul>
<li><a target="_blank" href="#/vector/flower/">矢量花纹</a></li>
<li><a target="_blank" href="#/vector/classics/">经典实用</a></li>
<li><a target="_blank" href="#/vector/festival/">矢量节日</a></li>
<li><a target="_blank" href="#/vector/design/">广告设计</a></li>
<li><a target="_blank" href="#/vector/chinese_style/">矢量中国</a></li>
<li><a target="_blank" href="#/vector/icon/">矢量图标</a></li>
<li><a target="_blank" href="#/vector/trend/">矢量潮流</a></li>
<li><a target="_blank" href="#/vector/logo/">矢量标志</a></li>
<li><a target="_blank" href="#/vector/life/">生活百科</a></li>
<li><a target="_blank" href="#/vector/cartoon/">矢量卡通</a></li>
<li><a target="_blank" href="#/vector/people/">矢量人物</a></li>
<li><a target="_blank" href="#/vector/transport/">交通运输</a></li>
<li><a target="_blank" href="#/vector/animal/">矢量动物</a></li>
<li><a target="_blank" href="#/vector/plant/">矢量植物</a></li>
<li><a target="_blank" href="#/vector/landscape/">风景建筑</a></li>
<li><a target="_blank" href="#/vector/food_fruit/">食品果蔬</a></li>
<li><a target="_blank" href="#/vector/font/">矢量字体</a></li>
<li><a target="_blank" href="#/vector/background/">矢量背景</a></li>
<li><a target="_blank" href="#/vector/sport/">体育运动</a></li>
<li><a target="_blank" href="#/vector/other/">其他矢量</a></li>
</ul>
</li>
<li>
<a target="_blank" href="#/png/" class="tablink">PNG图标</a>
<ul>
<li><a target="_blank" href="#/png/32x32.html">32x32</a></li>
<li><a target="_blank" href="#/png/48x48.html">48x48</a></li>
<li><a target="_blank" href="#/png/64x64.html">64x64</a></li>
<li><a target="_blank" href="#/png/128x128.html">128x128</a></li>
<li><a target="_blank" href="#/png/256x256.html">256x256</a></li>
<li><a target="_blank" href="#/png/512x512.html">512x512</a></li>
</ul>
</li>
<li>
<a href="#">JS代码</a>
<ul>
<li><a target="_blank" href="#/js/jiaodiantu.html">焦 点 图</a></li>
<li><a target="_blank" href="#/js/quanping.html">全屏广告</a></li>
<li><a target="_blank" href="#/js/duilian.html">对联广告</a></li>
<li><a target="_blank" href="#/js/kefu.html">在线客服</a></li>
<li><a target="_blank" href="#/js/xiangce.html">相册代码</a></li>
<li><a target="_blank" href="#/js/daohang.html">菜单导航</a></li>
<li><a target="_blank" href="#/js/biaoqian.html">TAB标签</a></li>
<li><a target="_blank" href="#/js/piaofu.html">悬浮漂浮</a></li>
<li><a target="_blank" href="#/js/shipin.html">视频播放</a></li>
<li><a target="_blank" href="#/js/tupian.html">图片特效</a></li>
<li><a target="_blank" href="#/js/fanpai.html">翻牌书角</a></li>
<li><a target="_blank" href="#/js/qita.html">其他代码</a></li>
<li><a target="_blank" href="#/js/nav.html">导航菜单</a></li>
<li><a target="_blank" href="#/js/form.html">表单按钮</a></li>
<li><a target="_blank" href="#/js/text.html">文字特效</a></li>
<li><a target="_blank" href="#/js/table.html">表格图层</a></li>
<li><a target="_blank" href="#/js/picture.html">图片特效</a></li>
<li><a target="_blank" href="#/js/date.html">时间日期</a></li>
<li><a target="_blank" href="#/js/scroll.html">滚动代码</a></li>
<li><a target="_blank" href="#/js/window.html">窗口特效</a></li>
<li><a target="_blank" href="#/js/color.html">颜色背景</a></li>
<li><a target="_blank" href="#/js/website.html">网站常用</a></li>
<li><a target="_blank" href="#/js/css.html">CSS样式</a></li>
<li><a target="_blank" href="#/js/other.html">其他特效</a></li>
</ul>
<div class="hot"></div>
</li>
<li>
<a target="_blank" href="#/psd/" class="tablink">PSD素材</a>
<ul>
<li><a target="_blank" href="#/psd/sheji/">设计元素</a></li>
<li><a target="_blank" href="#/psd/wangye/">网页元素</a></li>
<li><a target="_blank" href="#/psd/anniu/">按钮素材</a></li>
<li><a target="_blank" href="#/psd/huawen/">花纹元素</a></li>
<li><a target="_blank" href="#/psd/fangchan/">房产模板</a></li>
<li><a target="_blank" href="#/psd/mingpian/">名片模板</a></li>
<li><a target="_blank" href="#/psd/ziti/">字体设计</a></li>
<li><a target="_blank" href="#/psd/tubiao/">图标设计</a></li>
<li><a target="_blank" href="#/psd/baozhuang/">包装设计</a></li>
<li><a target="_blank" href="#/psd/jiemian/">界面设计</a></li>
<li><a target="_blank" href="#/psd/nianli/">年历台历</a></li>
<li><a target="_blank" href="#/psd/zhongguo/">中国元素</a></li>
<li><a target="_blank" href="#/psd/katong/">卡通素材</a></li>
<li><a target="_blank" href="#/psd/renwu/">人物素材</a></li>
<li><a target="_blank" href="#/psd/shenghuo/">生活百科</a></li>
</ul>
</li>
<li>
<a target="_blank" href="#/lanren/" class="tablink">网页素材</a>
<ul>
<li><a target="_blank" href="#/gif/">网页小图片</a></li>
<li><a target="_blank" href="#/bg/">网页背景</a></li>
<li><a target="_blank" href="#/software/">软件分享</a></li>
<li><a target="_blank" href="#/qq/">QQ表情</a></li>
<li><a target="_blank" href="#/news/">酷文分享</a></li>
<li><a target="_blank" href="http://tool.lanrentuku.com/">懒人工具箱</a></li>
</ul>
</li>
<li>
<a target="_blank" href="#/" class="tablink">用户体验</a>
<ul>
<li><a target="_blank" href="#/ui/">视觉设计</a></li>
<li><a target="_blank" href="#/id/">交互设计</a></li>
<li><a target="_blank" href="#/ad/">广告设计</a></li>
<li><a target="_blank" href="#/di/">设计思想</a></li>
<li><a target="_blank" href="#/ur/">用户研究</a></li>
<li><a target="_blank" href="#/wd/">前端开发</a></li>
<li><a target="_blank" href="#/pm/">产品经理</a></li>
<li><a target="_blank" href="#/doc/">资源文档</a></li>
</ul>
<div class="new"></div>
</li>
<li>
<a target="_blank" href="#/show/" class="tablink">设计分享</a>
<ul>
<li><a target="_blank" href="#/show/pingmian/">平面设计</a></li>
<li><a target="_blank" href="#/show/baozhuang/">包装设计</a></li>
<li><a target="_blank" href="#/show/mingpian/">名片设计</a></li>
<li><a target="_blank" href="#/show/qita/">其他艺术</a></li>
<li><a target="_blank" href="#/show/guanggao/">广告创意</a></li>
<li><a target="_blank" href="#/show/biaozhi/">标志设计</a></li>
<li><a target="_blank" href="#/show/huihua/">绘画艺术</a></li>
<li><a target="_blank" href="#/show/chanpin/">产品设计</a></li>
<li><a target="_blank" href="#/show/sheying/">摄影欣赏</a></li>
<li><a target="_blank" href="#/show/jiaohu/">交互设计</a></li>
<li><a target="_blank" href="#/show/shipin/">视频广告</a></li>
</ul>
</li>
<li class="no_sub"><a target="_blank" href="#" class="tablink nosub">懒人论坛</a></li>
</ul>
</div>
</div>
</body>
</html>
JS代码(js.js):
$(document).ready(function(){
$(".menu li").hover(function(){
$(this).addClass("hover");
$(this).children("ul li").attr('class','');
}
,function(){
$(this).removeClass("hover");
$(this).children("ul li").attr('class','');
}
);
$(".menu li.no_sub").hover(function(){
$(this).addClass("hover1");
}
,function(){
$(this).removeClass("hover1");
}
);
}
)CSS代码(style.css):
@charset "gb2312";/* ת���뱣���Ȩ��Ϣ������ͼ�� 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}
/*����*/
.menu{height:32px;font-family:"Microsoft Yahei",Tahoma,Geneva,sans-serif;padding-left:15px;_overflow:hidden}
.menu a{color:#fff;height:16px;line-height:16px;float:left;position:relative}
.top{background:#333;position:relative;z-index:2}
.menu li{font-size:14px;float:left;position:relative;padding:8px 12px;}
.menu li:hover{background-color:#fff;border:1px solid #629d2a;border-bottom:none;padding:8px 11px}
.menu li:hover a{color:#357d13}
.menu li.no_sub:hover{border:1px solid #629d2a;padding:7px 11px}
.menu ul{width:250px;background-color:#fff;border:1px solid #629d2a;border-top:none;position:absolute;left:-1px;top:-999em;z-index:99999;padding:8px;display:none}
.menu li:hover ul{top:31px;display:block}
.menu li:hover ul li{font-size:12px;border:none;width:70px;float:left;padding:4px 0 4px 10px}
.menu li:hover ul li a{color:#333;text-decoration:none;padding:0}
.menu li:hover ul li a:hover{text-decoration:underline}
/*IE6*/
.menu li.hover{background-color:#fff;border:1px solid #629d2a;border-bottom:none;padding:8px 11px}
.menu li.hover a{color:#357d13}
.menu li.hover ul{top:31px;display:block}
.menu li.hover ul li{border:none;width:70px;float:left;padding:4px 0 4px 10px}
.menu li.hover ul li a{height:16px;line-height:16px;font-size:12px;color:#333;text-decoration:none;padding:0}
.menu li.hover ul li a:hover{text-decoration:underline}
.menu li.no_sub.hover1{border:1px solid #629d2a;padding:7px 11px}
/* ���� */
.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
分享到微博
微信扫一扫
