4-5. Navigation Bars 的設計

參考：W3.CSS 的 Navigation Bars 的介紹

參考：符合RWD 的 Navigation Bars 的範例

參考範例加以修改

<div class="w3-bar w3-top w3-dark-grey ts-bg-dark ts-flexbox ts-flex-center">

  <!-- 手機版顯示選單的控制按鈕 -->
  <a href="javascript:void(0)" class="w3-button w3-right w3-circle w3-gray w3-large w3-hide-large" 
     onclick="w3_open_menu()"><i class="fa fa-bars" aria-hidden="true"></i></a>

  <!-- 桌機版呈現項目 -->
  <a href="#" class="w3-bar-item"><img class="logo" src="images/logo.png" alt=""></a>

  <div class="w3-hide-small w3-hide-medium">
    <a href="index.html" class="w3-bar-item w3-button">發燒車訊</a>
    <a href="movie.html" class="w3-bar-item w3-button">影片介紹</a>
    <a href="racing.html" class="w3-bar-item w3-button">全球賽事</a>
    <a href="show.html" class="w3-bar-item w3-button">新車展場</a>
    <a href="contact.html" class="w3-bar-item w3-button">留言聯絡</a>
    <a href="brand.html" class="w3-bar-item w3-button">品牌資訊</a>
  </div>

  <div class="shareBtnArea">
    <a href="#" class="w3-bar-item"></a>
    <a href="#" class="w3-bar-item"></a>
    <a href="#" class="w3-bar-item"></a>
    <a href="#" class="w3-bar-item"></a>
    <a href="#" class="w3-bar-item"></a>
  </div>

  <!-- 手機版呈現項目 -->
  <div id="handMenu" class="w3-bar-block w3-dark-grey w3-hide w3-hide-large">
    <a href="#" class="w3-bar-item w3-button">發燒車訊</a>
    <a href="#" class="w3-bar-item w3-button">影片介紹</a>
    <a href="#" class="w3-bar-item w3-button">全球賽事</a>
    <a href="#" class="w3-bar-item w3-button">新車展場</a>
    <a href="#" class="w3-bar-item w3-button">留言聯絡</a>
    <a href="#" class="w3-bar-item w3-button">品牌資訊</a>
  </div>

</div>

加上 SCRIPT 程式

<script>
function w3_open_menu() {
    var x = document.getElementById("handMenu");
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else { 
        x.className = x.className.replace(" w3-show", "");
    }
}
</script>         

接著加以設計 CSS 樣式