大家好，我是長風青雲，今天是第十六天～
今天我們要來把升級版的navigation bar改成RWD的型式。
那具體該怎麼做呢？

預想

在想啊想的時候，去看小說轉換心情，遇到字不會唸一去查，沒想到我找到了一個符合我需求的網站～

於是我就覺得～這很符合我得期待啊～所以就開始動手了～
實作後長這副模樣

過程

要說吧，其實我算滿意的，因為實際表現出來的樣子是美麗的。
但是硬要說程式碼的部分嘛……我是不滿意的，因為他程式碼的部分，我暫時還沒想到如何讓他可以共通使用。
也就是說，我擁有3個ul，而非一個ul打天下。

<ul class="computer" id="topnav">
  <li>
    <a href="javascript:void(0);" class="icon" onclick="openNav()"><i class="fa fa-bars"></i></a>
  </li>
  <li><a class="active" href="../">單字本</a></li>
  {% if login %}
    <li class="dropdown">
      <a class="dropbtn" href="javascript:void(1)">每日學習</a>
        <div class="dropdown-content">
          <a href="../all">全部單字</a>
          <a href="../story">故事學習</a>
          <a href="../video">影片學習</a>
        </div>
      </li>
      <form method="post">
        <li class="search-container">
          <input type="text" name="search" placeholder="Search...">
          <button type="submit"><i class="fa fa-search"></i></button>
        </li>
      </form>  
    <div class="right"> 
      <li><a href="../added">增加單字</a></li>
      <li class="dropdown">
        <a class="dropbtn" href="javascript:void(0)">{{username}}</a>
        <div class="dropdown-content">
          <a href="../user">學習狀況</a>
          <a href="../logout">登出</a>
        </div>
      </li>
    <li>
    <a href="javascript:void(0)" class="icon" onclick="search_function()"><i id="search" class="fa fa-superpowers"></i></a>  
    </li>
    </div>
  {% else %}
    <div class="right">
      <li><a href="../register">註冊</a></li>
      <li><a href="../login">登入</a></li>
    </div>
  {% endif %}
</ul>

<ul class="m_search" id="ul_search" style="display: none;">
  <form method="post">
    <li class="search-container">
      <input type="text" name="search" placeholder="Search...">
      <button type="submit"><i class="fa fa-search"></i></button>
    </li>
  </form>  
</ul>

<ul class="mobile" id="sidenav">
  <li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a></li>
  {% if not login %}
  <li><a href="../register">註冊</a></li>
  <li><a href="../login">登入</a></li>
  {% else %}
  <li><a href="../all">全部單字</a></li>
  <li><a href="../story">故事學習</a></li>
  <li><a href="../video">影片學習</a></li>
  <li><a href="../added">增加單字</a></li>
  <li><a href="../user">學習狀況</a></li>
  <li><a href="../logout">登出</a></li>
  {% endif %}
</ul>

此三者<ul>從id就可以看出他們分別代表的意思。
topnav就是我們上方的導航欄，他在螢幕縮小時會將資訊縮小到旁邊兩個圖示當中。
m_search是我們螢幕小時的搜尋引擎。
sidenav則是我們螢幕小時所使用的導航欄(因為topnav的li a被設為none)

我們來看看script的部分

function search_function() {
  var x = document.getElementById("search");
  if (x.className === "fa fa-superpowers") {
    x.className = "fa fa-angle-up";
    document.getElementById("ul_search").style.cssText="display:inline-block";
  } else {
    x.className = "fa fa-superpowers";
    document.getElementById("ul_search").style.cssText="display:none";
  }
}
function openNav() {
  document.getElementById("sidenav").style.display = "block";
  document.getElementById("sidenav").style.width = "100%";   
}

function closeNav() {
  document.getElementById("sidenav").style.display = "none";
  document.getElementById("sidenav").style.width = "0%";  
}

這些都是處理如果你螢幕小時會做出的反應。
search_function是右上角的圖示，按下他會修改圖片，同時將我們隱藏起來的搜尋引擎打開。
openNav和closeNav是左上角的圖示，按下他會打開，打開後會有x標記的圖示按下他會關上。

而css的部分

ul.mobile{
  display: none;
  height: 100%;
  width: 0;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  margin: 0;
  padding-top: 10%;
  background-color: #111;
  overflow: hidden;
  transition: 0.5s;
  text-align:center;}
ul.mobile li a{
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;}
ul.mobile li a:hover{color: #f1f1f1;}
ul.mobile li a.closebtn{
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-le	ft: 50px;}

transition是轉場動畫，在這裡用在打開後你將滑鼠移到選向上，他會像是有種亮起來的感覺，而不是驟然變白。

大概需要說的只有這些～
我看看這個實例沒有特別需要說明的，明天我們來說比較不重……
這個實例的主要核心，單字，只是技術方面不難而已(所以差點說不重要哈哈)。