Discuz! X通用经典简约二级导航

noobtt · 发表于 2012-10-8 13:12:49

经典二级导航，

有些站友可能会问到，之前就有这个的。回答：是的，之前的确有这个导航，但是那是用TABLE代码写的，下面分享的是用div+css写的，对于代码的优化来说，这都懂的！

演示地址：http://bbs.52dengzhou.com

<style>
.nav_menu{ width:973px; padding:5px 0 5px 5px; margin:0 auto; overflow:hidden; background:#f8f8f8; color:#999; border:1px solid #dfdfdf; border-top:none;}
.nav_menu ul li{ line-height:24px;}
.nav_menu ul li a{ margin:0 3px;}
.nav_menu1{ background:url({IMGDIR}/nav_pd.gif) no-repeat left 2px; padding:0 10px 0 35px; float:left;}
.nav_bm{ background:url({IMGDIR}/nav_bm.gif) no-repeat left 2px;}
.nav_lt{ background:url({IMGDIR}/nav_lt.gif) no-repeat left 2px;}
.nav_hy{ background:url({IMGDIR}/nav_hy.gif) no-repeat left 2px;}
</style>
<div class="nav_menu">
<div class="nav_menu1">
<ul>
<li>
<a href="http://news.52dengzhou.com/"><b>新闻</b></a> | <a href="http://news.52dengzhou.com/news/dengzhou/"><font color='#E11'>邓州</font></a> | <a href="http://life.52dengzhou.com/">乡镇</a> | <a href="http://news.52dengzhou.com/news/shwx/">社会万象</a>
</li>
<li>
<a href="http://food.52dengzhou.com/"><b>美食</b></a> | <a href="http://bbs.52dengzhou.com/forum-39-1.html"><font color='#E11'>情感</font></a> | <a href="http://bbs.52dengzhou.com/forum-53-1.html">二手</a> | <a href="http://bbs.52dengzhou.com/forum-52-1.html">房屋租售</a>
</li>
</ul>
</div>
<div class="nav_menu1 nav_lt">
<ul>
<li>
<a href="http://bbs.52dengzhou.com/forum-38-1.html"><b>贴吧</b></a> | <a href="http://bbs.52dengzhou.com/forum-41-1.html"><font color='#E11'>星座</font></a> | <a href="http://bbs.52dengzhou.com/forum-61-1.html">图库</a> | <a href="http://bbs.52dengzhou.com/forum-food-1.html">私家厨房</a>
</li>
<li>
<a href="http://bbs.52dengzhou.com/forum-48-1.html"><b>家居</b></a> | <a href="http://bbs.52dengzhou.com/forum-house-1.html"><font color='#E11'>楼市</font></a> | <a href="http://bbs.52dengzhou.com/forum-49-1.html">车友</a> | <a href="http://bbs.52dengzhou.com/forum-44-1.html">上班蚁族</a>
</li>
</ul>
</div>
<div class="nav_menu1 nav_bm">
<ul>
<li>
<a href="http://fenlei.52dengzhou.com"><b>分类信息</b></a> | <a href="http://bbs.52dengzhou.com/forum-52-1.html"><font color='#E11'>房屋租售</font></a> | <a href="http://bbs.52dengzhou.com/forum-53-1.html">二手交易</a> | <a href="http://bbs.52dengzhou.com/forum-51-1.html">招聘求职</a>
</li>
<li>
<a href="http://bbs.52dengzhou.com/forum-54-1.html"><b>商家信息</b></a> | <a href="http://bbs.52dengzhou.com/forum.php?mod=forumdisplay&fid=54&filter=typeid&typeid=59"><font color='#E11'>促销打折</font></a> | <a href="http://bbs.52dengzhou.com/forum.php?mod=forumdisplay&fid=54&filter=typeid&typeid=60">团购购物</a> | <a href="#">生活服务</a>
</li>
</ul>
</div>
<div class="nav_menu1 nav_hy">
<ul>
<li>
<a href="http://bbs.52dengzhou.com/userapp.php"><b>玩游戏</b></a> | <a href="javascript:;"><font color='#E11'>影视</font></a> | <a href="http://52dengzhou.com/home.php?mod=task">任务</a> | <a href="javascript:;">每日签到</a>
</li>
<li>
<a href="http://52dengzhou.com/home.php?mod=medal"><b>领勋章</b></a> | <a href="http://bbs.52dengzhou.com/forum-59-1.html"><font color='#E11'>交友</font></a> | <a href="http://52dengzhou.com/home.php?mod=magic">道具</a> | <a href="http://bbs.52dengzhou.com/forum-40-1.html">积分商城</a>
</li>
</ul>
</div>
</div>

复制代码

安装方法1：将上面代码拷贝在后台 - 运营 - 站点广告，选择二级导航广告位，以HTML代码广告形式。

安装方法2：将上面代码拷贝在当然模板 - header.htm文件 “”这行代码之上；

说明：请将压缩包内图片放在当前图片存放目录内。懂的可以自行改路径。

注意：
当前使用的是980px宽度，如需更改为960px或者其他，请修改css进行。

演示地址：http://bbs.52dengzhou.com

潮宅男女 · 发表于 2012-10-8 14:37:50

提示: 作者被禁止或删除内容自动屏蔽

aaaa56 · 发表于 2012-10-8 17:30:45

提示: 作者被禁止或删除内容自动屏蔽

zhzh8015 · 发表于 2012-10-9 15:33:07

不错的主题哦~！！

冰蓝小影 · 发表于 2012-10-9 16:28:19

不错蛮实用的啊

heyanan1106 · 发表于 2012-10-9 16:31:20

这个不错收藏了

zhzh8015 · 发表于 2012-10-10 16:05:07

最近貌似很热门的瀑布流支持一个

恶魔化个 · 发表于 2012-10-10 16:08:42

不错啦

		自动登录	找回密码
密码			立即注册

[发布] Discuz! X通用经典简约二级导航

本帖子中包含更多资源