iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 16
0
Modern Web

慢慢帶你了解Flask系列 第 16

慢慢帶你了解Flask - Day16 個人單字書(3):Navigation Bar(RWD)

  • 分享至 

  • xImage
  •  

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

預想

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

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

過程

要說吧,其實我算滿意的,因為實際表現出來的樣子是美麗的。
但是硬要說程式碼的部分嘛……我是不滿意的,因為他程式碼的部分,我暫時還沒想到如何讓他可以共通使用。
也就是說,我擁有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是右上角的圖示,按下他會修改圖片,同時將我們隱藏起來的搜尋引擎打開。
openNavcloseNav是左上角的圖示,按下他會打開,打開後會有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是轉場動畫,在這裡用在打開後你將滑鼠移到選向上,他會像是有種亮起來的感覺,而不是驟然變白。

大概需要說的只有這些~
我看看這個實例沒有特別需要說明的,明天我們來說比較不重……
這個實例的主要核心,單字,只是技術方面不難而已(所以差點說不重要哈哈)。
https://ithelp.ithome.com.tw/upload/images/20190913/20120116O3cjDzv9M2.jpg


上一篇
慢慢帶你了解Flask - Day15 個人單字書(2):Navigation Bar的升級版
下一篇
慢慢帶你了解Flask - Day17 個人單字書(4):增加、查詢、展示單字
系列文
慢慢帶你了解Flask30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言