很多網站在頁面頂部都會有一個信息欄，點擊下拉框顯示網站的一些信息，顯示最多的是在線客户，聯繫方式等等。今天我們也來添加一個頂部信息欄，來展示網站的一些信息，最重要的是再次向朋友們展示我們的微信公眾號。

做網站最頭疼的莫過於瀏覽器兼容性的問題，對於大多數標準的 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. }