discuz如何在导航上加入搜索条！挺实用的

学习NO.1

感觉像是模仿Phpwind 9的，先上上图吧！注意：非官方默认模板的修改方法大概一致，请谨慎修改




Step：1  打开template/default/common/common.css，找到以下代码，大概在595~607的位置

1. #scbar { overflow: hidden; height: 42px; line-height: 42px; border-top: 1px solid #FFF; border-bottom: 1px solid #E9EFF5; background: #E8EFF5; }
   
2.                                 .scbar_icon_td { width: 21px; background: url({IMGDIR}/search.png) no-repeat 0 -50px; }
   
3.                                 .scbar_txt_td, .scbar_type_td { background: url({IMGDIR}/search.png) repeat-x 0 -93px; }
   
4.                                         #scbar_txt { width: 400px; border: 1px solid #FFF; outline: none; }
   
5.                                         .scbar_narrow #scbar_txt { width: 260px; }
   
6.                                 .scbar_btn_td { width: 38px; background: url({IMGDIR}/search.png) no-repeat 8px -142px; }
   
7.                                         #scbar_btn { margin: 0; padding: 0; border: none; background: transparent none; box-shadow: none; }
   
8.                                                 #scbar_btn strong { line-height: 84px; }
   
9.                                 .scbar_type_td { width: 61px; background: url({IMGDIR}/search.png) no-repeat 0 -193px; }
   
10.                                         #scbar_type { display: block; padding-left: 10px; text-align: left; text-decoration: none; }
    
11.                                                 #scbar_type_menu { margin-top: -8px; }
    
12.                                 #scbar_hot { padding-left: 8px; height: 45px; overflow: hidden; }
    
13.                                         #scbar_hot strong, #scbar_hot a { float: left; margin-right: 8px; white-space: nowrap;

复制代码

将其替换为以下代码：

1. .scbar{ float:left; margin-top:11px; margin-left:10px; margin-right:10px; width:181px; overflow:hidden;}
   
2.                                 #scbar{height: 26px; line-height:26px; border: none; border-radius: 5px; background: #FFFFFF;}        
   
3.                                 #scbar_txt{ float: left; width: 150px; height: 26px; line-height: 26px; border: none; background: transparent; color: #444; font-size: 12px; text-indent: 5px; -webkit-transition: 0.2s width;transition: 0.2s width;}
   
4.                                 #scbar_btn{float: left; width: 18px; height: 18px; margin: 0; background: transparent url({STYLEIMGDIR}/Searchicon.png) no-repeat 0 0; border: none; text-indent: -9999px; cursor: pointer; *padding-right:5px; _padding-right:5px;}

复制代码

Step：2  打开template/default/common/header.htm，找到<!--{subtemplate common/pubsearchform}-->，并删除。之后找到<!--{hook/global_nav_extra}-->，替换为

1. <div class="scbar"><!--{subtemplate common/pubsearchform}--></div>
   
2.                                         <!--{hook/global_nav_extra}-->

复制代码

Step：3  打开template/default/common/pubsearchform.htm，将以下代码，大概在41~75的位置

1. <table cellspacing="0" cellpadding="0">
   
2.                         <tr>
   
3.                                 <td class="scbar_icon_td"></td>
   
4.                                 <td class="scbar_txt_td"><input type="text" name="srchtxt" id="scbar_txt" value="{lang enter_content}" autocomplete="off" x-webkit-speech speech /></td>
   
5.                                 <td class="scbar_type_td"><a href="javascript:;" id="scbar_type" class="xg1" onclick="showMenu(this.id)" hidefocus="true">{lang search}</a></td>
   
6.                                 <td class="scbar_btn_td"><button type="submit" name="searchsubmit" id="scbar_btn" sc="1" class="pn pnc" value="true"><strong class="xi2">{lang search}</strong></button></td>
   
7.                                 <td class="scbar_hot_td">
   
8.                                         <div id="scbar_hot">
   
9.                                                 <!--{if $_G['setting']['srchhotkeywords']}-->
   
10.                                                         <strong class="xw1">{lang hot_search}: </strong>
    
11.                                                         <!--{loop $_G['setting']['srchhotkeywords'] $val}-->
    
12.                                                                 <!--{if $val=trim($val)}-->
    
13.                                                                         <!--{eval $valenc=rawurlencode($val);}-->
    
14.                                                                         <!--{block srchhotkeywords[]}-->
    
15.                                                                                 <!--{if !empty($searchparams[url])}-->
    
16.                                                                                         <a href="$searchparams[url]?q=$valenc&source=hotsearch{$srchotquery}" target="_blank" class="xi2" sc="1">$val</a>
    
17.                                                                                 <!--{else}-->
    
18.                                                                                         <a href="search.php?mod=forum&srchtxt=$valenc&formhash={FORMHASH}&searchsubmit=true&source=hotsearch" target="_blank" class="xi2" sc="1">$val</a>
    
19.                                                                                 <!--{/if}-->
    
20.                                                                         <!--{/block}-->
    
21.                                                                 <!--{/if}-->
    
22.                                                         <!--{/loop}-->
    
23.                                                         <!--{echo implode('', $srchhotkeywords);}-->
    
24.                                                 <!--{/if}-->
    
25.                                         </div>
    
26.                                 </td>
    
27.                         </tr>
    
28.                 </table>
    
29.         </form>
    
30. </div>
    
31. <ul id="scbar_type_menu" class="p_pop" style="display: none;"><!--{echo implode('', $slist);}--></ul>
    
32. <script type="text/javascript">
    
33.         initSearchmenu('scbar', '$searchparams[url]');
    
34. </script>
    
35. <!--{/if}-->

复制代码

替换为：

1.                 <table cellspacing="0" cellpadding="0">
   
2.                         <tr>
   
3.                                 <td><input type="text" name="srchtxt" id="scbar_txt" value="{lang enter_content}" autocomplete="off" x-webkit-speech speech /></td>
   
4.                                 <td><button type="submit" name="searchsubmit" id="scbar_btn" sc="1" class="pn pnc" value="true"></button></td>
   
5.                         </tr>
   
6.                 </table>
   
7.         </form>
   
8. </div>
   
9. <ul id="scbar_type_menu" class="p_pop" style="display: none;"><!--{echo implode('', $slist);}--></ul>
   
10. <script type="text/javascript">
    
11.         initSearchmenu('scbar', '$searchparams[url]');
    
12. </script>
    
13. <!--{/if}-->

复制代码

Step：4  将图片上传到static/image/common目录下，请不要更改大小写
Searchicon.zip (552 Bytes, 下载次数: 20)

2015-3-15 00:49 上传

点击文件名下载附件

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！ 如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！