4-6. Sidebar 的設計

參考：W3.CSS 的 Sidebar設計 的介紹

參考：W3.CSS 的 Sidebar設計 的範例

參考範例加以修改

<!-- Sidebar -->
<div class="w3-sidebar w3-bar-block w3-border-right w3-animate-left" 
        style="z-index:9999; display:none" id="mySidebar">
  <button onclick="w3_close()" class="w3-bar-item w3-xlarge" 
        style="cursor:pointer; margin-bottom:20px;">Close ×</button>
        
  <a href="index.html"   class="w3-bar-item w3-button"><i class="fa fa-bookmark"></i> 發燒車訊</a>
  <a href="movie.html"   class="w3-bar-item w3-button"><i class="fa fa-bookmark"></i> 影片介紹</a>
  <a href="racing.html"  class="w3-bar-item w3-button"><i class="fa fa-bookmark"></i> 全球賽事</a>
  <a href="show.html"    class="w3-bar-item w3-button"><i class="fa fa-bookmark"></i> 新車展場</a>
  <a href="contact.html" class="w3-bar-item w3-button"><i class="fa fa-bookmark"></i> 留言聯絡</a>
  <a href="javascript:;" class="w3-bar-item w3-button"><i class="fa fa-bookmark"></i> 品牌資訊</a>
</div>        

<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()"><i class="fa fa-bars"></i></a>

  <!-- 桌機版呈現項目 -->
  ........................

修改 SCRIPT 程式

<script>
function w3_open() {
    document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
    document.getElementById("mySidebar").style.display = "none";
}
</script>         

接著加以設計 CSS 樣式