模板制作修改 Discuz X3.2 快捷导航美化,挺漂亮的

  [复制链接]
DiscuzUI 发表于 2014-8-28 20:41:08 [模板制作修改] 显示全部楼层 |阅读模式 上一主题 下一主题

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
本帖最后由 discuzUI 于 2014-8-28 20:50 编辑

废话不说,先上上图!注意:本美化适用于默认模板,由于二次开发不会,所以就放上代码吧!

捕获1.PNG 捕获2.PNG 捕获3.PNG 捕获4.PNG
Step:1 打开template/default/common/head.htm,找到{lang my_nav}并删除
Step:2 打开template/default/common/common.css,查找#qmenu,把大概是649~659行与Qmenu有关的部分换成一下代码:
  1.                                 #qmenu { float: right; display: inline; margin: 15px 8px 0; padding-right: 10px; width: 18px; height: 18px; background: url({IMGDIR}/qmenu.png) no-repeat 0 0; overflow: hidden; }
  2.                                         #qmenu:hover { text-decoration: none; }
  3.                                         #qmenu.a { position: relative; z-index: 302; background: url({IMGDIR}/qmenu.png) no-repeat 0 0; }
  4.                                 #qmenu_menu { margin-top: 5px; padding: 15px 5px 10px; width: 242px; border: 1px soild #E3E3E4; }
  5.                                         #qmenu_menu ul.nav li { float: left; }
  6.                                                 .ie6 #qmenu_menu ul.nav li { clear: none !important; width: auto !important; }
  7.                                         #qmenu_menu ul.nav a { margin: 5px 5px 15px 20px; padding: 35px 0 0; width: 30px; border: none; border-radius: 4px; background: url({IMGDIR}/noicon.gif) no-repeat 4px 5px; text-align: center; }
  8.                                                 #qmenu_menu ul.nav a:hover { background-position: -26px 5px; color: {HIGHLIGHTLINK}; text-shadow: none; }
复制代码
Step:3 (如果开启了多种扩展配色,请进行这一步,注意位置不要搞错!)
  • t1(红色):打开template/default/style/t1/style.css,在任意位置插入以下代码:
    1. /* 重定义快捷导航 */
    2. #qmenu_menu ul.nav a:hover { background-position: -146px 5px; color:#BA350F; text-shadow: none; }
    复制代码

  • t2(绿色):打开template/default/style/t2/style.css,在任意位置插入以下代码:
    1. /* 重定义快捷导航 */
    2. #qmenu_menu ul.nav a:hover { background-position: -56px 5px; color:#429296; text-shadow: none; }
    复制代码

  • t3(橙色):打开template/default/style/t3/style.css,在任意位置插入以下代码:
    1. /* 重定义快捷导航 */
    2. #qmenu_menu ul.nav a:hover { background-position: -86px 5px; color:#FE9500; text-shadow: none; }
    复制代码
  • t4(紫色):打开template/default/style/t4/style.css,在任意位置插入以下代码:
    1. /* 重定义快捷导航 */
    2. #qmenu_menu ul.nav a:hover { background-position: -116px 5px; color:#9934B7; text-shadow: none; }
    复制代码
  • t5(蓝色):打开template/default/style/t5/style.css,在任意位置插入以下代码:
    1. /* 重定义快捷导航 */
    2. #qmenu_menu ul.nav a:hover { background-position: -26px 5px; color: {HIGHLIGHTLINK}; text-shadow: none; }
    复制代码

Step:4 打开template/default/common/header_qmenu.htm,查找以下代码并删除
  1.         <!--{if $_G['setting']['showfjump']}--><div id="fjump_menu" class="btda"></div><!--{/if}-->
复制代码
Step:5  开启相关功能(全局 - 站点功能 - 功能模块),然后后台修改图片即可(界面 - 导航设置 - 快捷导航 - 编辑相关的导航)


图片只提供一些常用的图片,图片可能长的比较丑!与多配色有关!(放在static/image/feed目录下,其中qmeun.png放在static/image/common目录下)


捕获.PNG


游客,如果您要查看本帖隐藏内容请回复


参与人数 3元宝 +10 帮币 +6 收起 理由
北石电脑 + 5 赞一个!
422154044 + 1 赞一个!
ARCHY + 10 赞一个!

查看全部评分总评分 : 元宝 +10 帮币 +6





上一篇:分享款vip页面引导页
下一篇:导航上加入搜索条!挺实用的

大神点评102

 楼主| DiscuzUI 发表于 2014-9-5 21:26:29 [模板制作修改] 显示全部楼层
编辑一下:是header.htm
 楼主| DiscuzUI 发表于 2014-8-28 20:45:00 [模板制作修改] 显示全部楼层
原创教程啊!打字实在是累啊!喜欢就给点分憋!
 楼主| DiscuzUI 发表于 2014-8-29 22:45:39 [模板制作修改] 显示全部楼层
啊啊啊!顶起来,感谢站长审核
小小军 发表于 2014-8-31 09:17:56 [模板制作修改] 显示全部楼层
Discuz X3.2 快捷导航美化0
青盏一座 发表于 2014-8-31 11:11:14 [模板制作修改] 显示全部楼层
谢谢喽
735837927 发表于 2014-8-31 15:10:51 [模板制作修改] 显示全部楼层
看看大大
yxtt 发表于 2014-9-1 09:48:51 [模板制作修改] 显示全部楼层
快捷导航美化
geci 发表于 2014-9-2 10:51:36 [模板制作修改] 显示全部楼层
zgycgc  支持
小乃哥丶 发表于 2014-9-2 17:59:45 [模板制作修改] 显示全部楼层
文件好像都找不到
因为寂寞 发表于 2014-9-2 21:40:14 [模板制作修改] 显示全部楼层
请问这个head.htm,在common文件夹里找不到怎么回事?
wulintang 发表于 2014-9-3 16:58:02 [模板制作修改] 显示全部楼层
Discuz X3.2 快捷导航美化,挺漂亮的
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

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