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

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

我花了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文件找到下面这段代码：

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

复制代码

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

1. /* nav style */
   
2. .nav {width:960px; position: relative; margin:0px auto;
   
3. 
   
4. background: url(../images/nav_bg.png) no-repeat 0 -36px;
   
5. }
   
6. .navinner {
   
7. background: url(../images/nav_bg.png) no-repeat 100% -72px;
   
8. }
   
9. .navlist {
   
10. height: 36px;
    
11. line-height: 36px;
    
12. overflow: hidden;
    
13. margin: 0 10px;
    
14. background: url(../images/nav_bg.png) repeat-x 0 0;
    
15. }
    
16. .nav li {
    
17. float: left;
    
18. display: inline;
    
19. margin: 0 0 0 -2px;
    
20. padding: 0 4px 0 6px;
    
21. background: url(../images/nav_bg.png) no-repeat 0 -108px;
    
22. }
    
23. .nav a {
    
24. display: block;
    
25. width: 110px;
    
26. text-align: center;
    
27. font-size: 120%;
    
28. }
    
29. .nav a:link, .nav a:visited {
    
30. color: #fff;
    
31. }
    
32. .nav a.current, .nav a:hover, .nav a:active {
    
33. color: #fff;
    
34. font-weight: bold;
    
35. background: url(../images/nav_bg.png) no-repeat 50% -144px;
    
36. }
    
37. .subnav {
    
38. position: absolute;
    
39. top: 41px;
    
40. left: 0;
    
41. float: left;
    
42. height: 27px;
    
43. line-height: 27px;
    
44. white-space: nowrap;
    
45. background: url(../images/nav_bg.png) no-repeat 0 -180px;
    
46. }
    
47. * html .subnav {
    
48. margin: 0 10px 0 -10px; /* IE 6 and below */
    
49. }
    
50. .subnav p {
    
51. padding: 0 10px;
    
52. background: url(../images/nav_bg.png) no-repeat 100% -234px;
    
53. }
    
54. .subnav p span {
    
55. display: block;
    
56. background: url(../images/nav_bg.png) repeat-x 0 -207px;
    
57. }
    
58. .subnav p.pointer {
    
59. position: absolute;
    
60. top: -4px;
    
61. left: 0;
    
62. height: 5px;
    
63. width: 11px;
    
64. padding: 0;
    
65. margin-left: 20px;
    
66. text-indent: -999em;
    
67. background: url(../images/nav_bg.png) repeat-x 0 -261px;
    
68. }
    
69. .subnav a {
    
70. display: inline;
    
71. padding: 0;
    
72. font-size: 100%;
    
73. }
    
74. [class~="subnav"] a {
    
75. padding: 0 3px;
    
76. }
    
77. .subnav, .subnav a:link, .subnav a:visited {
    
78. color: #235e99;
    
79. }
    
80. .subnav a:hover, .subnav a:active {
    
81. color: #235e99;
    
82. }
    
83. .subnav a:hover, .subnav a:active {
    
84. font-weight: normal;
    
85. background: none;
    
86. border-bottom: 2px solid;
    
87. }
    
88. /* subnav position and pointer position */
    
89. #subnav1 { left: 125px; }
    
90. #subnav2 { left: 250px; }
    
91. #subnav3 { left: 360px; }
    
92. #subnav4 { left: 480px; }
    
93. #subnav5, #subnav6, #subnav7 {
    
94. left: auto;
    
95. right: 0px;
    
96. }
    
97. #subnav1 .pointer { left: 40px; }
    
98. #subnav2 .pointer { left: 35px; }
    
99. #subnav3 .pointer { left: 40px; }
    
100. #subnav4 .pointer { left: 40px; }
     
101. #subnav5 .pointer { left: auto; right: 310px; }
     
102. #subnav6 .pointer { left: auto; right: 190px; }
     
103. #subnav7 .pointer { left: auto; right: 80px; }
     
104. #subnav1, #subnav2, #subnav3, #subnav4 {
     
105. min-width: 110px;
     
106. }
     
107. #subnav5 { min-width: 340px; }
     
108. #subnav6 { min-width: 240px; }
     
109. #subnav7 { min-width: 130px; }
     
110. /* Note
     
111. ==========================================================*/
     
112. .note {
     
113. margin: 0 15px 10px;
     
114. color:#666666;
     
115. }
     
116. .note span{
     
117. float:right;
     
118. }
     
119. .disable {
     
120. display: none;
     
121. }

复制代码

再修改下广告位的高度

1. /* header style */
   
2. #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}/ 代表首页地址，你只要在这后面加链接地址就行就是域名后的那段就行
  
如果不想要头部搜索条的就去掉下面这段代码：

1. <form action="{S_URL}/batch.search.php" method="post">
   
2.                 <input type="hidden" name="formhash" value="<!--{eval echo formhash();}-->" />
   
3.                 <input type="hidden" name="searchname" id="searchname" value="subject" />
   
4.                 <p class="footer_search">
   
5.                         <select name="searchtxt" id="searchtxt" onChange="changetype();">
   
6.                                 <option value="标题">标题</option>
   
7.                                 <option value="内容">内容</option>
   
8.                                 <option value="作者">作者</option>
   
9.                         </select>
   
10.                         <input class="input_tx" type="text" value="" name="searchkey" size="30"/>
    
11.                         <input  type="submit" value="搜索" name="searchbtn" class="input_search"/>
    
12.                 </p>
    
13.                 </form>
    
14. </div><!--footer end-->
    
15. <script language="javascript">
    
16. function changetype() {
    
17.         if($('searchtxt').value == '标题') {
    
18.                 $('searchname').value = 'subject';
    
19.         }else if($('searchtxt').value == '内容') {
    
20.                 $('searchname').value = 'message';
    
21.         }else if($('searchtxt').value == '作者') {
    
22.                 $('searchname').value = 'author';
    
23.         }
    
24. }
    
25. </script>
    
26. </div>

复制代码

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


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

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

复制代码

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

教程最后部分：

打开你templates\default文件夹

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

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

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

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

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

教程就到这结束了。。

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

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

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

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

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

漂亮！！

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

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

但是进个人中心

就这样 了




怎么解决??????

对了，我的ss是7.5版本的

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

但是进个人中心

就这样 了




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

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

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

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



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

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