零基礎建站培訓教程介紹

當前位置:

如何將PC站導航改造成響應式導航欄

現在都流行響應式網站,它可以自動響應PC端與手機端。對于很多以前的PC站,網站上的導航欄只能適應于電腦端瀏覽,在手機瀏覽時就會出現錯位。(相關知識:什么是響應式網站?自適應和響應式有什么區別

單一的PC站導航是這樣的:

如何將PC站導航改造成響應式導航欄

響應式導航欄是這樣的:

如何將PC站導航改造成響應式導航欄

為了適應手機端的顯示,我們在做網站時可以把PC站導航轉化成響應式導航欄。下面學做網站論壇介紹一下響應式導航欄制作方法。

方法/步驟

  1. 為了制作手機響應式導航欄不影響PC端導航欄,我們需要將手機響應式導航欄單獨做一個CSS文件,命名為wap.css;
  2. 在頭部代碼里使用以下的代碼進行引入:(這里用法可參考教程:怎樣將PC網站改為自適應網站
    <link href="images/wap.css" type="text/css" rel="stylesheet" media="screen and (max-width:768px)">
  3. 制作響應式導航欄使用原理就是在手機狀態下隱藏導航欄,所以需要在wap.css中寫上隱藏導航欄的DIV的樣式;
    #nav{display:none;}
  4. 在網站導航欄代碼下方添加一個手機端按鈕的空DIV,用于顯示手機端導航欄點擊按鈕;
    <div class="mb_bar"></div>
  5. 在wap.css中,給點擊按鈕添加一個樣式,用于顯示按鈕;
    .mb_bar{/*代碼來源:學做網站論壇http://www.gilqab.tw/*/display:block;border: none; width: 40px; height: 40px;text-indent: -900em; overflow: hidden; position: absolute;top: 25px;right: 2%;cursor: pointer;outline: none;background: #0a5fb7 url(menu-button-bg.png) no-repeat center center; background-size: 50%;z-index:99;border-radius:5px;}
  6. 設置點擊按鈕顯示菜單,再點擊隱藏菜單的效果。(注意:自動下載jquery.min.js和修改DIV名稱)
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/images/jquery.min.js"></script>
    <script>
        $(document).ready(function(e) {
    ?   $(".mb_bar").click(function(e) {
    ?       $(".mb_meau").toggle(200);
    ?   });
    });
    </script>
  7. 最后還要修改手機導航樣式為縱向排列,很簡單,只需要在wap.css中,控制它們的顯示樣式即可。
    .mb_meau{margin: 5px 0 0 0;position: absolute;width: 50%;height:auto;right:0;background:#0a5fb7;z-index:88;}
    .mb_meau li{display:block;line-height:3em;text-align:left;text-indent:5%;  border-top: 1px solid #0576ec; border-bottom: 1px solid #0053aa;}
    .mb_meau li a{color:#fff;}
  8. ?通過以上的幾步操作,就可以將單一PC站導航改造成PC+手機站的響應式導航欄了。

發表評論

電子郵件地址不會被公開。 必填項已用*標注

學做網站論壇零基礎學建網站課程
新疆25选7基本走势图