ss超级精美头部横向下拉导航

sunfu_zen · 发表于 2010-1-7 18:16:39

本帖最后由 sunfu_zen 于 2010-01-08 14:52 编辑

超级精美头部横向下拉导航条：

我花了3天时间才制作成的头部横向下拉导航条（适合任何SupeSite版本）只要您跟着教程做就可以

大家先看看效果图再说：

下面是演示地址先看看效果，如果喜欢就再看下面的教程，不喜欢的话免得浪费您的时间
演示地址:  http://www.windows7mh.com/

演示：http://www.windows7mh.com/ 论坛禁止了外部链接大家只能复制地址到浏览器地址栏看演示了

header头部下拉导航说明：

原版的ss导航是做在一级二级三级模板里的包括主页模板，header头部是没有导航的。

  我的原理是去掉了所有ss 一二三级加主页模板的导航代码，只要把我的导航代码加在一个header模板里就ok。

因为不管哪个页面都是要调用头部模板的所以我们只要在header模板里加导航代码就行了。

经过我多次的修改现在已经非常完美了：你的网站logo还是在原来的位置，头部广告位还在只不过我改到了导航条下了（看修改图你就知道了）

我效果图里每个频道的图片是不一样的。那就是头部广告位（在后台加就ok）只不过我没放广告是加了频道图片。

如果还想要原来的广告位置也是可以的，那就要你自己修改了：就是去掉我做的搜索条和右上角的链接，然后再header模板里加上你的广告调

用代码就行了，具体的后面教程说明。

  导航优点：

  1：美不美观我自己就不说了大家自己看

  2：增加了一个广告位

  3：快速导航比原来的ss导航快捷方便了

  缺点：
  1：不能自动调用二级菜单，所以这里只能大家修改header模板里的菜单链接了（也就是说如果你后台增加了频道你就要手动修改header里的链接）

  2：需要修改SS所有首页1、2、3级模版（也就是去除所有模版里的导航代码）

1：下面是css修改教程

templates\default\文件夹下css替换部份：

打开css文件找到下面这段代码：

/* nav style */
#nav { width:960px; overflow:hidden; margin:0 auto 10px; background:#D3EAF0; }
.main_nav { height:34px; overflow:hidden; padding-top:1px; background:#1A4963; color:#FFF; font-size:14px; }
.main_nav ul { width:94%; overflow:hidden; padding:0 0 0 1.3%; }
.main_nav ul li { float:left; margin-right:1px; }
.main_nav ul li a { float:left; display:block; padding:9px 15px; color:#FFF; }
.main_nav .current a { background:url(../images/nav_current_bg.gif) repeat-x; color:#295B72; font-weight:700; text-decoration:none!important; }
ul.ext_nav { padding:7px 12px; color:#369; line-height:1.9em; }
ul.ext_nav li { float:left; margin-right:8px; white-space:nowrap; }
ul.ext_nav a { margin-right:2px; color:#295B72; }
.order_nav { padding:7px 12px; color:#369; line-height:1.9em; }
.order_nav li { height:1.9em; overflow:hidden; }
.order_nav li a { margin-left:2px; color:#295B72; }
.order_nav em { margin-right:3px; color:#295B72; }
#contribute_op { position:absolute; top:140px; left:15px; padding:5px 15px; border:1px solid #D8D8D8; background:#F7FDFD; }
#contribute_op li { margin:2px 0; }
#contribute_op li a { color:#369;}

复制代码

把上面代码替换成以下部分

/* nav style */
.nav {width:960px; position: relative; margin:0px auto;
background: url(../images/nav_bg.png) no-repeat 0 -36px;
}
.navinner {
background: url(../images/nav_bg.png) no-repeat 100% -72px;
}
.navlist {
height: 36px;
line-height: 36px;
overflow: hidden;
margin: 0 10px;
background: url(../images/nav_bg.png) repeat-x 0 0;
}
.nav li {
float: left;
display: inline;
margin: 0 0 0 -2px;
padding: 0 4px 0 6px;
background: url(../images/nav_bg.png) no-repeat 0 -108px;
}
.nav a {
display: block;
width: 110px;
text-align: center;
font-size: 120%;
}
.nav a:link, .nav a:visited {
color: #fff;
}
.nav a.current, .nav a:hover, .nav a:active {
color: #fff;
font-weight: bold;
background: url(../images/nav_bg.png) no-repeat 50% -144px;
}
.subnav {
position: absolute;
top: 41px;
left: 0;
float: left;
height: 27px;
line-height: 27px;
white-space: nowrap;
background: url(../images/nav_bg.png) no-repeat 0 -180px;
}
* html .subnav {
margin: 0 10px 0 -10px; /* IE 6 and below */
}
.subnav p {
padding: 0 10px;
background: url(../images/nav_bg.png) no-repeat 100% -234px;
}
.subnav p span {
display: block;
background: url(../images/nav_bg.png) repeat-x 0 -207px;
}
.subnav p.pointer {
position: absolute;
top: -4px;
left: 0;
height: 5px;
width: 11px;
padding: 0;
margin-left: 20px;
text-indent: -999em;
background: url(../images/nav_bg.png) repeat-x 0 -261px;
}
.subnav a {
display: inline;
padding: 0;
font-size: 100%;
}
[class~="subnav"] a {
padding: 0 3px;
}
.subnav, .subnav a:link, .subnav a:visited {
color: #235e99;
}
.subnav a:hover, .subnav a:active {
color: #235e99;
}
.subnav a:hover, .subnav a:active {
font-weight: normal;
background: none;
border-bottom: 2px solid;
}
/* subnav position and pointer position */
#subnav1 { left: 125px; }
#subnav2 { left: 250px; }
#subnav3 { left: 360px; }
#subnav4 { left: 480px; }
#subnav5, #subnav6, #subnav7 {
left: auto;
right: 0px;
}
#subnav1 .pointer { left: 40px; }
#subnav2 .pointer { left: 35px; }
#subnav3 .pointer { left: 40px; }
#subnav4 .pointer { left: 40px; }
#subnav5 .pointer { left: auto; right: 310px; }
#subnav6 .pointer { left: auto; right: 190px; }
#subnav7 .pointer { left: auto; right: 80px; }
#subnav1, #subnav2, #subnav3, #subnav4 {
min-width: 110px;
}
#subnav5 { min-width: 340px; }
#subnav6 { min-width: 240px; }
#subnav7 { min-width: 130px; }
/* Note
==========================================================*/
.note {
margin: 0 15px 10px;
color:#666666;
}
.note span{
float:right;
}
.disable {
display: none;
}

复制代码

再修改下广告位的高度

/* header style */
#header { width:980px; height:60px; overflow:hidden; margin:0px auto; }

复制代码

还有就是你要根据自己现在网站的样式再修改一下上面的代码，比如导航的宽度颜色等等。。。这里就不多说了

保存css文件 ok

2：导航样式调用图片：

下载nav_bg.rar附件解压到templates\default\images文件夹下就可以了

3：header模板修改

下载并打开header模板把我的频道名字和链接地址改成你的

<li><a href=到</a>是修改一级目录（修改成你的）

<p><span> <a href=到</span></p>是二级目录（同样修改成你的二级菜单）

{S_URL}/ 代表首页地址，你只要在这后面加链接地址就行就是域名后的那段就行

如果不想要头部搜索条的就去掉下面这段代码：

<form action="{S_URL}/batch.search.php" method="post">
<input type="hidden" name="formhash" value="" />
<input type="hidden" name="searchname" id="searchname" value="subject" />
<p class="footer_search">
<select name="searchtxt" id="searchtxt" onChange="changetype();">
<option value="标题">标题</option>
<option value="内容">内容</option>
<option value="作者">作者</option>
</select>
<input class="input_tx" type="text" value="" name="searchkey" size="30"/>
<input type="submit" value="搜索" name="searchbtn" class="input_search"/>
</p>
</form>
</div>
<script language="javascript">
function changetype() {
if($('searchtxt').value == '标题') {
$('searchname').value = 'subject';
}else if($('searchtxt').value == '内容') {
$('searchname').value = 'message';
}else if($('searchtxt').value == '作者') {
$('searchname').value = 'author';
}
}
</script>
</div>

复制代码

如果想在这位置加广告的就把你的广告调用代码替换掉上面的代码（并删除下面的这段代码）

不想要收藏本站和设为首页的删除下面这段代码：

<a href="http://translate.google.com/translate?hl=zh-cn&sl=zh-CN&tl=en&u=http%3A%2F%2Fwww.windows7mh.com"><img src="/images/english.gif" width="16" height="11" border="0" /> English</a>
| <a href="mailto:543944247@qq.com">联系我们</a> |
<a onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.windows7mh.com')"href="http://www.windows7mh.com/">设为首页</a> |
<a href="javascript:window.external.AddFavorite('http://www.windows7mh.com/','windows资源网')">收藏本站</a>
</div>

复制代码

一切修改完成保存
最后把header.html.php替换到templates\default文件夹下

教程最后部分：

打开你templates\default文件夹

把这文件夹里的所有php文件复制出来修改

修改如下：
用文本打开每个php文件

查找：<div id="nav">
把<div id="nav">到的这段代码删除保存就行了
上面这段代码就是ss原来的导航代码，我们已经在头部加导航了所以不需要这个原来的代码了。大家放心删除

把所有你修改好的php替换到templates\default文件夹下

上面说的是所有php文件是对的，你没有看出错。只有几个php文件不带导航代码查找不到：<div id="nav">代码的php文件就不要修改

教程就到这结束了。。

上面的最后两张图片是右侧4级导航，这个教程明天给大家今天就到这。

演示网站：http://www.windows7mh.com/ 论坛禁止了外部链接大家只能复制地址到浏览器地址栏看演示了

下载不了附件的请联系QQ:983533004
我建议大家先看看演示再决定是否用我的模板。

cctao · 发表于 2010-1-7 19:16:41

连个演示都没。。。估计没人下哦。

kingtung · 发表于 2010-1-7 20:40:00

谢谢，今天的分已经送完了
明天再来给你加分

挥舞的魔鬼 · 发表于 2010-1-8 11:24:02

漂亮！！

q344617263 · 发表于 2010-1-9 21:38:02

不行啊，我照你的方法做了，前台是达到这种效果了，但是进入个人中心就显示不出

q344617263 · 发表于 2010-1-9 23:58:15

我照LZ的方法修改之后
前台成功改好

但是进个人中心

就这样了

怎么解决??????

q344617263 · 发表于 2010-1-9 23:59:05

对了，我的ss是7.5版本的

mazhiqi · 发表于 2010-1-10 16:25:16

我照LZ的方法修改之后
前台成功改好

但是进个人中心

就这样了

怎么解决??????
q344617263 发表于 2010-01-09 23:58

个人中心要改cp_header的php文件改的方法基本同header的方法

q344617263 · 发表于 2010-1-10 16:29:45

个人中心要改cp_header的php文件改的方法基本同header的方法
mazhiqi 发表于 2010-01-10 16:25

我照你的方法改了cp—header文件，导航条是出现了，但是边缘还是有字

另外导航条下的广告条显示不出

mazhiqi · 发表于 2010-1-10 16:43:42

本帖最后由 mazhiqi 于 2010-01-10 16:47 编辑

在CP_开头的几个php （cp_header除外）文件里的头上的导航内容都去掉就行了然后上面加个调用cp_header的命令

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

[教程] ss超级精美头部横向下拉导航