设为首页收藏本站
切换到宽版

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

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
Discuz!官方免费开源建站系统»论坛 › 增值产品交流与讨论 › UCenter Home 专区 › UCenter Home-模板插件 › ###给网站左边航导增加伸缩功能详细教程### ...
123下一页
返回列表 发新帖

###给网站左边航导增加伸缩功能详细教程###

[复制链接]
arnol 发表于 2009-4-3 06:26:14 | 显示全部楼层 |阅读模式
本帖最后由 arnol 于 2009-4-3 09:33 编辑

首先感谢原作者提供了代码，原贴地址：https://discuz.dismall.com/thread-1190219-1-1.html
但是作者写得并不详细，或许大家操作的时候会遇到些问题，在这里我重新写一个详细的教程，希望能给大家带来帮助。
先来看下效果图：



下面来具体操作，新建一个文本文档，粘贴以下代码：
document.writeln("<SCRIPT LANGUAGE=\"JavaScript\">");
document.writeln("<!--");
document.writeln("function w(vd)");
document.writeln("{");
document.writeln("  var ob=document.getElementById(vd);");
document.writeln("  if(ob.style.display==\"block\" || ob.style.display==\"\")");
document.writeln("  {");
document.writeln("     ob.style.display=\"none\";");
document.writeln("     var ob2=document.getElementById(\'s\'+vd);");
document.writeln("     //ob2.style.background=\"\";");
document.writeln(" var img=document.getElementById(\'i\'+vd);");
document.writeln(" img.src=\"image/menuadd.gif\";");
document.writeln("  }");
document.writeln("  else");
document.writeln("  {");
document.writeln("    ob.style.display=\"block\";");
document.writeln("    var ob2=document.getElementById(\'s\'+vd);");
document.writeln("    //ob2.style.background=\"\";");
document.writeln("var img=document.getElementById(\'i\'+vd);");
document.writeln("img.src=\"image/menuminus.gif\";");
document.writeln("  }");
document.writeln("}");
document.writeln("//-->");
document.writeln("</SCRIPT>");

保存到你的UCH根目录source文件夹下，命名为：script_daohang.js
同样，再把以下代码：
document.writeln("<script >");
document.writeln("<!--");
document.writeln("function subop(obj){");
document.writeln("");
document.writeln("var tLeft = obj.offsetLeft;");
document.writeln("var tTop = obj.offsetTop + 38;");
document.writeln("while(obj=obj.offsetParent) {");
document.writeln("tLeft+=obj.offsetLeft;");
document.writeln("tTop+=obj.offsetTop;");
document.writeln("}");
document.writeln("if($(\'ucmenu\').style.display == \'none\'){");
document.writeln("$(\'ucmenu\').style.cssText = \'display:block; left:\' + tLeft + \'px; top:\' + tTop + \'px;\';");
document.writeln("}");
document.writeln("else{");
document.writeln("$(\'ucmenu\').style.cssText = \'display:none;\';");
document.writeln("}");
document.writeln("}");
document.writeln("-->");
document.writeln("</script>");

保存到你的UCH根目录source文件夹下，命名为：script_daohang1.js

打开你的头部模板文件，也就是UCH根目录下的template\default\header.htm
找到<script language="javascript" type="text/javascript" src="source/script_manage.js"></script>
也就是代码的<head>和</head>之间
下面添加<script language="javascript" type="text/javascript" src="source/script_daohang.js"></script>
找到<body>
在下面添加
<script language="javascript" type="text/javascript" src="source/script_daohang1.js"></script>

然后，在你需要伸缩导航的位置，添加以下代码
<div id="spr[/c" onclick="w('pr')" width="100%" border="0">
                <li><div class="STYLE1" id="daohang">&nbsp;&nbsp;<img id="ipr" src="image/menuminus.gif">&nbsp;&nbsp;个人中心</div>
              </li></div>
<div id="pr" style="display:block" width="100%" border="0">
中间为你想收缩的菜单内容
……………………</div>

比如说我的
在<li><img src="image/app/doing.gif"><a href="space.php?do=doing" title="心情记录">心情</a></li>之前，添加

<div id="spr" onclick="w('pr')" width="100%" border="0">
                <li>
                  <div class="daohang" id="daohang">&nbsp;&nbsp;<img id="ipr" src="image/menuminus.gif">&nbsp;&nbsp;个人中心</div>
              </li></div>
              <div id="pr" style="display:block" width="100%" border="0">

在<li><img src="image/app/netbar.gif"><a href="netbar.php" title="生活百宝箱">生活百宝箱</a></li>之后添加
</div>
也就是在你需要进行伸缩的地方用这些代码把它们扩起来。

如果你开启了漫游应用，就要找到第一个<!--{if $_SCONFIG['my_status']}-->
在它前面添加
<div id="syy" onclick="w('yy')" width="100%" border="0">
                 <li><div class="daohang" id="daohang">&nbsp;&nbsp;<img id="iyy" src="image/menuminus.gif">&nbsp;&nbsp;互动游戏                  </div>
                 </li></div>
                 <div id="yy" style="display:block" width="100%" border="0">

下移三四行，也就是在<!--{/if}-->下面添加
</div>
下移三行，也就是在<ul class="app_list2" id="my_userapp">之后添加

<div id="shd" onclick="w('hd')" width="100%" border="0">
              <li><div class="daohang" id="daohang">&nbsp;&nbsp;<img id="ihd" src="image/menuminus.gif">&nbsp;&nbsp;我的应用                  </div>
                 </li></div>
                 <div id="hd" style="display:block" width="100%" border="0">

下移三四行，也就是在<!--{/loop}-->之后添加
</div>

请注意红色文字部份！
打开UCH根目录下的template\default\style.css
在最底部添加
.daohang {
        font-size: 12px;color: #000000;background-color: #EAEAEA;background-position: center;
        text-align: left;height:auto;font-style: italic;font-weight: bold;
}
具体样式可根据自己的需要修改。
把以下两个图片下载放进你的UCH根目录下的image文件夹内


到此就算大功告成了，到后台更新缓存，再刷新一下前台看看，是不是导航可以伸缩了。本教程适用于有一定网页基础的站长。如果大家觉得我的教程写得又臭又长的，可以查看原贴：https://discuz.dismall.com/thread-1190219-1-1.html

我的小站：
友缘交友网
http://love.cxzj.com

本站PR1，欢迎PR1以上的朋友交换友情链接，广西地区的优先，呵呵！

PS：我做的是我们岑溪的地方交友站，今天早上百度了一下，搜索：友缘交友 or 岑溪交友，我的网站都排在了第一位，google搜索：友缘交友，也在第一，高兴一下，呵呵！

评分

1

查看全部评分

回复

使用道具 举报

yyxxyyxx 发表于 2009-4-3 08:20:18 | 显示全部楼层
谢谢楼主分享
回复

使用道具 举报

1006728380 发表于 2009-4-3 08:24:47 | 显示全部楼层
谢谢楼主了,帮你顶下
回复

使用道具 举报

macluv 发表于 2009-4-3 09:10:12 | 显示全部楼层
好贴！LZ够用心！顶你！
回复

使用道具 举报

zgdxs 发表于 2009-4-3 09:10:49 | 显示全部楼层
很不错的 先学习

回复

使用道具 举报

abcnic 发表于 2009-4-3 10:23:42 | 显示全部楼层
感谢分享
回复

使用道具 举报

shanghaiquan 发表于 2009-4-3 10:27:25 | 显示全部楼层
顶一个
回复

使用道具 举报

ishangwg 发表于 2009-4-6 00:36:04 | 显示全部楼层
谢谢，很需要
回复

使用道具 举报

1006728380 发表于 2009-4-6 01:31:01 | 显示全部楼层
谢谢楼主了,帮你顶下
回复

使用道具 举报

sttcw 发表于 2009-4-7 04:32:37 | 显示全部楼层
楼主你的那个风格能分享下么？ hhc83803515@126.com 谢谢
回复

使用道具 举报

下一页 »
123下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-11-16 02:15 , Processed in 0.434477 second(s), 5 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

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