很多网站在页面顶部都会有一个信息栏，点击下拉框显示网站的一些信息，显示最多的是在线客户，联系方式等等。今天我们也来添加一个顶部信息栏，来展示网站的一些信息，最重要的是再次向朋友们展示我们的微信公众号。

做网站最头疼的莫过于浏览器兼容性的问题，对于大多数标准的 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. }