iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 6
0
Modern Web

慢慢帶你了解Flask系列 第 6

慢慢帶你了解Flask - Day6 網路相簿(2):Navigation Bar(RWD)

大家好,我是長風青雲。今天是參加鐵人賽的第六天。
今天是要將Navigation Bar變成RWD的樣式~

怎麼把他變成手機也可以看的畫面呢?
這個時候就需要用到所謂的class了,css的class代表的意義,大概就像是群組一樣,是這個class的話怎樣表現、是那個class的話又怎麼表現。
所以我們真正的全部的index.html該長什麼模樣呢?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/navbar.css')}}">
<title>ironman album</title>
</head>
<style>
body{
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
}


</style>
<body>

<ul class="computer" id="topnav">
	<li><a href="../" class="active">首頁</a></li>
	<li><a href="../album">相簿</a></li>
	{% if user in USERS %}
	<li><a href="../upload">上傳</a></li>
	<li><a href="../logout">登出</a></li>
	{% else %}
	<li><a href="../register">註冊</a></li>
	<li><a href="../login">登入</a></li>
	{% endif %}
	<li style="float:right"><a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>
</ul>

<script>
function myFunction() {
  var x = document.getElementById("topnav");
  if (x.className === "computer") {
    x.className = "phone";
  } else {
    x.className = "computer";
  }
}
</script>


</body>
</html>

咳,你或許會想問我,昨天在<style>裡的ul他們呢?
答案就是,我放在另外一個css檔了,這在最後我會說明。

所以首先你看到了,我們的<ul>多出一個id和一個class
id 很明顯是因為script才使用的嘛,所以我們先簡單地看他一眼。
這個function就是說一個icon被按了以後,把ul的class在computer和phone之間切換嘛!
然後class computer又是什麼呢?我們跳轉到css檔~

ul.computer{
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: thistle;
	position: fixed;
	width:100%;
}

ul.computer li{float: left;}
ul.computer li a{
	display: block;
	color: black;
	padding: 8px 16px;
	text-align: center;
	text-decoration: none;
}

ul.computer li a.active{
	color: lavender;
	background-color: darkmagenta;
}

ul.computer li a:hover:not(.active)
{
	background-color: darkviolet;
	color: white;
}

ul.computer li a.icon{display: none;}

@media screen and (max-width: 400px)
{
	ul.computer li a:not(.active) {
		display: none;
	}
	ul.computer li a.icon{
		float: right;
		padding-top: 10px;
		display: inline-block;	
	}
}

@media screen and (max-width: 400px)
{
	ul.phone {
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background-color: thistle;
		position: fixed;
		width:100%;
	}

	ul.phone li a{
		display: block;
		color: black;
		padding: 8px 16px;
		text-align: left;
		text-decoration: none;
	}

	ul.phone li a.active{
		color: lavender;
		background-color: darkmagenta;
	}

	ul.phone li a:hover:not(.active)
	{
		background-color: darkviolet;
		color: white;
	}

	ul.phone li a.icon{
		position: absolute;
		right: 0;
		top: 0;
		padding-top: 10px;
	}
}

跟之前長得差不多,我就簡單說一下
ul後面加入.computer意義就代表class為computer的ul
@media screen and (max-width:400px)則是說如果螢幕顯示的寬度不足400pixel則有些參數就會被改變

像這裡,我就以讓原本在電腦上不會顯示的icon顯現,然後把除了主頁之外的連結全部藏起來。如果我點了icon剛剛在script有說,他的class會轉為phone
class為phone的ul 一一設定好後,恭喜!你已經完成了RWD啦!

我剛剛說到,我的CSS放在外邊對吧,在Flask裡,有個資料夾叫做static
他是來放基本不會改變的資料,像是css或圖片之類的。
但其實我受過其中的……堪稱虐待?我還以為我寫錯了之類的。
簡單來說,因為他是幾乎不會變動的檔案,所以他貌似會記錄你過往這個檔案的內容,就算你刪了或修改那個檔案,他還是會讀取到舊的樣子,恐怕要過好一陣子他才會發現那個檔案消失了,他才會意識到他需要被改變。
所以雖然很多人都說static是放css和圖片的,但我都是確認不會需要再修改過後才會放進去。

css怎麼外放呢?就是將<style>中的那些設定全部copy出來放到另外一個檔案,然後檔名命css就好。位置的話如下:
https://ithelp.ithome.com.tw/upload/images/20190904/201201169gbFcGTqvF.png
那我們原本的html怎麼去使用他呢?
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/navbar.css')}}">
加入這一行,告訴他說,我要去static的資料夾裡找css資料夾裡的navbar.css
這樣就大功告成啦!

讓我們來看一下實際的影片,我的手機長度超過400px所以可以直接拍兩種模式XD

今天就說到這,明天就來處理一下不用flask-login的註冊、登入、登出~
https://ithelp.ithome.com.tw/upload/images/20190907/2012011639ZQT5IcxM.png


上一篇
慢慢帶你了解Flask - Day5 網路相簿(1):Navigation Bar
下一篇
慢慢帶你了解Flask - Day7 網路相簿(3):註冊登入登出(json、session)
系列文
慢慢帶你了解Flask30

2 則留言

0
阿瑜
iT邦新手 4 級 ‧ 2019-09-07 17:07:43

簽到 #6
Responsive Navigation Bar with HTML CSS and Javascript | Responsive Menu


下次可以玩一下 這種感覺 ~~~

阿瑜 iT邦新手 4 級 ‧ 2019-09-07 17:11:28 檢舉

static 的部分 :
F12 > 不按重新整理 但要右鍵 可 強制清除快取
但你那個做法 應該是最標準的

我上次做了XD有成功
而且這樣玩RWD滿好玩的~

阿瑜 iT邦新手 4 級 ‧ 2019-09-19 17:47:42 檢舉

水水

0
hipot
iT邦新手 5 級 ‧ 2020-12-02 12:13:59

我點擊登入後有BUG,似乎是session沒有對應到index.html的if user in USERS
尷尬
雖然知道作者把心力放在後面,但還是想在這留言一下

我要留言

立即登入留言