RWD/style - 修訂歷史

林芸伍：/* 選單更改 (漢堡選單箭頭動畫) */

2022-02-23T10:31:44Z

‎選單更改 (漢堡選單箭頭動畫)

林芸伍：/* 選單更改 (漢堡選單箭頭動畫 */

2022-02-23T10:27:15Z

‎選單更改 (漢堡選單箭頭動畫

林芸伍：/* 選單更改 (漢堡選單箭頭動畫 */

2022-02-23T10:27:00Z

‎選單更改 (漢堡選單箭頭動畫

林芸伍：/* 選單更改 (漢堡選單箭頭動畫 */

2022-02-23T10:22:05Z

‎選單更改 (漢堡選單箭頭動畫

林芸伍於 2022年1月28日 (五) 03:29

2022-01-28T03:29:10Z

林芸伍於 2022年1月28日 (五) 03:28

2022-01-28T03:28:28Z

林芸伍：/* 字體工具箱 */

2022-01-28T03:23:31Z

‎字體工具箱

林芸伍：/* 字體工具箱 */

2022-01-28T03:14:30Z

‎字體工具箱

林芸伍：/* 字體工具箱 */

2022-01-19T18:04:13Z

‎字體工具箱

林芸伍：/* 選單更改 (漢堡選單箭頭動畫 */

2022-01-19T17:26:38Z

‎選單更改 (漢堡選單箭頭動畫

@@ 行 54： / 行 54： @@
 ###*.sub-menu{padding:0; )
 ###將style.css以及menu.css中所有hover事件註解，使其無法作用，否則可能會與click事件互相影響
-###*menu.css中的/*.navigation li dt a:visited {...} */
+###*menu.css中36行左右的/*.navigation li dt a:visited {...} */
-###*menu.css中的/*.navigation li:hover dd,{...}*/
+###*menu.css中48行左右的/*.navigation li:hover dd,{...}*/
-###*menu.css中的/*	.navigation li a:active dd {...}*/
+###*menu.css中49行左右的/*	.navigation li a:active dd {...}*/
-###*style.css中的/*	#xo-globalnav a:hover .arrow{...}*/
+###*style.css中97及253行左右的/*	#xo-globalnav a:hover .arrow{...}*/
 ===頁首頁尾===

@@ 行 24： / 行 24： @@
 ##*原始程式：#xo-globalnav{...}	→	#xo-globalnav{...<span style="color:red;">display:none</span>}// 讓#xo-globalnav隱藏
-===選單更改 (漢堡選單 箭頭動畫===
+===選單更改 (漢堡選單 箭頭動畫)===
 本章節著重在漢堡選單的製作上，現今手機及平板上的選單，因為滑鼠滑動被改成手指點選，必須在選單上做一些更動，才能更加的人性化，符合使用者需求。<br>本節分兩小章分別為製作漢堡選單與在選單上加上箭頭動畫。如下詳述：(同上述，以下變更均在均在480px的@media screen and (max-width:480px){ ...} 內做更動)
 #漢堡表單製作<br>本小節中，將自行畫出一個漢堡選單(若不知道漢堡選單的定義可以參見下方參考資料)，並加入選單的動畫設定。詳細新增的部分如下

@@ 行 53： / 行 53： @@
 ###加入.sub-menu屬性，使其靠左對齊(不然會有多餘的縮排)
 ###*.sub-menu{padding:0; )
 ===頁首頁尾===

@@ 行 42： / 行 42： @@
 ##更改設定，使選單的字靠左對齊。
 ##* #xo-globalnav a {...} →	#xo-globalnav a {...<span style="color:red;">margin:                 auto;</span>}
-# 箭頭動畫<br>本小節中，將在選單內畫出一個箭頭，並做出旋轉的動畫設定。詳細新增的部分如下
+# 箭頭動畫<br>本小節中，將在選單內畫出一個箭頭，並做出旋轉的動畫設定。本頁面提供兩個方法，詳細新增的部分如下
-##先畫出箭頭，劃出一橫一豎兩條線，並旋轉45度。
+##第一種方法(hover事件)，本方法讓滑鼠經過選單時就會觸發箭頭旋轉的動畫，優點為改動不多，缺點則是在RWD狀況下較難操縱，因為平板、手機沒有滑鼠，事件設定會比較不一樣。若是在設計RWD的頁面推薦第二種方法。
-##* .arrow {<br> float:right;<br> margin-top:10px;<br> margin-right:5px;<br> width: 5px;<br> height: 5px;<br> border-top: 2px solid black;  /* 箭頭颜色 */<br> border-right: 2px solid black; /* 箭頭颜色 */<br> transform: rotate(45deg);<br> transition: all 0.5s ease 0s;/*all是所有屬性都将獲得動畫效果  0.5秒完成動畫 ease(逐漸變慢)*/}
+###先畫出箭頭，劃出一橫一豎兩條線，並旋轉45度。
-##再來加入滑鼠滑到箭頭內的動畫，滑進去(或點選)就旋轉90度。
+###* .arrow {<br> float:right;<br> margin-top:10px;<br> margin-right:5px;<br> width: 5px;<br> height: 5px;<br> border-top: 2px solid black;  /* 箭頭颜色 */<br> border-right: 2px solid black; /* 箭頭颜色 */<br> transform: rotate(45deg);<br> transition: all 0.5s ease 0s;/*all是所有屬性都将獲得動畫效果  0.5秒完成動畫 ease(逐漸變慢)*/}
-##* #xo-globalnav a:hover .arrow{<br> transform: rotate(135deg);/*旋轉180度*/<br> margin-top:10px;}
+###再來加入滑鼠滑到箭頭內的動畫，滑進去(或點選)就旋轉90度。
 ===頁首頁尾===

@@ 行 5： / 行 5： @@
 style.css主要是架構出物件的特性，物件的放置要在theme.php中才會寫到，要更動網頁時務必確認物件特性和物件放置兩者皆有做到再更新！<br>
 本頁面為主題式頁面，每個段落分別對應不同的RWD需求，沒有誰先誰後的順序問題。<br>
-更改之前的程式可參照stylebackup.css，更改之後可參照style.css。(位置在檔案櫃中全民科學平台/RWD/)
+更改之前的程式可參照stylebackup.css，更改之後可參照style.css。(位置在檔案櫃中 /全民科學平台/RWD/)
 ===RWD 整體畫面視覺===
 因為本來的設定只有桌機的顯示，我們現在要更動為手機、平板皆可顯示的話，就需要在css檔案中做一些判斷與變動。<br>

@@ 行 57： / 行 57： @@
 在RWD網頁中，我們有時候需要更改文字大小才會方便在小螢幕上閱讀，讓使用者體驗更好！本章節是將原本無法改變字體大小的網頁，加上一個字體工具箱，使其可以改變字體大小。方法如下(同上述，以下變更均在均在480px的@media screen and (max-width:480px){ ...} 內做更動)
 #新增字體工具箱物件特性
-#*font_box{<br>	width: 200px;<br>	height: 10px;<br>	position: absolute;<br>	  top: 160px;<br>	  right: 250px;<br>	  display: block;<br>	  z-index: 0;<br>	  color:#000;}
+#*font_box{<br>	width: 200px;<br>	height: 10px;/*不要太高，會蓋過底下的js互動*/<br>	position: absolute;<br>	  top: 160px;<br>	  right: 250px;<br>	  display: block;<br>	  z-index: 0;<br>	  color:#000;}
 ===參考資料===
 *漢堡選單介紹： https://news.gandi.net/zh-hant/2020/10/what-is-a-hamburger-menu/

@@ 行 38： / 行 38： @@
 ##新增核取方塊被點選時的動畫(往右浮出)
 ##* #menu-switcher:checked ~ #xo-globalnav {transform: translateX(0%);/*選單會回歸原始位置 再按一次退回左方*/}
-##更改設定#xo-globalnav li選單設定，使其在左方選單頁面畫出一格一格的選單。
+##更改設定#xo-globalnav li選單設定，使其在左方選單頁面畫出一格一格的選單。(同#xo-globalnav，直接改掉)
 ##* #xo-globalnav li {<br> display: block; 	/* 將資料顯示在同一行不分段 */<br> padding:15px;<br>   margin: 0 20px 10px;<br>    padding-left:           3px;<br>    padding-right:          3px;<br>	color: #ffffff;	/*白色 */<br>text-decoration: none;<br>	  		text-transform: uppercase;<br> 		font-size: 20px;<br>	  		text-align: center;			/*置中*/<br>border-bottom: 3px solid #000;		/*底線黑色*/}
 ##更改設定，使選單的字靠左對齊。
-##* #xo-globalnav a {...} →	#xo-globalnav a {...margin:                 auto;}
+##* #xo-globalnav a {...} →	#xo-globalnav a {...<span style="color:red;">margin:                 auto;</span>}
 # 箭頭動畫<br>本小節中，將在選單內畫出一個箭頭，並做出旋轉的動畫設定。詳細新增的部分如下
 ##先畫出箭頭，劃出一橫一豎兩條線，並旋轉45度。
 ##* .arrow {<br> float:right;<br> margin-top:10px;<br> margin-right:5px;<br> width: 5px;<br> height: 5px;<br> border-top: 2px solid black;  /* 箭頭颜色 */<br> border-right: 2px solid black; /* 箭頭颜色 */<br> transform: rotate(45deg);<br> transition: all 0.5s ease 0s;/*all是所有屬性都将獲得動畫效果  0.5秒完成動畫 ease(逐漸變慢)*/}
 ##再來加入滑鼠滑到箭頭內的動畫，滑進去(或點選)就旋轉90度。
-##* #xo-globalnav a:hover .arrow{<br> transform: rotate(135deg);/*旋转180度*/<br> margin-top:10px;}
+##* #xo-globalnav a:hover .arrow{<br> transform: rotate(135deg);/*旋轉180度*/<br> margin-top:10px;}
 ===頁首頁尾===
 本章節是將原本沒有頁首頁尾的網頁加上頁首頁尾。並讓頁首可以隨著手機畫面滑動而跟著向下移動。並在頁尾加上一些網站資訊方便連絡。方法如下(同上述，以下變更均在均在480px的@media screen and (max-width:480px){ ...} 內做更動)

RWD/style - 修訂歷史

林芸伍：/* 選單更改 (漢堡選單 箭頭動畫) */

林芸伍：/* 選單更改 (漢堡選單 箭頭動畫 */

林芸伍：/* 選單更改 (漢堡選單 箭頭動畫 */

林芸伍：/* 選單更改 (漢堡選單 箭頭動畫 */

林芸伍 於 2022年1月28日 (五) 03:29

林芸伍 於 2022年1月28日 (五) 03:28

林芸伍：/* 字體工具箱 */

林芸伍：/* 字體工具箱 */

林芸伍：/* 字體工具箱 */

林芸伍：/* 選單更改 (漢堡選單 箭頭動畫 */

林芸伍：/* 選單更改 (漢堡選單箭頭動畫) */

林芸伍：/* 選單更改 (漢堡選單箭頭動畫 */

林芸伍：/* 選單更改 (漢堡選單箭頭動畫 */

林芸伍：/* 選單更改 (漢堡選單箭頭動畫 */

林芸伍於 2022年1月28日 (五) 03:29

林芸伍於 2022年1月28日 (五) 03:28

林芸伍：/* 選單更改 (漢堡選單箭頭動畫 */