很多網站在頁面頂部都會有一個資訊欄，點選下拉框顯示網站的一些資訊，顯示最多的是線上客戶，聯絡方式等等。今天我們也來新增一個頂部資訊欄，來展示網站的一些資訊，最重要的是再次向朋友們展示我們的微信公眾號。

做網站最頭疼的莫過於瀏覽器相容性的問題，對於大多數標準的 web 瀏覽器，高效能的瀏覽器是沒有任何問題，而一些不標準，效能差的瀏覽器就得花時間。

IE，是解決瀏覽器相容性的一大頭，而隨著 IE 版本的更新，大多數樣式是相容的。最可怕的是還有那麼多人還用著 IE6，鄙視，所以我們要推薦朋友們使用高效能、標準的 web 瀏覽器。

說了些費話，不過也是筆者新增頂部下拉資訊欄的初衷。本例項並不難，用 jquery 實現資訊欄的張開與收縮動畫，加上一些要簡單的 html 程式碼，配上 CSS 樣式，完成了。

對於網站的使用者來說，如果預設顯示 WP 工具欄，又顯示資訊欄，疊在一起，有點累，所以新增了一段 php 程式碼，使用者登入後就隱藏這段 html 程式碼。

新增到頭部檔案中，或者也可以新建一個自定義的 php 檔案，再用<?php include('custom_info.php'); ?> 包括進來。

  1. <!--頂部下拉資訊欄，php 程式碼的意思是：如果是網站使用者就隱藏其中的程式碼。-->
  2. <?php global $user_ID; if (!$user_ID) : ?>
  3. <div class="infomain">
  4.   <div class="infobar">
  5.     <div class="info_con"> <a href="#"><img src="logo 連結地址"></a>
  6.       <p> 一片個人興趣愛好的雪域，遠方有我最嚮往的地方，雪山巍峨聳立在她的懷抱。</p>
  7.       <img src="微信二維碼連結地址">
  8.       <p> 推薦使用 Opera 、 Chrome 、 Firefox 、 Safari 等高效能瀏覽器！</p>
  9.     </div>
  10.   </div>
  11.   <div class="tog" id="tog"> <span></span> </div>
  12. </div>
  13. <?php endif; ?>
  14. <!--頂部下拉資訊欄 end-->

新增下面的 js 到自定義 js 檔案中，前提是主題要載入 jquery.min.js 或其它版本的 jquery 。 「top:'457px'」 為下拉的高度，「320」 為下拉時的速度。

  2. $(function(){
  3.             $('#tog').toggle(function(){
  4.                 $(this).animate({top:'457px'},320).addClass("togclose").removeClass("tog").html('<span></span>');
  5.                 $('.infobar').slideDown(320);
  6.             },function(){
  7.                 $(this).animate({top:'0px'},320).addClass("tog").removeClass("togclose").html('<span></span>');
  8.                 $('.infobar').slideUp(320);
  9.             })
  10. })

最後在主題樣式檔案中新增 CSS：

  2. .tog,.togclose {
  3.     width:100%;
  4.     position:absolute;
  5.     z-index:1000;
  6.     cursor:pointer;
  7.     border-top: 4px solid #000;
  8.     opacity: 0.6;
  9. }
  10. .tog span,.togclose span {
  11.     width: 40px;
  12.     height: 40px;
  13.     display: block;
  14.     position: absolute;
  15.     top: 0;
  16.     rightright:0;
  17. }
  18. .tog span {
  19.     background: url(images/tog.png) no-repeat 0px 0px;
  20. }
  21. .togclose span {
  22.     background: url(images/tog.png) no-repeat -40px 0px;
  23. }
  24. .infomain{
  25.     position: fixed;
  26.     width: 100%;
  27. }
  28. .infobar {
  29.     width:100%;
  30.     position:absolute;
  31.     z-index:999;
  32.     display:none;
  33.     background: #3275a8;
  34. }
  35. .info_con {
  36.     color: #ddd;
  37.     margin:20px 0;
  38.     text-align: center;
  39. }
  40. .info_con a{
  41.     display: block;
  42.     height: 65px;
  43.     width: 321px;
  44.     margin: 0 auto;
  45. }
  46. .info_con a,.info_con p,.info_con img{
  47.     margin-bottom: 20px;
  48. }