Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

[发布] 简洁大气的二级导航样式 方便实用

[复制链接]
luck123 发表于 2012-10-18 16:44:12 | 显示全部楼层 |阅读模式
在参考其他二级导航样式的基础上,修改出来用于自己论坛的简洁大气二级导航,预览效果如下:


具体二级导航代码内容如下:
<STYLE type="text/css">
.wapNote,.colNav4t dl,.colNav4t dt,.colNav4t dd a:hover,.colNav4t dd a:hover span,#miniSearch .btn-search,.navAd,.colNav4t dl div em{ background:url("") no-repeat;}
.wapNote {position:absolute;left:205px;top:36px;padding-left:15px;line-height:16px;_width:180px;color:#00AAD1;}
.wapNote a {color:#ff6600;}
.wapNote a:hover {text-decoration:underline;}
#colNav4t { height:58px; padding:1px; _margin-top:5px;
margin-bottom:5px; color:#325E7F;
font:14px/1.5 Tahoma,Helvetica,Arial,"5b8b4f53";}
.colNav4t { background:#FEFEFE;}
.colNav4t a { color:#333333;}
.colNav4t dl { float:left; position:relative; z-index:1; padding:5px 5px 3px 14px; height:48px;}
.colNav4t dl.navShopping { width:250px; padding-left:10px; background:none;clear:left}
.colNav4t dl.navLife { width:280px;}
.colNav4t dl.navTalk { width:175px;}
.colNav4t dl.navService { width:175px;}
.colNav4t dt { float:left; width:28px; margin-top:1px; text-align:center; font-size:14px; color:#5FBA36;}
.colNav4t dl.navLife dt { background-position:-620px -55px;}
.colNav4t dl.navTalk dt { background-position:-651px -55px;}
.colNav4t dl.navService dt { background-position:-681px -55px;}
.colNav4t dd { margin-left:10px;border-right:dashed thin #CCC;}
.colNav4t dd a,.colNav4t dd a span { display:inline-block;zoom:1;*display:inline;}
.colNav4t dd a {margin-bottom:2px;margin-right:2px;font-size:14px;}
.colNav4t dd a span { position:relative; z-index:0; right:-2px; padding:0 7px 0 5px;padding-top:1px9;height:22px;line-height:22px;*cursor:pointer;}
.colNav4t dd a:hover { text-decoration:none; color:#FF6C00;}
.colNav4t dd a:hover,.colNav4t dd a:hover span {background-position:-882px -153px;}
.colNav4t dd a:hover span { background-position:100% -153px;}
.colNav4t dl div { position:absolute; right:-2px; top:55px;width:103px}
.colNav4t dl div em { position:absolute; top:-6px; _top:-4px; right:4px; width:8px; height:8px; overflow:hidden; background-position:100% -19px;}
.colNav4t dl p { display:none; margin-top:5px; _margin-top:7px; padding:0 7px 5px 4px; border:1px solid #DDD; border-top:none; background:#FFF;}
.colNav4t dl.moreOn { background-color:#FFF;}
.colNav4t dl.moreOn em { display:none;}
</style>
<div id="colNav4t">
<div class="colNav4t cf">
<dl class="navShopping">
<dt>制冷专区</dt>
<dd>
<a href="forum.php?mod=forumdisplay&fid=36" title="制冷新手互助问答"><span>互助问答</span></a>
<a href="forum.php?mod=forumdisplay&fid=38" title="空调制冷技术知识&施工安装讨论"><span>施工安装</span></a>
<a href="forum.php?mod=forumdisplay&fid=39" title="制冷售后维修保养讨论"><span>售后维修</span></a>
<a href="forum.php?mod=forumdisplay&fid=40" title="制冷技术资料工具共享"><span>资料工具</span></a>
<a href="forum.php?gid=37" title="制冷、中央空调品牌俱乐部"><span>制冷品牌</span></a>
<a href="forum.php?mod=forumdisplay&fid=44" title="中央空调选型、设计方案共享"><span>中央空调</span></a>
</dd>
</dl>
<dl class="navLife"><dt>压缩机区</dt>
<dd>
<a href="forum.php?mod=forumdisplay&fid=188" title="空压机新手互助问答"><span>互助问答</span></a>
<a href="forum.php?mod=forumdisplay&fid=96" title="各类型压缩机、空压机讨论"><span>各类空压机</span></a>
<a href="forum.php?mod=forumdisplay&fid=131" title="压缩机、空压机资料工具共享"><span>资料共享</span></a>
<a href="forum.php?mod=forumdisplay&fid=130" title="压缩机、空压机技术及维修保养"><span>维修保养</span></a>
<a href="forum.php?gid=133" title="压缩机、空压机品牌俱乐部"><span>空压机品牌</span></a>
<a href="forum.php?mod=forumdisplay&fid=175" title="真空泵技术及资料交流"><span>真空技术</span></a>
</dd>
</dl>
<dl class="navTalk">
<dt>综合讨论</dt><dd>
<a href="forum.php?mod=forumdisplay&fid=176" title="综合技术资料分享"><span>综合资料</span></a>
<a href="forum.php?mod=forumdisplay&fid=135" title="市场畅谈及品牌营销"><span>市场营销</span></a>
<a href="forum.php?mod=forumdisplay&fid=136" title="行业供求信息发布"><span>行业供求</span></a>
<a href="forum.php?mod=forumdisplay&fid=137" title="产品美图美库"><span>美图美库</span></a>
</dd>
</dl>
<dl class="navService">
<dt>特色服务</dt>
<dd>
<a href="forum.php?gid=138" title="各地区求职招聘、信息交流区"><span>求职招聘</span></a>
<a href="plugin.php?id=auction" title="用冰霜币兑换精美奖品"><span>奖品兑换</span></a>
<a href="home.php" title="进入个人家园发表日志等"><span>我的家园</span></a>
<a href="home.php?mod=space" title="在论坛安下自己的小家 装扮个人空间"><span>我的空间</span></a>
</dd>
</dl></div>
</div>

直接把以上代码在后台添加二级导航里既可,本站www.coolling.net已经实用上欢迎大家前往查看完整效果。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
 楼主| luck123 发表于 2012-10-18 16:45:14 | 显示全部楼层
欢迎大家拍砖
回复

使用道具 举报

gushiyue 发表于 2012-10-18 20:18:36 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

 楼主| luck123 发表于 2012-10-18 21:12:05 | 显示全部楼层
简洁大气 、经典的二级导航代码 独家放送了
回复

使用道具 举报

阿清&凌少 发表于 2012-10-18 22:58:53 | 显示全部楼层
还好啦,可以看看这个www.deyanger.com的导航
回复

使用道具 举报

最重要的决定 发表于 2012-10-19 00:48:35 | 显示全部楼层
实用  好用  。。
回复

使用道具 举报

最重要的决定 发表于 2012-10-19 11:13:01 | 显示全部楼层
方便 实用 哈哈  不错
回复

使用道具 举报

YuKuaiWang.com 发表于 2012-10-19 11:36:29 | 显示全部楼层
能问下绿色那里是图片还是文字的?
回复

使用道具 举报

 楼主| luck123 发表于 2012-10-19 11:47:45 | 显示全部楼层
绿色的也是文字,可以自由更改。详细绝对好用使用、
回复

使用道具 举报

whiskoy 发表于 2012-10-19 11:48:58 | 显示全部楼层
很大气的说哈
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-11-20 16:37 , Processed in 0.026072 second(s), 3 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表