http://science4everyone.net/MediaWiki/index.php?action=history&feed=atom&title=RWD%2Ftheme 2026-04-18T17:28:31Z 本 Wiki 上此頁面的修訂歷史 MediaWiki 1.30.0 http://science4everyone.net/MediaWiki/index.php?title=RWD/theme&diff=6583&oldid=prev 2022-03-18T12:39:55Z

<p>‎<span dir="auto"><span class="autocomment">選單更改 (漢堡選單 箭頭動畫)</span></span></p> <table class="diff diff-contentalign-left" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr style="vertical-align: top;" lang="zh-TW"> <td colspan="2" style="background-color: white; color:black; text-align: center;">←上個修訂</td> <td colspan="2" style="background-color: white; color:black; text-align: center;">於 2022年3月18日 (五) 12:39 的修訂</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l20" >行 20：</td> <td colspan="2" class="diff-lineno">行 20：</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>##第一種方法(hover事件)&amp;emsp;&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;本方法讓滑鼠經過選單時就會觸發箭頭旋轉的動畫，優點為改動不多，缺點則是在RWD狀況下較難操縱，因為平板、手機沒有滑鼠，事件設定會比較不一樣。詳細新增的部分如下面兩個： (若是在設計RWD的頁面推薦第二或第三種方法。)&lt;br&gt;&amp;#8226;程式(theme.php第20行)：&lt;br&gt;&lt;nowiki&gt;&amp;emsp;$strnav.=&quot;\t\t&lt;dt&gt;&lt;a href='#'&gt;&quot;.subst&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;r&lt;/span&gt;&lt;nowiki&gt;($v,1).&quot;&lt;/a&gt;&lt;/dt&gt;\n&quot;;#&lt;!--加入箭頭&#160; --&gt; &lt;/nowiki&gt;&lt;br&gt;&amp;emsp;→&lt;br&gt;&amp;emsp;&lt;nowiki&gt;$strnav.=&quot;\t\t&lt;dt&gt;&lt;a href='#'&gt;&quot;.subst&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;r&lt;/span&gt;&lt;nowiki&gt;($v,1).&quot;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;div class='arrow'&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;/div&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;/a&gt;&lt;/dt&gt;\n&quot;;*/ &lt;/nowiki&gt;&lt;br&gt;&amp;#8226;程式(theme.php第35行)：&lt;br&gt;&amp;emsp;&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;工具&lt;/a&gt; &lt;/dt&gt;&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;→&lt;br&gt;&amp;emsp;&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;工具&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;div class='arrow'&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;/div&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;/a&gt; &lt;/dt&gt;!--加入箭頭&#160; --&gt;&lt;/nowiki&gt;&lt;/div&gt;</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>##第一種方法(hover事件)&amp;emsp;&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;本方法讓滑鼠經過選單時就會觸發箭頭旋轉的動畫，優點為改動不多，缺點則是在RWD狀況下較難操縱，因為平板、手機沒有滑鼠，事件設定會比較不一樣。詳細新增的部分如下面兩個： (若是在設計RWD的頁面推薦第二或第三種方法。)&lt;br&gt;&amp;#8226;程式(theme.php第20行)：&lt;br&gt;&lt;nowiki&gt;&amp;emsp;$strnav.=&quot;\t\t&lt;dt&gt;&lt;a href='#'&gt;&quot;.subst&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;r&lt;/span&gt;&lt;nowiki&gt;($v,1).&quot;&lt;/a&gt;&lt;/dt&gt;\n&quot;;#&lt;!--加入箭頭&#160; --&gt; &lt;/nowiki&gt;&lt;br&gt;&amp;emsp;→&lt;br&gt;&amp;emsp;&lt;nowiki&gt;$strnav.=&quot;\t\t&lt;dt&gt;&lt;a href='#'&gt;&quot;.subst&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;r&lt;/span&gt;&lt;nowiki&gt;($v,1).&quot;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;div class='arrow'&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;/div&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;/a&gt;&lt;/dt&gt;\n&quot;;*/ &lt;/nowiki&gt;&lt;br&gt;&amp;#8226;程式(theme.php第35行)：&lt;br&gt;&amp;emsp;&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;工具&lt;/a&gt; &lt;/dt&gt;&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;→&lt;br&gt;&amp;emsp;&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;工具&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;div class='arrow'&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;/div&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;/a&gt; &lt;/dt&gt;!--加入箭頭&#160; --&gt;&lt;/nowiki&gt;&lt;/div&gt;</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>##第二種方法(click事件)&amp;emsp;&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;本方法讓滑鼠點下選單時才觸發箭頭旋轉的動畫，優點為較符合RWD的設計，缺點則是要多寫一段Javascript碼，改動幅度較大。若是不想那麼複雜，可以先改動成第一種方法看效果。 &lt;span style=&quot;color:red;&quot;&gt;(施工中)&lt;/span&gt;&lt;br&gt;&amp;#8226;新增兩個新變數(副標題的編號與箭頭編號)，在theme.php大概第4~6行處，程式如下：&lt;br&gt;&amp;emsp;$subMenu9='&amp;#39;subMenu9&amp;#39;';&lt;br&gt;&amp;emsp;$arrow9='&amp;#39;arrow9&amp;#39;';&lt;br&gt;&amp;#8226;新增數個變數(讓每個副標題與箭頭編號不重複)，並在$strnav中新增switchMenu程式(主選單，副選單，箭頭) 並用ul 包住副選單 dt包住主選單&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp; ...&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp; if(...){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp; if($c==1){$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;}&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$strnav.=&quot;\t\t&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;&quot;.sub&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;str&lt;/span&gt;($v,1).&quot;&lt;/a&gt;&lt;/dt&gt;\n&quot;;&lt;br&gt;&amp;emsp;&amp;emsp; }&lt;br&gt;&amp;emsp;&amp;emsp; ...&lt;br&gt;&amp;emsp; }&lt;br&gt;&amp;emsp;$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;}&lt;br&gt;→&lt;br&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp; ...&lt;br&gt;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;$number='1';&lt;br&gt;&amp;emsp;$numberr=&quot;2&quot;;&lt;/span&gt;&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp;if(...){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;if($c==1){$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;}&lt;br&gt;&lt;span style=&quot;color:red;&quot;&gt;&amp;emsp;&amp;emsp;&amp;emsp;$subMenu.=$number;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$arrow.=$numberr;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$number.=&quot;1&quot;;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$numberr.=&quot;2&quot;;&lt;/span&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;$strnav.=&quot;\t\t&lt;dt oncl&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;ick='switchMenu( this,&quot;.$subMenu.&quot;,&quot;.$arrow.&quot;)'&gt;&lt;a href='#'&gt;&quot;.sub&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;str($v,1).&quot;&lt;nowiki&gt;&lt;div id=&quot;.$arrow.&quot; class='arrow'&gt;&lt;/nowiki&gt;&lt;/div&gt;&lt;/a&gt;\n &lt;nowiki&gt;&lt;ul id=&quot;.$subMenu.&quot; class='sub-menu' style='display:none;'&gt; \n&quot;;&lt;/nowiki&gt;&lt;/span&gt; &lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;&amp;emsp;...&lt;br&gt;&amp;emsp;}&lt;br&gt;&amp;emsp;$strnav.=&quot;\t&lt;span style=&quot;color:red&quot;&gt;&lt;/ul&gt;&lt;/dt&gt;&lt;/span&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;}&lt;br&gt;&lt;/div&gt;&lt;br&gt;&amp;#8226;在工具選單中如上述方法修改(新增switchMenu程式(主選單，副選單，箭頭) 並用ul 包住副選單 dt包住主選單)：&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;&amp;emsp;&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;&lt;/nowiki&gt;工具&lt;/a&gt; &lt;/dt&gt;&lt;br&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;→&lt;br&gt;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;&lt;dt on&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;click='switchMenu( this,&quot;.$subMenu9.&quot;,&quot;.$arrow9.&quot;)'&gt;&lt;a href='#'&gt;工具&lt;nowiki&gt;&lt;div id='arrow9' class='arrow'&gt;&lt;/nowiki&gt;&lt;/div&gt;&lt;/a&gt;&lt;/span&gt;&lt;br&gt;&amp;emsp;&lt;nowiki&gt;&lt;ul id='subMenu9' class='sub-menu' style='display:none;'&gt;#加入副選單&lt;/nowiki&gt;&lt;br&gt;...&lt;br&gt;&lt;span style=&quot;color:red&quot;&gt;&lt;/ul&gt;&lt;/dt&gt;&lt;/span&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;#加入ul dt 結尾&lt;/div&gt;&lt;br&gt;&amp;#8226;新增switchmenu程式&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;&lt;script language = 'javascript'&gt;&lt;br&gt;var VisibleMenu = ''; // 記錄目前顯示的子選單的 ID&lt;br&gt;function switchMenu( theMainMenu, theSubMenu,thearrow, theEvent ){// 加入switchMenu程式(主選單，副選單，箭頭) 點擊執行&lt;br&gt;&amp;emsp;var SubMenu = document.getElementById( String(theSubMenu) );// 定義程式中的副選單&lt;br&gt;&amp;emsp;const div = document.getElementById( String(thearrow) );// 定義程式中的箭頭&lt;br&gt;&amp;emsp;if( SubMenu.style.display == 'none' ){ // 若副選單原本未顯示&lt;br&gt;&amp;emsp;&amp;emsp;SubMenu.style.display = 'block';// 顯示副選單&lt;br&gt;&amp;emsp;&amp;emsp;div.style.transform = 'rotate(135deg)';// 旋轉箭頭往下&lt;br&gt;&amp;emsp;&amp;emsp;VisibleMenu = theSubMenu;// 顯示選單為本副選單&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;else{ // 隱藏子選單&lt;br&gt;&amp;emsp;&amp;emsp;if( theEvent != 'MouseOver' || VisibleMenu != theSubMenu ){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;SubMenu.style.display = 'none';// 不顯示副選單&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;div.style.transform = 'rotate(45deg)';// 旋轉箭頭往右&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;VisibleMenu = '';// 顯示選單為空&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;}&lt;br&gt;&lt;/script&gt;&lt;/div&gt; &lt;/div&gt;</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>##第二種方法(click事件)&amp;emsp;&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;本方法讓滑鼠點下選單時才觸發箭頭旋轉的動畫，優點為較符合RWD的設計，缺點則是要多寫一段Javascript碼，改動幅度較大。若是不想那麼複雜，可以先改動成第一種方法看效果。 &lt;span style=&quot;color:red;&quot;&gt;(施工中)&lt;/span&gt;&lt;br&gt;&amp;#8226;新增兩個新變數(副標題的編號與箭頭編號)，在theme.php大概第4~6行處，程式如下：&lt;br&gt;&amp;emsp;$subMenu9='&amp;#39;subMenu9&amp;#39;';&lt;br&gt;&amp;emsp;$arrow9='&amp;#39;arrow9&amp;#39;';&lt;br&gt;&amp;#8226;新增數個變數(讓每個副標題與箭頭編號不重複)，並在$strnav中新增switchMenu程式(主選單，副選單，箭頭) 並用ul 包住副選單 dt包住主選單&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp; ...&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp; if(...){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp; if($c==1){$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;}&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$strnav.=&quot;\t\t&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;&quot;.sub&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;str&lt;/span&gt;($v,1).&quot;&lt;/a&gt;&lt;/dt&gt;\n&quot;;&lt;br&gt;&amp;emsp;&amp;emsp; }&lt;br&gt;&amp;emsp;&amp;emsp; ...&lt;br&gt;&amp;emsp; }&lt;br&gt;&amp;emsp;$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;}&lt;br&gt;→&lt;br&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp; ...&lt;br&gt;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;$number='1';&lt;br&gt;&amp;emsp;$numberr=&quot;2&quot;;&lt;/span&gt;&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp;if(...){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;if($c==1){$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;}&lt;br&gt;&lt;span style=&quot;color:red;&quot;&gt;&amp;emsp;&amp;emsp;&amp;emsp;$subMenu.=$number;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$arrow.=$numberr;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$number.=&quot;1&quot;;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$numberr.=&quot;2&quot;;&lt;/span&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;$strnav.=&quot;\t\t&lt;dt oncl&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;ick='switchMenu( this,&quot;.$subMenu.&quot;,&quot;.$arrow.&quot;)'&gt;&lt;a href='#'&gt;&quot;.sub&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;str($v,1).&quot;&lt;nowiki&gt;&lt;div id=&quot;.$arrow.&quot; class='arrow'&gt;&lt;/nowiki&gt;&lt;/div&gt;&lt;/a&gt;\n &lt;nowiki&gt;&lt;ul id=&quot;.$subMenu.&quot; class='sub-menu' style='display:none;'&gt; \n&quot;;&lt;/nowiki&gt;&lt;/span&gt; &lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;&amp;emsp;...&lt;br&gt;&amp;emsp;}&lt;br&gt;&amp;emsp;$strnav.=&quot;\t&lt;span style=&quot;color:red&quot;&gt;&lt;/ul&gt;&lt;/dt&gt;&lt;/span&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;}&lt;br&gt;&lt;/div&gt;&lt;br&gt;&amp;#8226;在工具選單中如上述方法修改(新增switchMenu程式(主選單，副選單，箭頭) 並用ul 包住副選單 dt包住主選單)：&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;&amp;emsp;&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;&lt;/nowiki&gt;工具&lt;/a&gt; &lt;/dt&gt;&lt;br&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;→&lt;br&gt;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;&lt;dt on&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;click='switchMenu( this,&quot;.$subMenu9.&quot;,&quot;.$arrow9.&quot;)'&gt;&lt;a href='#'&gt;工具&lt;nowiki&gt;&lt;div id='arrow9' class='arrow'&gt;&lt;/nowiki&gt;&lt;/div&gt;&lt;/a&gt;&lt;/span&gt;&lt;br&gt;&amp;emsp;&lt;nowiki&gt;&lt;ul id='subMenu9' class='sub-menu' style='display:none;'&gt;#加入副選單&lt;/nowiki&gt;&lt;br&gt;...&lt;br&gt;&lt;span style=&quot;color:red&quot;&gt;&lt;/ul&gt;&lt;/dt&gt;&lt;/span&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;#加入ul dt 結尾&lt;/div&gt;&lt;br&gt;&amp;#8226;新增switchmenu程式&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;&lt;script language = 'javascript'&gt;&lt;br&gt;var VisibleMenu = ''; // 記錄目前顯示的子選單的 ID&lt;br&gt;function switchMenu( theMainMenu, theSubMenu,thearrow, theEvent ){// 加入switchMenu程式(主選單，副選單，箭頭) 點擊執行&lt;br&gt;&amp;emsp;var SubMenu = document.getElementById( String(theSubMenu) );// 定義程式中的副選單&lt;br&gt;&amp;emsp;const div = document.getElementById( String(thearrow) );// 定義程式中的箭頭&lt;br&gt;&amp;emsp;if( SubMenu.style.display == 'none' ){ // 若副選單原本未顯示&lt;br&gt;&amp;emsp;&amp;emsp;SubMenu.style.display = 'block';// 顯示副選單&lt;br&gt;&amp;emsp;&amp;emsp;div.style.transform = 'rotate(135deg)';// 旋轉箭頭往下&lt;br&gt;&amp;emsp;&amp;emsp;VisibleMenu = theSubMenu;// 顯示選單為本副選單&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;else{ // 隱藏子選單&lt;br&gt;&amp;emsp;&amp;emsp;if( theEvent != 'MouseOver' || VisibleMenu != theSubMenu ){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;SubMenu.style.display = 'none';// 不顯示副選單&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;div.style.transform = 'rotate(45deg)';// 旋轉箭頭往右&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;VisibleMenu = '';// 顯示選單為空&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;}&lt;br&gt;&lt;/script&gt;&lt;/div&gt; &lt;/div&gt;</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>##第三種方法(details+summary)&amp;emsp;&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;本方法讓滑鼠按下選單時就會觸發箭頭旋轉的動畫，優點為改動不多，只需要改theme.php即可，不用改style.css，特別推薦。詳細新增的部分如下： (若是在設計RWD的頁面推薦本方法。)&lt;br&gt;&amp;#8226;在$strnav中用details 包住選單 summary包住標題 html會自動產生箭頭&amp;emsp;&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp;...&lt;br&gt;&amp;emsp;$strnav.=&quot;\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp;if(...){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;if($c==1){$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;}&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$strnav.=&quot;\t\t&lt;nowiki&gt;&lt;dt&gt;&lt;a hr&lt;/nowiki&gt;&lt;nowiki&gt;ef='#'&gt;&quot;.sub&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;str&lt;/span&gt;($v,1).&quot;&lt;/a&gt;&lt;/dt&gt;\n&quot;;&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;&amp;emsp;...&lt;br&gt;&amp;emsp;}&lt;br&gt;...}&lt;br&gt;→&lt;br&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp;...&lt;br&gt;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;&lt;br&gt;&amp;emsp;$strnav.=&quot;\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;details&gt;&lt;/nowiki&gt;\n&quot;;&lt;/span&gt;&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp;if(...){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;if($c==1){&lt;span style=&quot;color:red;&quot;&gt;$strnav.=&quot;\t&lt;/details&gt;&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;details&gt;&lt;/nowiki&gt;\n&quot;;&lt;/span&gt;}&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;$strnav.=&quot;\t\t&lt;nowiki&gt;&lt;summary&gt;&lt;/nowiki&gt;&lt;a href&lt;span&gt;&lt;/span&gt;='#'&gt;&quot;.sub&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;str($v,1).&quot;&lt;/a&gt;&lt;/summary&gt;\n &lt;/span&gt;&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;&amp;emsp;...&lt;br&gt;&amp;emsp;}&lt;br&gt;...}&lt;br&gt;&lt;/div&gt;&amp;#8226;在工具選單中如上述方法修改(用details 包住選單 summary包住標題)：&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;&amp;emsp;&lt;nowiki&gt;&lt;dt&gt;&lt;a hr&lt;/nowiki&gt;&lt;nowiki&gt;ef=&lt;/nowiki&gt;&lt;span&gt;&lt;/span&gt;&lt;nowiki&gt;'#'&gt;&lt;/nowiki&gt;工具&lt;/a&gt;&lt;/dt&gt;&lt;br&gt;...&lt;br&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;→&lt;br&gt;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;&lt;nowiki&gt;&lt;details&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;summary&gt;&lt;a hr&lt;/nowiki&gt;&lt;nowiki&gt;ef='#'&gt;&lt;/nowiki&gt;工具&lt;/a&gt;&lt;/summary&gt;&lt;br&gt;...&lt;br&gt;&lt;/details&gt;/<del class="diffchange diffchange-inline">&lt;</del>dl&gt;&lt;/li&gt;\n&quot;;&#160; &lt;/span&gt;&lt;/div&gt; &amp;#8226;新增展開後收起程式&lt;span style=&quot;color:red&quot;&gt;(注意 這邊要放在主程式的.$strnav.被引進之後)&lt;/span&gt;&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;&lt;nowiki&gt;&lt;div id='xo-globalnav'&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&amp;emsp;&lt;div style='float:center;'&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&amp;emsp;&amp;emsp;&lt;ul class='navigation'&gt;&quot;.$strnav.&quot;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&amp;emsp;&amp;emsp;&lt;/ul&gt;&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&lt;nowiki&gt;&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;span style=&quot;color:red&quot;&gt;&lt;script language = 'javascript'&gt;&lt;br&gt;&amp;emsp;var details = [...document.querySelectorAll('details')];&lt;br&gt;&amp;emsp;document.addEventListener('click', function(e) {&lt;br&gt;&amp;emsp;if (!details.some(f =&gt; f.contains(e.target))) {&lt;br&gt;&amp;emsp;&amp;emsp;details.forEach(f =&gt; f.removeAttribute('open'));&lt;br&gt;&amp;emsp;} else {&lt;br&gt;&amp;emsp;&amp;emsp;details.forEach(f =&gt; !f.contains(e.target) ? f.removeAttribute('open') : &lt;nowiki&gt;''&lt;/nowiki&gt;);&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;})&lt;br&gt;&lt;/script&gt;&lt;/span&gt;&#160; &lt;/div&gt;</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>##第三種方法(details+summary)&amp;emsp;&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;本方法讓滑鼠按下選單時就會觸發箭頭旋轉的動畫，優點為改動不多，只需要改theme.php即可，不用改style.css，特別推薦。詳細新增的部分如下： (若是在設計RWD的頁面推薦本方法。)&lt;br&gt;&amp;#8226;在$strnav中用details 包住選單 summary包住標題 html會自動產生箭頭&amp;emsp;&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp;...&lt;br&gt;&amp;emsp;$strnav.=&quot;\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp;if(...){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;if($c==1){$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;}&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$strnav.=&quot;\t\t&lt;nowiki&gt;&lt;dt&gt;&lt;a hr&lt;/nowiki&gt;&lt;nowiki&gt;ef='#'&gt;&quot;.sub&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;str&lt;/span&gt;($v,1).&quot;&lt;/a&gt;&lt;/dt&gt;\n&quot;;&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;&amp;emsp;...&lt;br&gt;&amp;emsp;}&lt;br&gt;...}&lt;br&gt;→&lt;br&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp;...&lt;br&gt;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;&lt;br&gt;&amp;emsp;$strnav.=&quot;\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;details&gt;&lt;/nowiki&gt;\n&quot;;&lt;/span&gt;&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp;if(...){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;if($c==1){&lt;span style=&quot;color:red;&quot;&gt;$strnav.=&quot;\t&lt;/details&gt;&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;details&gt;&lt;/nowiki&gt;\n&quot;;&lt;/span&gt;}&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;$strnav.=&quot;\t\t&lt;nowiki&gt;&lt;summary&gt;&lt;/nowiki&gt;&lt;a href&lt;span&gt;&lt;/span&gt;='#'&gt;&quot;.sub&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;str($v,1).&quot;&lt;/a&gt;&lt;/summary&gt;\n &lt;/span&gt;&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;&amp;emsp;...&lt;br&gt;&amp;emsp;}&lt;br&gt;...}&lt;br&gt;&lt;/div&gt;&amp;#8226;在工具選單中如上述方法修改(用details 包住選單 summary包住標題)：&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;&amp;emsp;&lt;nowiki&gt;&lt;dt&gt;&lt;a hr&lt;/nowiki&gt;&lt;nowiki&gt;ef=&lt;/nowiki&gt;&lt;span&gt;&lt;/span&gt;&lt;nowiki&gt;'#'&gt;&lt;/nowiki&gt;工具&lt;/a&gt;&lt;/dt&gt;&lt;br&gt;...&lt;br&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;→&lt;br&gt;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;&lt;nowiki&gt;&lt;details&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;summary&gt;&lt;a hr&lt;/nowiki&gt;&lt;nowiki&gt;ef='#'&gt;&lt;/nowiki&gt;工具&lt;/a&gt;&lt;/summary&gt;&lt;br&gt;...&lt;br&gt;&lt;/details&gt;<ins class="diffchange diffchange-inline">&lt;</ins>/dl&gt;&lt;/li&gt;\n&quot;;&#160; &lt;/span&gt;&lt;/div&gt; &amp;#8226;新增展開後收起程式&lt;span style=&quot;color:red&quot;&gt;(注意 這邊要放在主程式的.$strnav.被引進之後)&lt;/span&gt;&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;&lt;nowiki&gt;&lt;div id='xo-globalnav'&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&amp;emsp;&lt;div style='float:center;'&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&amp;emsp;&amp;emsp;&lt;ul class='navigation'&gt;&quot;.$strnav.&quot;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&amp;emsp;&amp;emsp;&lt;/ul&gt;&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&lt;nowiki&gt;&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;span style=&quot;color:red&quot;&gt;&lt;script language = 'javascript'&gt;&lt;br&gt;&amp;emsp;var details = [...document.querySelectorAll('details')];&lt;br&gt;&amp;emsp;document.addEventListener('click', function(e) {&lt;br&gt;&amp;emsp;if (!details.some(f =&gt; f.contains(e.target))) {&lt;br&gt;&amp;emsp;&amp;emsp;details.forEach(f =&gt; f.removeAttribute('open'));&lt;br&gt;&amp;emsp;} else {&lt;br&gt;&amp;emsp;&amp;emsp;details.forEach(f =&gt; !f.contains(e.target) ? f.removeAttribute('open') : &lt;nowiki&gt;''&lt;/nowiki&gt;);&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;})&lt;br&gt;&lt;/script&gt;&lt;/span&gt;&#160; &lt;/div&gt;</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>===頁首頁尾===</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>===頁首頁尾===</div></td></tr> </table>

林芸伍 http://science4everyone.net/MediaWiki/index.php?title=RWD/theme&diff=6582&oldid=prev 2022-03-18T12:36:55Z

<p>‎<span dir="auto"><span class="autocomment">選單更改 (漢堡選單 箭頭動畫)</span></span></p> <table class="diff diff-contentalign-left" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr style="vertical-align: top;" lang="zh-TW"> <td colspan="2" style="background-color: white; color:black; text-align: center;">←上個修訂</td> <td colspan="2" style="background-color: white; color:black; text-align: center;">於 2022年3月18日 (五) 12:36 的修訂</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l20" >行 20：</td> <td colspan="2" class="diff-lineno">行 20：</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>##第一種方法(hover事件)&amp;emsp;&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;本方法讓滑鼠經過選單時就會觸發箭頭旋轉的動畫，優點為改動不多，缺點則是在RWD狀況下較難操縱，因為平板、手機沒有滑鼠，事件設定會比較不一樣。詳細新增的部分如下面兩個： (若是在設計RWD的頁面推薦第二或第三種方法。)&lt;br&gt;&amp;#8226;程式(theme.php第20行)：&lt;br&gt;&lt;nowiki&gt;&amp;emsp;$strnav.=&quot;\t\t&lt;dt&gt;&lt;a href='#'&gt;&quot;.subst&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;r&lt;/span&gt;&lt;nowiki&gt;($v,1).&quot;&lt;/a&gt;&lt;/dt&gt;\n&quot;;#&lt;!--加入箭頭&#160; --&gt; &lt;/nowiki&gt;&lt;br&gt;&amp;emsp;→&lt;br&gt;&amp;emsp;&lt;nowiki&gt;$strnav.=&quot;\t\t&lt;dt&gt;&lt;a href='#'&gt;&quot;.subst&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;r&lt;/span&gt;&lt;nowiki&gt;($v,1).&quot;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;div class='arrow'&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;/div&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;/a&gt;&lt;/dt&gt;\n&quot;;*/ &lt;/nowiki&gt;&lt;br&gt;&amp;#8226;程式(theme.php第35行)：&lt;br&gt;&amp;emsp;&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;工具&lt;/a&gt; &lt;/dt&gt;&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;→&lt;br&gt;&amp;emsp;&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;工具&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;div class='arrow'&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;/div&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;/a&gt; &lt;/dt&gt;!--加入箭頭&#160; --&gt;&lt;/nowiki&gt;&lt;/div&gt;</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>##第一種方法(hover事件)&amp;emsp;&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;本方法讓滑鼠經過選單時就會觸發箭頭旋轉的動畫，優點為改動不多，缺點則是在RWD狀況下較難操縱，因為平板、手機沒有滑鼠，事件設定會比較不一樣。詳細新增的部分如下面兩個： (若是在設計RWD的頁面推薦第二或第三種方法。)&lt;br&gt;&amp;#8226;程式(theme.php第20行)：&lt;br&gt;&lt;nowiki&gt;&amp;emsp;$strnav.=&quot;\t\t&lt;dt&gt;&lt;a href='#'&gt;&quot;.subst&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;r&lt;/span&gt;&lt;nowiki&gt;($v,1).&quot;&lt;/a&gt;&lt;/dt&gt;\n&quot;;#&lt;!--加入箭頭&#160; --&gt; &lt;/nowiki&gt;&lt;br&gt;&amp;emsp;→&lt;br&gt;&amp;emsp;&lt;nowiki&gt;$strnav.=&quot;\t\t&lt;dt&gt;&lt;a href='#'&gt;&quot;.subst&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;r&lt;/span&gt;&lt;nowiki&gt;($v,1).&quot;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;div class='arrow'&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;/div&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;/a&gt;&lt;/dt&gt;\n&quot;;*/ &lt;/nowiki&gt;&lt;br&gt;&amp;#8226;程式(theme.php第35行)：&lt;br&gt;&amp;emsp;&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;工具&lt;/a&gt; &lt;/dt&gt;&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;→&lt;br&gt;&amp;emsp;&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;工具&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;div class='arrow'&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;/div&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;/a&gt; &lt;/dt&gt;!--加入箭頭&#160; --&gt;&lt;/nowiki&gt;&lt;/div&gt;</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>##第二種方法(click事件)&amp;emsp;&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;本方法讓滑鼠點下選單時才觸發箭頭旋轉的動畫，優點為較符合RWD的設計，缺點則是要多寫一段Javascript碼，改動幅度較大。若是不想那麼複雜，可以先改動成第一種方法看效果。 &lt;span style=&quot;color:red;&quot;&gt;(施工中)&lt;/span&gt;&lt;br&gt;&amp;#8226;新增兩個新變數(副標題的編號與箭頭編號)，在theme.php大概第4~6行處，程式如下：&lt;br&gt;&amp;emsp;$subMenu9='&amp;#39;subMenu9&amp;#39;';&lt;br&gt;&amp;emsp;$arrow9='&amp;#39;arrow9&amp;#39;';&lt;br&gt;&amp;#8226;新增數個變數(讓每個副標題與箭頭編號不重複)，並在$strnav中新增switchMenu程式(主選單，副選單，箭頭) 並用ul 包住副選單 dt包住主選單&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp; ...&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp; if(...){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp; if($c==1){$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;}&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$strnav.=&quot;\t\t&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;&quot;.sub&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;str&lt;/span&gt;($v,1).&quot;&lt;/a&gt;&lt;/dt&gt;\n&quot;;&lt;br&gt;&amp;emsp;&amp;emsp; }&lt;br&gt;&amp;emsp;&amp;emsp; ...&lt;br&gt;&amp;emsp; }&lt;br&gt;&amp;emsp;$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;}&lt;br&gt;→&lt;br&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp; ...&lt;br&gt;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;$number='1';&lt;br&gt;&amp;emsp;$numberr=&quot;2&quot;;&lt;/span&gt;&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp;if(...){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;if($c==1){$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;}&lt;br&gt;&lt;span style=&quot;color:red;&quot;&gt;&amp;emsp;&amp;emsp;&amp;emsp;$subMenu.=$number;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$arrow.=$numberr;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$number.=&quot;1&quot;;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$numberr.=&quot;2&quot;;&lt;/span&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;$strnav.=&quot;\t\t&lt;dt oncl&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;ick='switchMenu( this,&quot;.$subMenu.&quot;,&quot;.$arrow.&quot;)'&gt;&lt;a href='#'&gt;&quot;.sub&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;str($v,1).&quot;&lt;nowiki&gt;&lt;div id=&quot;.$arrow.&quot; class='arrow'&gt;&lt;/nowiki&gt;&lt;/div&gt;&lt;/a&gt;\n &lt;nowiki&gt;&lt;ul id=&quot;.$subMenu.&quot; class='sub-menu' style='display:none;'&gt; \n&quot;;&lt;/nowiki&gt;&lt;/span&gt; &lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;&amp;emsp;...&lt;br&gt;&amp;emsp;}&lt;br&gt;&amp;emsp;$strnav.=&quot;\t&lt;span style=&quot;color:red&quot;&gt;&lt;/ul&gt;&lt;/dt&gt;&lt;/span&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;}&lt;br&gt;&lt;/div&gt;&lt;br&gt;&amp;#8226;在工具選單中如上述方法修改(新增switchMenu程式(主選單，副選單，箭頭) 並用ul 包住副選單 dt包住主選單)：&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;&amp;emsp;&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;&lt;/nowiki&gt;工具&lt;/a&gt; &lt;/dt&gt;&lt;br&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;→&lt;br&gt;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;&lt;dt on&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;click='switchMenu( this,&quot;.$subMenu9.&quot;,&quot;.$arrow9.&quot;)'&gt;&lt;a href='#'&gt;工具&lt;nowiki&gt;&lt;div id='arrow9' class='arrow'&gt;&lt;/nowiki&gt;&lt;/div&gt;&lt;/a&gt;&lt;/span&gt;&lt;br&gt;&amp;emsp;&lt;nowiki&gt;&lt;ul id='subMenu9' class='sub-menu' style='display:none;'&gt;#加入副選單&lt;/nowiki&gt;&lt;br&gt;...&lt;br&gt;&lt;span style=&quot;color:red&quot;&gt;&lt;/ul&gt;&lt;/dt&gt;&lt;/span&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;#加入ul dt 結尾&lt;/div&gt;&lt;br&gt;&amp;#8226;新增switchmenu程式&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;&lt;script language = 'javascript'&gt;&lt;br&gt;var VisibleMenu = ''; // 記錄目前顯示的子選單的 ID&lt;br&gt;function switchMenu( theMainMenu, theSubMenu,thearrow, theEvent ){// 加入switchMenu程式(主選單，副選單，箭頭) 點擊執行&lt;br&gt;&amp;emsp;var SubMenu = document.getElementById( String(theSubMenu) );// 定義程式中的副選單&lt;br&gt;&amp;emsp;const div = document.getElementById( String(thearrow) );// 定義程式中的箭頭&lt;br&gt;&amp;emsp;if( SubMenu.style.display == 'none' ){ // 若副選單原本未顯示&lt;br&gt;&amp;emsp;&amp;emsp;SubMenu.style.display = 'block';// 顯示副選單&lt;br&gt;&amp;emsp;&amp;emsp;div.style.transform = 'rotate(135deg)';// 旋轉箭頭往下&lt;br&gt;&amp;emsp;&amp;emsp;VisibleMenu = theSubMenu;// 顯示選單為本副選單&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;else{ // 隱藏子選單&lt;br&gt;&amp;emsp;&amp;emsp;if( theEvent != 'MouseOver' || VisibleMenu != theSubMenu ){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;SubMenu.style.display = 'none';// 不顯示副選單&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;div.style.transform = 'rotate(45deg)';// 旋轉箭頭往右&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;VisibleMenu = '';// 顯示選單為空&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;}&lt;br&gt;&lt;/script&gt;&lt;/div&gt; &lt;/div&gt;</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>##第二種方法(click事件)&amp;emsp;&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;本方法讓滑鼠點下選單時才觸發箭頭旋轉的動畫，優點為較符合RWD的設計，缺點則是要多寫一段Javascript碼，改動幅度較大。若是不想那麼複雜，可以先改動成第一種方法看效果。 &lt;span style=&quot;color:red;&quot;&gt;(施工中)&lt;/span&gt;&lt;br&gt;&amp;#8226;新增兩個新變數(副標題的編號與箭頭編號)，在theme.php大概第4~6行處，程式如下：&lt;br&gt;&amp;emsp;$subMenu9='&amp;#39;subMenu9&amp;#39;';&lt;br&gt;&amp;emsp;$arrow9='&amp;#39;arrow9&amp;#39;';&lt;br&gt;&amp;#8226;新增數個變數(讓每個副標題與箭頭編號不重複)，並在$strnav中新增switchMenu程式(主選單，副選單，箭頭) 並用ul 包住副選單 dt包住主選單&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp; ...&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp; if(...){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp; if($c==1){$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;}&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$strnav.=&quot;\t\t&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;&quot;.sub&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;str&lt;/span&gt;($v,1).&quot;&lt;/a&gt;&lt;/dt&gt;\n&quot;;&lt;br&gt;&amp;emsp;&amp;emsp; }&lt;br&gt;&amp;emsp;&amp;emsp; ...&lt;br&gt;&amp;emsp; }&lt;br&gt;&amp;emsp;$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;}&lt;br&gt;→&lt;br&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp; ...&lt;br&gt;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;$number='1';&lt;br&gt;&amp;emsp;$numberr=&quot;2&quot;;&lt;/span&gt;&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp;if(...){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;if($c==1){$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;}&lt;br&gt;&lt;span style=&quot;color:red;&quot;&gt;&amp;emsp;&amp;emsp;&amp;emsp;$subMenu.=$number;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$arrow.=$numberr;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$number.=&quot;1&quot;;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$numberr.=&quot;2&quot;;&lt;/span&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;$strnav.=&quot;\t\t&lt;dt oncl&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;ick='switchMenu( this,&quot;.$subMenu.&quot;,&quot;.$arrow.&quot;)'&gt;&lt;a href='#'&gt;&quot;.sub&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;str($v,1).&quot;&lt;nowiki&gt;&lt;div id=&quot;.$arrow.&quot; class='arrow'&gt;&lt;/nowiki&gt;&lt;/div&gt;&lt;/a&gt;\n &lt;nowiki&gt;&lt;ul id=&quot;.$subMenu.&quot; class='sub-menu' style='display:none;'&gt; \n&quot;;&lt;/nowiki&gt;&lt;/span&gt; &lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;&amp;emsp;...&lt;br&gt;&amp;emsp;}&lt;br&gt;&amp;emsp;$strnav.=&quot;\t&lt;span style=&quot;color:red&quot;&gt;&lt;/ul&gt;&lt;/dt&gt;&lt;/span&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;}&lt;br&gt;&lt;/div&gt;&lt;br&gt;&amp;#8226;在工具選單中如上述方法修改(新增switchMenu程式(主選單，副選單，箭頭) 並用ul 包住副選單 dt包住主選單)：&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;&amp;emsp;&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;&lt;/nowiki&gt;工具&lt;/a&gt; &lt;/dt&gt;&lt;br&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;→&lt;br&gt;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;&lt;dt on&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;click='switchMenu( this,&quot;.$subMenu9.&quot;,&quot;.$arrow9.&quot;)'&gt;&lt;a href='#'&gt;工具&lt;nowiki&gt;&lt;div id='arrow9' class='arrow'&gt;&lt;/nowiki&gt;&lt;/div&gt;&lt;/a&gt;&lt;/span&gt;&lt;br&gt;&amp;emsp;&lt;nowiki&gt;&lt;ul id='subMenu9' class='sub-menu' style='display:none;'&gt;#加入副選單&lt;/nowiki&gt;&lt;br&gt;...&lt;br&gt;&lt;span style=&quot;color:red&quot;&gt;&lt;/ul&gt;&lt;/dt&gt;&lt;/span&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;#加入ul dt 結尾&lt;/div&gt;&lt;br&gt;&amp;#8226;新增switchmenu程式&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;&lt;script language = 'javascript'&gt;&lt;br&gt;var VisibleMenu = ''; // 記錄目前顯示的子選單的 ID&lt;br&gt;function switchMenu( theMainMenu, theSubMenu,thearrow, theEvent ){// 加入switchMenu程式(主選單，副選單，箭頭) 點擊執行&lt;br&gt;&amp;emsp;var SubMenu = document.getElementById( String(theSubMenu) );// 定義程式中的副選單&lt;br&gt;&amp;emsp;const div = document.getElementById( String(thearrow) );// 定義程式中的箭頭&lt;br&gt;&amp;emsp;if( SubMenu.style.display == 'none' ){ // 若副選單原本未顯示&lt;br&gt;&amp;emsp;&amp;emsp;SubMenu.style.display = 'block';// 顯示副選單&lt;br&gt;&amp;emsp;&amp;emsp;div.style.transform = 'rotate(135deg)';// 旋轉箭頭往下&lt;br&gt;&amp;emsp;&amp;emsp;VisibleMenu = theSubMenu;// 顯示選單為本副選單&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;else{ // 隱藏子選單&lt;br&gt;&amp;emsp;&amp;emsp;if( theEvent != 'MouseOver' || VisibleMenu != theSubMenu ){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;SubMenu.style.display = 'none';// 不顯示副選單&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;div.style.transform = 'rotate(45deg)';// 旋轉箭頭往右&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;VisibleMenu = '';// 顯示選單為空&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;}&lt;br&gt;&lt;/script&gt;&lt;/div&gt; &lt;/div&gt;</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>##第三種方法(details+summary)&amp;emsp;&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;本方法讓滑鼠按下選單時就會觸發箭頭旋轉的動畫，優點為改動不多，只需要改theme.php即可，不用改style.css，特別推薦。詳細新增的部分如下： (若是在設計RWD的頁面推薦本方法。)&lt;br&gt;&amp;#8226;在$strnav中用details 包住選單 summary包住標題 html會自動產生箭頭&amp;emsp;&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp;...&lt;br&gt;&amp;emsp;$strnav.=&quot;\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp;if(...){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;if($c==1){$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;}&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$strnav.=&quot;\t\t&lt;nowiki&gt;&lt;dt&gt;&lt;a hr&lt;/nowiki&gt;&lt;nowiki&gt;ef='#'&gt;&quot;.sub&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;str&lt;/span&gt;($v,1).&quot;&lt;/a&gt;&lt;/dt&gt;\n&quot;;&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;&amp;emsp;...&lt;br&gt;&amp;emsp;}&lt;br&gt;...}&lt;br&gt;→&lt;br&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp;...&lt;br&gt;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;&lt;br&gt;&amp;emsp;$strnav.=&quot;\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;details&gt;&lt;/nowiki&gt;\n&quot;;&lt;/span&gt;&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp;if(...){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;if($c==1){&lt;span style=&quot;color:red;&quot;&gt;$strnav.=&quot;\t&lt;/details&gt;&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;details&gt;&lt;/nowiki&gt;\n&quot;;&lt;/span&gt;}&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;$strnav.=&quot;\t\t&lt;nowiki&gt;&lt;summary&gt;&lt;/nowiki&gt;&lt;a href&lt;span&gt;&lt;/span&gt;='#'&gt;&quot;.sub&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;str($v,1).&quot;&lt;/a&gt;&lt;/summary&gt;\n &lt;/span&gt;&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;&amp;emsp;...&lt;br&gt;&amp;emsp;}&lt;br&gt;...}&lt;br&gt;&lt;/div&gt;&amp;#8226;在工具選單中如上述方法修改(用details 包住選單 summary包住標題)：&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;&amp;emsp;&lt;nowiki&gt;&lt;dt&gt;&lt;a hr&lt;/nowiki&gt;&lt;nowiki&gt;ef=&lt;/nowiki&gt;&lt;span&gt;&lt;/span&gt;&lt;nowiki&gt;'#'&gt;&lt;/nowiki&gt;工具&lt;/a&gt;&lt;/dt&gt;&lt;br&gt;...&lt;br&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;→&lt;br&gt;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;&lt;nowiki&gt;&lt;details&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;summary&gt;&lt;a hr&lt;/nowiki&gt;&lt;nowiki&gt;ef='#'&gt;&lt;/nowiki&gt;工具&lt;/a&gt;&lt;/summary&gt;&lt;br&gt;...&lt;br&gt;&lt;/details&gt;/dl&gt;&lt;/li&gt;\n&quot;;&#160; &lt;/span&gt;&lt;/div&gt; &amp;#8226;新增展開後收起程式&lt;span style=&quot;color:red&quot;&gt;(注意 這邊要放在主程式的.$strnav.被引進之後)&lt;/span&gt;&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;&lt;nowiki&gt;&lt;div id='xo-globalnav'&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&amp;emsp;&lt;div style='float:center;'&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&amp;emsp;&amp;emsp;&lt;ul class='navigation'&gt;&quot;.$strnav.&quot;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&amp;emsp;&amp;emsp;&lt;/ul&gt;&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&lt;nowiki&gt;&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;span style=&quot;color:red&quot;&gt;&lt;script language = 'javascript'&gt;&lt;br&gt;&amp;emsp;var details = [...document.querySelectorAll('details')];&lt;br&gt;&amp;emsp;document.addEventListener('click', function(e) {&lt;br&gt;&amp;emsp;if (!details.some(f =&gt; f.contains(e.target))) {&lt;br&gt;&amp;emsp;&amp;emsp;details.forEach(f =&gt; f.removeAttribute('open'));&lt;br&gt;&amp;emsp;} else {&lt;br&gt;&amp;emsp;&amp;emsp;details.forEach(f =&gt; !f.contains(e.target) ? f.removeAttribute('open') : &lt;nowiki&gt;''&lt;/nowiki&gt;);&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;})&lt;br&gt;&lt;/script&gt;&lt;/span&gt;&#160; &lt;/div&gt;</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>##第三種方法(details+summary)&amp;emsp;&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;本方法讓滑鼠按下選單時就會觸發箭頭旋轉的動畫，優點為改動不多，只需要改theme.php即可，不用改style.css，特別推薦。詳細新增的部分如下： (若是在設計RWD的頁面推薦本方法。)&lt;br&gt;&amp;#8226;在$strnav中用details 包住選單 summary包住標題 html會自動產生箭頭&amp;emsp;&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp;...&lt;br&gt;&amp;emsp;$strnav.=&quot;\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp;if(...){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;if($c==1){$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;}&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$strnav.=&quot;\t\t&lt;nowiki&gt;&lt;dt&gt;&lt;a hr&lt;/nowiki&gt;&lt;nowiki&gt;ef='#'&gt;&quot;.sub&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;str&lt;/span&gt;($v,1).&quot;&lt;/a&gt;&lt;/dt&gt;\n&quot;;&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;&amp;emsp;...&lt;br&gt;&amp;emsp;}&lt;br&gt;...}&lt;br&gt;→&lt;br&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp;...&lt;br&gt;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;&lt;br&gt;&amp;emsp;$strnav.=&quot;\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;details&gt;&lt;/nowiki&gt;\n&quot;;&lt;/span&gt;&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp;if(...){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;if($c==1){&lt;span style=&quot;color:red;&quot;&gt;$strnav.=&quot;\t&lt;/details&gt;&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;details&gt;&lt;/nowiki&gt;\n&quot;;&lt;/span&gt;}&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;$strnav.=&quot;\t\t&lt;nowiki&gt;&lt;summary&gt;&lt;/nowiki&gt;&lt;a href&lt;span&gt;&lt;/span&gt;='#'&gt;&quot;.sub&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;str($v,1).&quot;&lt;/a&gt;&lt;/summary&gt;\n &lt;/span&gt;&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;&amp;emsp;...&lt;br&gt;&amp;emsp;}&lt;br&gt;...}&lt;br&gt;&lt;/div&gt;&amp;#8226;在工具選單中如上述方法修改(用details 包住選單 summary包住標題)：&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;&amp;emsp;&lt;nowiki&gt;&lt;dt&gt;&lt;a hr&lt;/nowiki&gt;&lt;nowiki&gt;ef=&lt;/nowiki&gt;&lt;span&gt;&lt;/span&gt;&lt;nowiki&gt;'#'&gt;&lt;/nowiki&gt;工具&lt;/a&gt;&lt;/dt&gt;&lt;br&gt;...&lt;br&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;→&lt;br&gt;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;&lt;nowiki&gt;&lt;details&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;summary&gt;&lt;a hr&lt;/nowiki&gt;&lt;nowiki&gt;ef='#'&gt;&lt;/nowiki&gt;工具&lt;/a&gt;&lt;/summary&gt;&lt;br&gt;...&lt;br&gt;&lt;/details&gt;/<ins class="diffchange diffchange-inline">&lt;</ins>dl&gt;&lt;/li&gt;\n&quot;;&#160; &lt;/span&gt;&lt;/div&gt; &amp;#8226;新增展開後收起程式&lt;span style=&quot;color:red&quot;&gt;(注意 這邊要放在主程式的.$strnav.被引進之後)&lt;/span&gt;&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;&lt;nowiki&gt;&lt;div id='xo-globalnav'&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&amp;emsp;&lt;div style='float:center;'&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&amp;emsp;&amp;emsp;&lt;ul class='navigation'&gt;&quot;.$strnav.&quot;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&amp;emsp;&amp;emsp;&lt;/ul&gt;&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&lt;nowiki&gt;&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;span style=&quot;color:red&quot;&gt;&lt;script language = 'javascript'&gt;&lt;br&gt;&amp;emsp;var details = [...document.querySelectorAll('details')];&lt;br&gt;&amp;emsp;document.addEventListener('click', function(e) {&lt;br&gt;&amp;emsp;if (!details.some(f =&gt; f.contains(e.target))) {&lt;br&gt;&amp;emsp;&amp;emsp;details.forEach(f =&gt; f.removeAttribute('open'));&lt;br&gt;&amp;emsp;} else {&lt;br&gt;&amp;emsp;&amp;emsp;details.forEach(f =&gt; !f.contains(e.target) ? f.removeAttribute('open') : &lt;nowiki&gt;''&lt;/nowiki&gt;);&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;})&lt;br&gt;&lt;/script&gt;&lt;/span&gt;&#160; &lt;/div&gt;</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>===頁首頁尾===</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>===頁首頁尾===</div></td></tr> </table>

林芸伍 http://science4everyone.net/MediaWiki/index.php?title=RWD/theme&diff=6581&oldid=prev 2022-03-18T12:23:50Z

<p>‎<span dir="auto"><span class="autocomment">選單更改 (漢堡選單 箭頭動畫)</span></span></p> <table class="diff diff-contentalign-left" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr style="vertical-align: top;" lang="zh-TW"> <td colspan="2" style="background-color: white; color:black; text-align: center;">←上個修訂</td> <td colspan="2" style="background-color: white; color:black; text-align: center;">於 2022年3月18日 (五) 12:23 的修訂</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l18" >行 18：</td> <td colspan="2" class="diff-lineno">行 18：</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#*程式：&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;&lt;nowiki&gt;&lt;div id='xo-banner'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;div id='xo-globalnav'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;→&lt;br&gt;&lt;nowiki&gt;&lt;div id='xo-banner'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;input type='checkbox' name='menu-switcher' id='menu-switcher' /&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;!--新增核取方塊 for 展開選單--&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;label for='menu-switcher' class='hamburger'&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;!--漢堡選單按鈕 --&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;div class='hamburger-line'&gt;&lt;/div&gt;&lt;/label&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;!--漢堡選單按鈕線條--&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;div id='xo-globalnav'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;/div&gt;</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#*程式：&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;&lt;nowiki&gt;&lt;div id='xo-banner'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;div id='xo-globalnav'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;→&lt;br&gt;&lt;nowiki&gt;&lt;div id='xo-banner'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;input type='checkbox' name='menu-switcher' id='menu-switcher' /&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;!--新增核取方塊 for 展開選單--&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;label for='menu-switcher' class='hamburger'&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;!--漢堡選單按鈕 --&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;div class='hamburger-line'&gt;&lt;/div&gt;&lt;/label&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;!--漢堡選單按鈕線條--&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;div id='xo-globalnav'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;/div&gt;</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#箭頭動畫&lt;br&gt;本小節中，將在選單內放置一個箭頭，並做出旋轉的動畫設定。本頁面提供兩個方法，詳細新增的部分如下</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#箭頭動畫&lt;br&gt;本小節中，將在選單內放置一個箭頭，並做出旋轉的動畫設定。本頁面提供兩個方法，詳細新增的部分如下</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>##第一種方法(hover事件)<del class="diffchange diffchange-inline">，本方法讓滑鼠經過選單時就會觸發箭頭旋轉的動畫，優點為改動不多，缺點則是在RWD狀況下較難操縱，因為平板、手機沒有滑鼠，事件設定會比較不一樣。詳細新增的部分如下面兩個： (若是在設計RWD的頁面推薦第二或第三種方法。)</del></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>##第一種方法(hover事件)<ins class="diffchange diffchange-inline">&amp;emsp;</ins>&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;<ins class="diffchange diffchange-inline">本方法讓滑鼠經過選單時就會觸發箭頭旋轉的動畫，優點為改動不多，缺點則是在RWD狀況下較難操縱，因為平板、手機沒有滑鼠，事件設定會比較不一樣。詳細新增的部分如下面兩個： (若是在設計RWD的頁面推薦第二或第三種方法。)</ins>&lt;<ins class="diffchange diffchange-inline">br</ins>&gt;<ins class="diffchange diffchange-inline">&amp;#8226;程式(theme</ins>.<ins class="diffchange diffchange-inline">php第20行)：&lt;br&gt;&lt;nowiki&gt;&amp;emsp;$strnav.=&quot;</ins>\t\t&lt;dt&gt;&lt;a href='#'&gt;&quot;.subst&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;r&lt;/span&gt;&lt;nowiki&gt;($v,1).&quot;&lt;/a&gt;&lt;/dt&gt;\n&quot;;#&lt;!--加入箭頭&#160; --&gt; &lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;</ins>→&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;</ins>&lt;nowiki&gt;$strnav.=&quot;\t\t&lt;dt&gt;&lt;a href='#'&gt;&quot;.subst&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;r&lt;/span&gt;&lt;nowiki&gt;($v,1).&quot;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;div class='arrow'&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;/div&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;/a&gt;&lt;/dt&gt;\n&quot;;*/ &lt;/nowiki&gt;&lt;<ins class="diffchange diffchange-inline">br</ins>&gt;<ins class="diffchange diffchange-inline">&amp;</ins>#<ins class="diffchange diffchange-inline">8226;</ins>程式(theme.php第35行)：&lt;<ins class="diffchange diffchange-inline">br&gt;&amp;emsp;</ins>&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;工具&lt;/a&gt; &lt;/dt&gt;&lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;</ins>→&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;</ins>&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;工具&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;div class='arrow'&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;/div&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;/a&gt; &lt;/dt&gt;!--加入箭頭&#160; --&gt;&lt;/nowiki&gt;&lt;/div&gt;</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline">##*程式(theme.php第20行)：</del>&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;&lt;<del class="diffchange diffchange-inline">nowiki</del>&gt;<del class="diffchange diffchange-inline">$strnav</del>.<del class="diffchange diffchange-inline">=&quot;</del>\t\t&lt;dt&gt;&lt;a href='#'&gt;&quot;.subst&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;r&lt;/span&gt;&lt;nowiki&gt;($v,1).&quot;&lt;/a&gt;&lt;/dt&gt;\n&quot;;#&lt;!--加入箭頭&#160; --&gt; &lt;/nowiki&gt;&lt;br&gt;→&lt;br&gt;&lt;nowiki&gt;$strnav.=&quot;\t\t&lt;dt&gt;&lt;a href='#'&gt;&quot;.subst&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;r&lt;/span&gt;&lt;nowiki&gt;($v,1).&quot;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;div class='arrow'&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;/div&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;/a&gt;&lt;/dt&gt;\n&quot;;*/ &lt;/nowiki&gt;&lt;<del class="diffchange diffchange-inline">/div</del>&gt;</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>##第二種方法(click事件)<ins class="diffchange diffchange-inline">&amp;emsp;</ins>&lt;<ins class="diffchange diffchange-inline">div class</ins>=&quot;<ins class="diffchange diffchange-inline">mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;本方法讓滑鼠點下選單時才觸發箭頭旋轉的動畫，優點為較符合RWD的設計，缺點則是要多寫一段Javascript碼，改動幅度較大。若是不想那麼複雜，可以先改動成第一種方法看效果。 &lt;span style=&quot;color</ins>:red;&quot;&gt;(施工中)&lt;/span&gt;<ins class="diffchange diffchange-inline">&lt;br&gt;&amp;</ins>#<ins class="diffchange diffchange-inline">8226;</ins>新增兩個新變數(副標題的編號與箭頭編號)，在theme.php大概第4~6行處，程式如下：&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;</ins>$subMenu9='&amp;#39;subMenu9&amp;#39;';&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;</ins>$arrow9='&amp;#39;arrow9&amp;#39;';<ins class="diffchange diffchange-inline">&lt;br&gt;&amp;</ins>#<ins class="diffchange diffchange-inline">8226;</ins>新增數個變數(讓每個副標題與箭頭編號不重複)，並在$strnav中新增switchMenu程式(主選單，副選單，箭頭) 並用ul 包住副選單 dt包住主選單&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp; ...&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp; if(...){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp; if($c==1){$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;}&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$strnav.=&quot;\t\t&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;&quot;.sub&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;str&lt;/span&gt;($v,1).&quot;&lt;/a&gt;&lt;/dt&gt;\n&quot;;&lt;br&gt;&amp;emsp;&amp;emsp; }&lt;br&gt;&amp;emsp;&amp;emsp; ...&lt;br&gt;&amp;emsp; }&lt;br&gt;&amp;emsp;$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;}&lt;br&gt;→&lt;br&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp; ...&lt;br&gt;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;$number='1';&lt;br&gt;&amp;emsp;$numberr=&quot;2&quot;;&lt;/span&gt;&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp;if(...){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;if($c==1){$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;}&lt;br&gt;&lt;span style=&quot;color:red;&quot;&gt;&amp;emsp;&amp;emsp;&amp;emsp;$subMenu.=$number;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$arrow.=$numberr;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$number.=&quot;1&quot;;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$numberr.=&quot;2&quot;;&lt;/span&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;$strnav.=&quot;\t\t&lt;dt oncl&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;ick='switchMenu( this,&quot;.$subMenu.&quot;,&quot;.$arrow.&quot;)'&gt;&lt;a href='#'&gt;&quot;.sub&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;str($v,1).&quot;&lt;nowiki&gt;&lt;div id=&quot;.$arrow.&quot; class='arrow'&gt;&lt;/nowiki&gt;&lt;/div&gt;&lt;/a&gt;\n &lt;nowiki&gt;&lt;ul id=&quot;.$subMenu.&quot; class='sub-menu' style='display:none;'&gt; \n&quot;;&lt;/nowiki&gt;&lt;/span&gt; &lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;&amp;emsp;...&lt;br&gt;&amp;emsp;}&lt;br&gt;&amp;emsp;$strnav.=&quot;\t&lt;span style=&quot;color:red&quot;&gt;&lt;/ul&gt;&lt;/dt&gt;&lt;/span&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;}&lt;br&gt;&lt;/div&gt;<ins class="diffchange diffchange-inline">&lt;br&gt;&amp;</ins>#<ins class="diffchange diffchange-inline">8226;</ins>在工具選單中如上述方法修改(新增switchMenu程式(主選單，副選單，箭頭) 並用ul 包住副選單 dt包住主選單)：&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;&amp;emsp;&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;&lt;/nowiki&gt;工具&lt;/a&gt; &lt;/dt&gt;&lt;br&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;→&lt;br&gt;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;&lt;dt on&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;click='switchMenu( this,&quot;.$subMenu9.&quot;,&quot;.$arrow9.&quot;)'&gt;&lt;a href='#'&gt;工具&lt;nowiki&gt;&lt;div id='arrow9' class='arrow'&gt;&lt;/nowiki&gt;&lt;/div&gt;&lt;/a&gt;&lt;/span&gt;&lt;br&gt;&amp;emsp;&lt;nowiki&gt;&lt;ul id='subMenu9' class='sub-menu' style='display:none;'&gt;#加入副選單&lt;/nowiki&gt;&lt;br&gt;...&lt;br&gt;&lt;span style=&quot;color:red&quot;&gt;&lt;/ul&gt;&lt;/dt&gt;&lt;/span&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;#加入ul dt 結尾&lt;/div&gt;<ins class="diffchange diffchange-inline">&lt;br&gt;&amp;</ins>#<ins class="diffchange diffchange-inline">8226;</ins>新增switchmenu程式&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;&lt;script language = 'javascript'&gt;&lt;br&gt;var VisibleMenu = ''; // 記錄目前顯示的子選單的 ID&lt;br&gt;function switchMenu( theMainMenu, theSubMenu,thearrow, theEvent ){// 加入switchMenu程式(主選單，副選單，箭頭) 點擊執行&lt;br&gt;&amp;emsp;var SubMenu = document.getElementById( String(theSubMenu) );// 定義程式中的副選單&lt;br&gt;&amp;emsp;const div = document.getElementById( String(thearrow) );// 定義程式中的箭頭&lt;br&gt;&amp;emsp;if( SubMenu.style.display == 'none' ){ // 若副選單原本未顯示&lt;br&gt;&amp;emsp;&amp;emsp;SubMenu.style.display = 'block';// 顯示副選單&lt;br&gt;&amp;emsp;&amp;emsp;div.style.transform = 'rotate(135deg)';// 旋轉箭頭往下&lt;br&gt;&amp;emsp;&amp;emsp;VisibleMenu = theSubMenu;// 顯示選單為本副選單&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;else{ // 隱藏子選單&lt;br&gt;&amp;emsp;&amp;emsp;if( theEvent != 'MouseOver' || VisibleMenu != theSubMenu ){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;SubMenu.style.display = 'none';// 不顯示副選單&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;div.style.transform = 'rotate(45deg)';// 旋轉箭頭往右&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;VisibleMenu = '';// 顯示選單為空&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;}&lt;br&gt;&lt;/script<ins class="diffchange diffchange-inline">&gt;&lt;/div</ins>&gt; &lt;/div&gt;</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>#<del class="diffchange diffchange-inline">#*</del>程式(theme.php第35行)：&lt;<del class="diffchange diffchange-inline">div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;</del>&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;工具&lt;/a&gt; &lt;/dt&gt;&lt;/nowiki&gt;&lt;br&gt;→&lt;br&gt;&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;工具&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;div class='arrow'&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;/div&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;/a&gt; &lt;/dt&gt;!--加入箭頭&#160; --&gt;&lt;/nowiki&gt;&lt;/div&gt;</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>##第三種方法(details+summary)<ins class="diffchange diffchange-inline">&amp;emsp;&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;本方法讓滑鼠按下選單時就會觸發箭頭旋轉的動畫，優點為改動不多，只需要改theme.php即可，不用改style</ins>.css，特別推薦。詳細新增的部分如下： (若是在設計RWD的頁面推薦本方法。)<ins class="diffchange diffchange-inline">&lt;br&gt;&amp;#8226;在$strnav中用details 包住選單 summary包住標題 html會自動產生箭頭&amp;emsp;&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp;...&lt;br&gt;&amp;emsp;$strnav.=&quot;\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp;if(...){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;if($c==1){$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;}&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$strnav.=&quot;\t\t&lt;nowiki&gt;&lt;dt&gt;&lt;a hr&lt;/nowiki&gt;&lt;nowiki&gt;ef='#'&gt;&quot;.sub&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;str&lt;/span&gt;($v,1).&quot;&lt;/a&gt;&lt;/dt&gt;\n&quot;;&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;&amp;emsp;...&lt;br&gt;&amp;emsp;}&lt;br&gt;...}&lt;br&gt;→&lt;br&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp;...&lt;br&gt;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;&lt;br&gt;&amp;emsp;$strnav.=&quot;\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;details&gt;&lt;/nowiki&gt;\n&quot;;&lt;/span&gt;&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp;if(...){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;if($c==1){&lt;span style=&quot;color:red;&quot;&gt;$strnav.=&quot;\t&lt;/details&gt;&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;details&gt;&lt;/nowiki&gt;\n&quot;;&lt;/span&gt;}&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;$strnav.=&quot;\t\t&lt;nowiki&gt;&lt;summary&gt;&lt;/nowiki&gt;&lt;a href&lt;span&gt;&lt;/span&gt;='#'&gt;&quot;.sub&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;str($v,1).&quot;&lt;/a&gt;&lt;/summary&gt;\n &lt;/span&gt;&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;&amp;emsp;...&lt;br&gt;&amp;emsp;}&lt;br&gt;...}&lt;br&gt;&lt;/div&gt;&amp;#8226;在工具選單中如上述方法修改(用details 包住選單 summary包住標題)：&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;&amp;emsp;&lt;nowiki&gt;&lt;dt&gt;&lt;a hr&lt;/nowiki&gt;&lt;nowiki&gt;ef=&lt;/nowiki&gt;&lt;span&gt;&lt;/span&gt;&lt;nowiki&gt;'#'&gt;&lt;/nowiki&gt;工具&lt;/a&gt;&lt;/dt&gt;&lt;br&gt;...&lt;br&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;→&lt;br&gt;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;&lt;nowiki&gt;&lt;details&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;summary&gt;&lt;a hr&lt;/nowiki&gt;&lt;nowiki&gt;ef='#'&gt;&lt;/nowiki&gt;工具&lt;/a&gt;&lt;/summary&gt;&lt;br&gt;...&lt;br&gt;&lt;/details&gt;/dl&gt;&lt;/li&gt;\n&quot;;&#160; &lt;/span&gt;&lt;/div&gt; &amp;#8226;新增展開後收起程式&lt;span style=&quot;color:red&quot;&gt;(注意 這邊要放在主程式的.$strnav.被引進之後)&lt;/span&gt;&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;&lt;nowiki&gt;&lt;div id='xo-globalnav'&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&amp;emsp;&lt;div style='float:center;'&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&amp;emsp;&amp;emsp;&lt;ul class='navigation'&gt;&quot;.$strnav.&quot;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&amp;emsp;&amp;emsp;&lt;/ul&gt;&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&lt;nowiki&gt;&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;span style=&quot;color:red&quot;&gt;&lt;script language = 'javascript'&gt;&lt;br&gt;&amp;emsp;var details = [...document.querySelectorAll('details')];&lt;br&gt;&amp;emsp;document.addEventListener('click', function(e) {&lt;br&gt;&amp;emsp;if (!details.some(f =&gt; f.contains(e.target))) {&lt;br&gt;&amp;emsp;&amp;emsp;details.forEach(f =&gt; f.removeAttribute('open'));&lt;br&gt;&amp;emsp;} else {&lt;br&gt;&amp;emsp;&amp;emsp;details.forEach(f =&gt; !f.contains(e.target) ? f.removeAttribute('open') : &lt;nowiki&gt;''&lt;/nowiki&gt;);&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;})&lt;br&gt;&lt;/script&gt;&lt;/span&gt;&#160; &lt;/div&gt;</ins></div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>##第二種方法(click事件)<del class="diffchange diffchange-inline">：本方法讓滑鼠點下選單時才觸發箭頭旋轉的動畫，優點為較符合RWD的設計，缺點則是要多寫一段Javascript碼，改動幅度較大。若是不想那麼複雜，可以先改動成第一種方法看效果。 </del>&lt;<del class="diffchange diffchange-inline">span style</del>=&quot;<del class="diffchange diffchange-inline">color</del>:red;&quot;&gt;(施工中)&lt;/span&gt;</div></td><td colspan="2">&#160;</td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>#<del class="diffchange diffchange-inline">#*</del>新增兩個新變數(副標題的編號與箭頭編號)，在theme.php大概第4~6行處，程式如下：&lt;br&gt;$subMenu9='&amp;#39;subMenu9&amp;#39;';&lt;br&gt;$arrow9='&amp;#39;arrow9&amp;#39;';</div></td><td colspan="2">&#160;</td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>#<del class="diffchange diffchange-inline">#*</del>新增數個變數(讓每個副標題與箭頭編號不重複)，並在$strnav中新增switchMenu程式(主選單，副選單，箭頭) 並用ul 包住副選單 dt包住主選單&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp; ...&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp; if(...){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp; if($c==1){$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;}&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$strnav.=&quot;\t\t&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;&quot;.sub&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;str&lt;/span&gt;($v,1).&quot;&lt;/a&gt;&lt;/dt&gt;\n&quot;;&lt;br&gt;&amp;emsp;&amp;emsp; }&lt;br&gt;&amp;emsp;&amp;emsp; ...&lt;br&gt;&amp;emsp; }&lt;br&gt;&amp;emsp;$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;}&lt;br&gt;→&lt;br&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp; ...&lt;br&gt;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;$number='1';&lt;br&gt;&amp;emsp;$numberr=&quot;2&quot;;&lt;/span&gt;&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp;if(...){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;if($c==1){$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;}&lt;br&gt;&lt;span style=&quot;color:red;&quot;&gt;&amp;emsp;&amp;emsp;&amp;emsp;$subMenu.=$number;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$arrow.=$numberr;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$number.=&quot;1&quot;;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$numberr.=&quot;2&quot;;&lt;/span&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;$strnav.=&quot;\t\t&lt;dt oncl&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;ick='switchMenu( this,&quot;.$subMenu.&quot;,&quot;.$arrow.&quot;)'&gt;&lt;a href='#'&gt;&quot;.sub&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;str($v,1).&quot;&lt;nowiki&gt;&lt;div id=&quot;.$arrow.&quot; class='arrow'&gt;&lt;/nowiki&gt;&lt;/div&gt;&lt;/a&gt;\n &lt;nowiki&gt;&lt;ul id=&quot;.$subMenu.&quot; class='sub-menu' style='display:none;'&gt; \n&quot;;&lt;/nowiki&gt;&lt;/span&gt; &lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;&amp;emsp;...&lt;br&gt;&amp;emsp;}&lt;br&gt;&amp;emsp;$strnav.=&quot;\t&lt;span style=&quot;color:red&quot;&gt;&lt;/ul&gt;&lt;/dt&gt;&lt;/span&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;}&lt;br&gt;&lt;/div&gt;</div></td><td colspan="2">&#160;</td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>#<del class="diffchange diffchange-inline">#*</del>在工具選單中如上述方法修改(新增switchMenu程式(主選單，副選單，箭頭) 並用ul 包住副選單 dt包住主選單)：&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;&amp;emsp;&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;&lt;/nowiki&gt;工具&lt;/a&gt; &lt;/dt&gt;&lt;br&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;→&lt;br&gt;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;&lt;dt on&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;click='switchMenu( this,&quot;.$subMenu9.&quot;,&quot;.$arrow9.&quot;)'&gt;&lt;a href='#'&gt;工具&lt;nowiki&gt;&lt;div id='arrow9' class='arrow'&gt;&lt;/nowiki&gt;&lt;/div&gt;&lt;/a&gt;&lt;/span&gt;&lt;br&gt;&amp;emsp;&lt;nowiki&gt;&lt;ul id='subMenu9' class='sub-menu' style='display:none;'&gt;#加入副選單&lt;/nowiki&gt;&lt;br&gt;...&lt;br&gt;&lt;span style=&quot;color:red&quot;&gt;&lt;/ul&gt;&lt;/dt&gt;&lt;/span&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;#加入ul dt 結尾&lt;/div&gt;</div></td><td colspan="2">&#160;</td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>#<del class="diffchange diffchange-inline">#*</del>新增switchmenu程式&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;&lt;script language = 'javascript'&gt;&lt;br&gt;var VisibleMenu = ''; // 記錄目前顯示的子選單的 ID&lt;br&gt;function switchMenu( theMainMenu, theSubMenu,thearrow, theEvent ){// 加入switchMenu程式(主選單，副選單，箭頭) 點擊執行&lt;br&gt;&amp;emsp;var SubMenu = document.getElementById( String(theSubMenu) );// 定義程式中的副選單&lt;br&gt;&amp;emsp;const div = document.getElementById( String(thearrow) );// 定義程式中的箭頭&lt;br&gt;&amp;emsp;if( SubMenu.style.display == 'none' ){ // 若副選單原本未顯示&lt;br&gt;&amp;emsp;&amp;emsp;SubMenu.style.display = 'block';// 顯示副選單&lt;br&gt;&amp;emsp;&amp;emsp;div.style.transform = 'rotate(135deg)';// 旋轉箭頭往下&lt;br&gt;&amp;emsp;&amp;emsp;VisibleMenu = theSubMenu;// 顯示選單為本副選單&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;else{ // 隱藏子選單&lt;br&gt;&amp;emsp;&amp;emsp;if( theEvent != 'MouseOver' || VisibleMenu != theSubMenu ){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;SubMenu.style.display = 'none';// 不顯示副選單&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;div.style.transform = 'rotate(45deg)';// 旋轉箭頭往右&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;VisibleMenu = '';// 顯示選單為空&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;}&lt;br&gt;&lt;/script&gt;&lt;/div&gt;</div></td><td colspan="2">&#160;</td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>##第三種方法(details+summary)<del class="diffchange diffchange-inline">本方法讓滑鼠按下選單時就會觸發箭頭旋轉的動畫，優點為改動不多，只需要改theme.php即可，不用改style</del>.css，特別推薦。詳細新增的部分如下： (若是在設計RWD的頁面推薦本方法。)</div></td><td colspan="2">&#160;</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>===頁首頁尾===</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>===頁首頁尾===</div></td></tr> </table>

林芸伍 http://science4everyone.net/MediaWiki/index.php?title=RWD/theme&diff=6580&oldid=prev 2022-03-18T10:43:25Z

<p>‎<span dir="auto"><span class="autocomment">字體工具箱</span></span></p> <table class="diff diff-contentalign-left" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr style="vertical-align: top;" lang="zh-TW"> <td colspan="2" style="background-color: white; color:black; text-align: center;">←上個修訂</td> <td colspan="2" style="background-color: white; color:black; text-align: center;">於 2022年3月18日 (五) 10:43 的修訂</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l42" >行 42：</td> <td colspan="2" class="diff-lineno">行 42：</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#* $font_Size=&quot;字級：&quot;;</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#* $font_Size=&quot;字級：&quot;;</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#新增改變字體的javascript code，放在head中的最後面：</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#新增改變字體的javascript code，放在head中的最後面：</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>#*<del class="diffchange diffchange-inline">原始程式： </del> &lt;<del class="diffchange diffchange-inline">br</del>&gt;&lt;head&gt;&lt;br&gt;...&lt;br&gt;&lt;/head&gt;&lt;br&gt;→&lt;br&gt;&lt;head&gt;&lt;br&gt;...&lt;br&gt;&lt;span style=&quot;color:red;&quot;&gt;&lt;nowiki&gt; &lt;script&gt;&lt;!--加入字體工具箱功能 --&gt;&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&lt;nowiki&gt;function zoomInInFontSize() {&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt;var obj = document.getElementById('content'),//從content選取字&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; curSize = '';&#160; // 當前字體大小&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; obj.style.fontSize =&#160; '40px';//變成特大字體}&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&lt;nowiki&gt;function zoomInFontSize() {&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; var obj = document.getElementById('content'),//從content選取字&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; curSize = '';&#160; // 當前字體大小&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt;obj.style.fontSize = '30px';//變成大字體}&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&lt;nowiki&gt;function zoomFontSize() {&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; var obj = document.getElementById('content'),//從content選取字&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; curSize = '';&#160; // 當前字體大小&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt;obj.style.fontSize =&#160; '16px';//變成原始字體}&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&lt;nowiki&gt;function zoomOutFontSize() {&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt;var obj = document.getElementById('content'),//從content選取字&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; curSize = '';&#160; // 當前字體大小&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; obj.style.fontSize =&#160; '12px';//變成小字體}&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&lt;nowiki&gt; // 創建一個容器，來測算當前字體大小&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&lt;nowiki&gt; var getFontSize = function() {&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; var oDiv = document.createElement('div');&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; oDiv.innerHTML = 'ABC測試';&#160; // 寫入任意字元&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; oDiv.style.lineHeight = 1;&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; oDiv.style.position = 'absolute';&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; oDiv.style.top = '-9999em';&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; document.body.appendChild(oDiv);&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; return oDiv.offsetHeight; };&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&lt;nowiki&gt;&#160; &#160; &lt;/script&gt;&lt;/nowiki&gt;&lt;/span&gt;&lt;br&gt;&lt;/head&gt;</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>#*<ins class="diffchange diffchange-inline">程式： </ins> &lt;<ins class="diffchange diffchange-inline">div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;</ins>&gt;&lt;head&gt;&lt;br&gt;...&lt;br&gt;&lt;/head&gt;&lt;br&gt;→&lt;br&gt;&lt;head&gt;&lt;br&gt;...&lt;br&gt;&lt;span style=&quot;color:red;&quot;&gt;&lt;nowiki&gt; &lt;script&gt;&lt;!--加入字體工具箱功能 --&gt;&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&lt;nowiki&gt;function zoomInInFontSize() {&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt;var obj = document.getElementById('content'),//從content選取字&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; curSize = '';&#160; // 當前字體大小&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; obj.style.fontSize =&#160; '40px';//變成特大字體}&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&lt;nowiki&gt;function zoomInFontSize() {&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; var obj = document.getElementById('content'),//從content選取字&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; curSize = '';&#160; // 當前字體大小&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt;obj.style.fontSize = '30px';//變成大字體}&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&lt;nowiki&gt;function zoomFontSize() {&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; var obj = document.getElementById('content'),//從content選取字&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; curSize = '';&#160; // 當前字體大小&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt;obj.style.fontSize =&#160; '16px';//變成原始字體}&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&lt;nowiki&gt;function zoomOutFontSize() {&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt;var obj = document.getElementById('content'),//從content選取字&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; curSize = '';&#160; // 當前字體大小&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; obj.style.fontSize =&#160; '12px';//變成小字體}&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&lt;nowiki&gt; // 創建一個容器，來測算當前字體大小&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&lt;nowiki&gt; var getFontSize = function() {&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; var oDiv = document.createElement('div');&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; oDiv.innerHTML = 'ABC測試';&#160; // 寫入任意字元&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; oDiv.style.lineHeight = 1;&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; oDiv.style.position = 'absolute';&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; oDiv.style.top = '-9999em';&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; document.body.appendChild(oDiv);&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&lt;nowiki&gt; return oDiv.offsetHeight; };&lt;/nowiki&gt;&lt;br&gt;&amp;emsp;&lt;nowiki&gt;&#160; &#160; &lt;/script&gt;&lt;/nowiki&gt;&lt;/span&gt;&lt;br&gt;&lt;/head<ins class="diffchange diffchange-inline">&gt;&lt;/div</ins>&gt;</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#新增改變字體的按鈕方塊*3，放在header與xo-banner之間：</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#新增改變字體的按鈕方塊*3，放在header與xo-banner之間：</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>#*<del class="diffchange diffchange-inline">原始程式：</del>&lt;<del class="diffchange diffchange-inline">br</del>&gt;&lt;nowiki&gt;&lt;div id='header'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;div id='xo-banner'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;→&lt;br&gt;&lt;nowiki&gt;&lt;div id='header'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;&lt;br&gt;&lt;nowiki&gt;&lt;div id='font_box'color='#000'&gt;&lt;/nowiki&gt;&quot;.$font_Size.&quot;&lt;br&gt;&lt;input type='button' value='特' on click=&lt;span&gt;&lt;/span&gt;'zoomInInFontSize()'&gt;&lt;br&gt;&lt;input type='button' value='大' on click=&lt;span&gt;&lt;/span&gt;'zoomInFontSize()'&gt;&#160; &lt;br&gt;&lt;input type='button' value='原' on click=&lt;span&gt;&lt;/span&gt;'zoomFontSize()'&gt;&lt;br&gt;&lt;input type='button' value='小' on click=&lt;span&gt;&lt;/span&gt;'zoomOutFontSize()'&gt;&#160; &lt;br&gt;&#160; &lt;nowiki&gt;&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;/span &gt;&lt;nowiki&gt;&lt;div id='xo-banner'&gt;...&lt;/div&gt;&lt;/nowiki&gt;</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>#*<ins class="diffchange diffchange-inline">程式：</ins>&lt;<ins class="diffchange diffchange-inline">div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;</ins>&gt;&lt;nowiki&gt;&lt;div id='header'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;div id='xo-banner'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;→&lt;br&gt;&lt;nowiki&gt;&lt;div id='header'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;&lt;br&gt;&lt;nowiki&gt;&lt;div id='font_box'color='#000'&gt;&lt;/nowiki&gt;&quot;.$font_Size.&quot;&lt;br&gt;&lt;input type='button' value='特' on click=&lt;span&gt;&lt;/span&gt;'zoomInInFontSize()'&gt;&lt;br&gt;&lt;input type='button' value='大' on click=&lt;span&gt;&lt;/span&gt;'zoomInFontSize()'&gt;&#160; &lt;br&gt;&lt;input type='button' value='原' on click=&lt;span&gt;&lt;/span&gt;'zoomFontSize()'&gt;&lt;br&gt;&lt;input type='button' value='小' on click=&lt;span&gt;&lt;/span&gt;'zoomOutFontSize()'&gt;&#160; &lt;br&gt;&#160; &lt;nowiki&gt;&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;/span &gt;&lt;nowiki&gt;&lt;div id='xo-banner'&gt;...&lt;/div&gt;&lt;/nowiki<ins class="diffchange diffchange-inline">&gt;&lt;/div</ins>&gt;</div></td></tr> </table>

林芸伍 http://science4everyone.net/MediaWiki/index.php?title=RWD/theme&diff=6579&oldid=prev 2022-03-18T10:41:45Z

<p>‎<span dir="auto"><span class="autocomment">頁首頁尾</span></span></p> <table class="diff diff-contentalign-left" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr style="vertical-align: top;" lang="zh-TW"> <td colspan="2" style="background-color: white; color:black; text-align: center;">←上個修訂</td> <td colspan="2" style="background-color: white; color:black; text-align: center;">於 2022年3月18日 (五) 10:41 的修訂</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l33" >行 33：</td> <td colspan="2" class="diff-lineno">行 33：</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#*$telephone=&quot;電話：02-XXXXXXXX&quot;;</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#*$telephone=&quot;電話：02-XXXXXXXX&quot;;</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#接下來在body的一開始，加入以下header程式碼：(其中SLOGAN為已定義變數，在SiteConstant.php檔案中，可回RWD頁面確認)</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#接下來在body的一開始，加入以下header程式碼：(其中SLOGAN為已定義變數，在SiteConstant.php檔案中，可回RWD頁面確認)</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>#*<del class="diffchange diffchange-inline">原始程式：</del>&lt;<del class="diffchange diffchange-inline">br</del>&gt;&lt;nowiki&gt;&lt;body&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;div id='xo-banner'&gt;&lt;/nowiki&gt;&lt;br&gt;→&lt;br&gt;&lt;nowiki&gt;&lt;body&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;div id='header'&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;&quot;.SLOGAN.&quot;&lt;/span&gt;&lt;nowiki&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;/div&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;div id='xo-banner'&gt;&lt;/nowiki&gt;&lt;br&gt;</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>#*<ins class="diffchange diffchange-inline">程式：</ins>&lt;<ins class="diffchange diffchange-inline">div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;</ins>&gt;&lt;nowiki&gt;&lt;body&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;div id='xo-banner'&gt;&lt;/nowiki&gt;&lt;br&gt;→&lt;br&gt;&lt;nowiki&gt;&lt;body&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;div id='header'&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;&quot;.SLOGAN.&quot;&lt;/span&gt;&lt;nowiki&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;/div&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;div id='xo-banner'&gt;&lt;/nowiki&gt;&lt;br<ins class="diffchange diffchange-inline">&gt;&lt;/div</ins>&gt;</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#最後在content和html2之間新增footer程式碼：</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#最後在content和html2之間新增footer程式碼：</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>#*<del class="diffchange diffchange-inline">原始程式：</del>&lt;<del class="diffchange diffchange-inline">br</del>&gt;&lt;nowiki&gt;&lt;div id=content style='float:center;'&gt;\n&quot;;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;$html2=&quot;&lt;/div&gt;\n&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;/body&gt;\n&lt;/html&gt;&quot;;&lt;/nowiki&gt;&lt;br&gt;→&lt;br&gt;&lt;nowiki&gt;&lt;div id=content style='float:center;'&gt;\n&quot;;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;$html2=&quot;&lt;/div&gt;\n&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;div id='footer'&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;&quot;.SLOGAN.&quot;&quot;.$telephone.&quot;&lt;/span&gt;&lt;nowiki&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;/div&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;/body&gt;\n&lt;/html&gt;&quot;;&lt;/nowiki&gt;</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>#*<ins class="diffchange diffchange-inline">程式：</ins>&lt;<ins class="diffchange diffchange-inline">div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;</ins>&gt;&lt;nowiki&gt;&lt;div id=content style='float:center;'&gt;\n&quot;;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;$html2=&quot;&lt;/div&gt;\n&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;/body&gt;\n&lt;/html&gt;&quot;;&lt;/nowiki&gt;&lt;br&gt;→&lt;br&gt;&lt;nowiki&gt;&lt;div id=content style='float:center;'&gt;\n&quot;;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;$html2=&quot;&lt;/div&gt;\n&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;div id='footer'&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;&quot;.SLOGAN.&quot;&quot;.$telephone.&quot;&lt;/span&gt;&lt;nowiki&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;/div&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;/body&gt;\n&lt;/html&gt;&quot;;&lt;/nowiki<ins class="diffchange diffchange-inline">&gt;&lt;/div</ins>&gt;</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>===字體工具箱===</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>===字體工具箱===</div></td></tr> </table>

林芸伍 http://science4everyone.net/MediaWiki/index.php?title=RWD/theme&diff=6578&oldid=prev 2022-03-18T10:40:34Z

<p>‎<span dir="auto"><span class="autocomment">RWD 整體畫面視覺</span></span></p> <table class="diff diff-contentalign-left" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr style="vertical-align: top;" lang="zh-TW"> <td colspan="2" style="background-color: white; color:black; text-align: center;">←上個修訂</td> <td colspan="2" style="background-color: white; color:black; text-align: center;">於 2022年3月18日 (五) 10:40 的修訂</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l9" >行 9：</td> <td colspan="2" class="diff-lineno">行 9：</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>對於整體視覺來說，畫面視覺效果改變對theme.php的影響不大。我們只需要加上一些定義與移動即可。</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>對於整體視覺來說，畫面視覺效果改變對theme.php的影響不大。我們只需要加上一些定義與移動即可。</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#加入下方程式到theme.php檔案的&lt;head&gt;......&lt;/head&gt;中，指定螢幕寬度為裝置寬度，畫面載入初始縮放比例 100%。</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#加入下方程式到theme.php檔案的&lt;head&gt;......&lt;/head&gt;中，指定螢幕寬度為裝置寬度，畫面載入初始縮放比例 100%。</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>#*<del class="diffchange diffchange-inline">原程式</del>: &lt;<del class="diffchange diffchange-inline">br</del>&gt;&lt;head&gt;......&lt;br&gt;&lt;/head&gt;&lt;br&gt; → &lt;br&gt;&lt;head&gt; &lt;br&gt;&lt;span style=&quot;color:red;&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;&lt;/span&gt;&lt;br&gt;......&lt;br&gt;&lt;/head&gt;</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>#*<ins class="diffchange diffchange-inline">程式</ins>: &lt;<ins class="diffchange diffchange-inline">div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;</ins>&gt;&lt;head&gt;......&lt;br&gt;&lt;/head&gt;&lt;br&gt; → &lt;br&gt;&lt;head&gt; &lt;br&gt;&lt;span style=&quot;color:red;&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;&lt;/span&gt;&lt;br&gt;......&lt;br&gt;&lt;/head<ins class="diffchange diffchange-inline">&gt;&lt;/div</ins>&gt;</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#另外確認theme.php 中 style.css 和 menu.css的位置，若在其他css檔案之前，搬到之後會比較不會被蓋掉。(css檔案越後面的會蓋掉前面的設定)，方法如下：</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#另外確認theme.php 中 style.css 和 menu.css的位置，若在其他css檔案之前，搬到之後會比較不會被蓋掉。(css檔案越後面的會蓋掉前面的設定)，方法如下：</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>#*&lt;link rel='stylesheet' type='text/css' media='screen' href='/&quot;.SITE.&quot;/style.css' /&gt;&lt;br&gt;&lt;link rel='stylesheet' type='text/css' media='screen' href='/&quot;.SITE.&quot;/menu.css' /&gt;&lt;br&gt;&lt;link rel='stylesheet' type='text/css' media='screen' href='/&quot;.SITE.&quot;/jquery.makeCollapsible.css' /&gt;&lt;br&gt;&lt;link rel='stylesheet' type='text/css' media='screen' href='/mm/treestyles.css'&lt;br&gt;→&lt;br&gt;&lt;link rel='stylesheet' type='text/css' media='screen' href='/&quot;.SITE.&quot;/jquery.makeCollapsible.css' /&gt;&lt;br&gt;&lt;link rel='stylesheet' type='text/css' media='screen' href='/mm/treestyles.css' /&gt;&lt;br&gt;&lt;span style=&quot;color:red;&quot;&gt;&lt;link rel='stylesheet' type='text/css' media='screen' href='/&quot;.SITE.&quot;/style.css' /&gt;&lt;br&gt;&lt;link rel='stylesheet' type='text/css' media='screen' href='/&quot;.SITE.&quot;/menu.css' /&gt;&lt;/span&gt;</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>#*<ins class="diffchange diffchange-inline">程式:&lt;div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;</ins>&lt;link rel='stylesheet' type='text/css' media='screen' href='/&quot;.SITE.&quot;/style.css' /&gt;&lt;br&gt;&lt;link rel='stylesheet' type='text/css' media='screen' href='/&quot;.SITE.&quot;/menu.css' /&gt;&lt;br&gt;&lt;link rel='stylesheet' type='text/css' media='screen' href='/&quot;.SITE.&quot;/jquery.makeCollapsible.css' /&gt;&lt;br&gt;&lt;link rel='stylesheet' type='text/css' media='screen' href='/mm/treestyles.css'&lt;br&gt;→&lt;br&gt;&lt;link rel='stylesheet' type='text/css' media='screen' href='/&quot;.SITE.&quot;/jquery.makeCollapsible.css' /&gt;&lt;br&gt;&lt;link rel='stylesheet' type='text/css' media='screen' href='/mm/treestyles.css' /&gt;&lt;br&gt;&lt;span style=&quot;color:red;&quot;&gt;&lt;link rel='stylesheet' type='text/css' media='screen' href='/&quot;.SITE.&quot;/style.css' /&gt;&lt;br&gt;&lt;link rel='stylesheet' type='text/css' media='screen' href='/&quot;.SITE.&quot;/menu.css' /&gt;&lt;/span<ins class="diffchange diffchange-inline">&gt;&lt;/div</ins>&gt;</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>===選單更改 (漢堡選單 箭頭動畫)===</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>===選單更改 (漢堡選單 箭頭動畫)===</div></td></tr> </table>

林芸伍 http://science4everyone.net/MediaWiki/index.php?title=RWD/theme&diff=6577&oldid=prev 2022-03-16T14:01:14Z

<p>‎<span dir="auto"><span class="autocomment">選單更改 (漢堡選單 箭頭動畫)</span></span></p> <table class="diff diff-contentalign-left" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr style="vertical-align: top;" lang="zh-TW"> <td colspan="2" style="background-color: white; color:black; text-align: center;">←上個修訂</td> <td colspan="2" style="background-color: white; color:black; text-align: center;">於 2022年3月16日 (三) 14:01 的修訂</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l16" >行 16：</td> <td colspan="2" class="diff-lineno">行 16：</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>本章節著重在漢堡選單的製作上，現今手機及平板上的選單，因為滑鼠滑動被改成手指點選，必須在選單上做一些更動，才能更加的人性化，符合使用者需求。&lt;br&gt;本節分兩小章分別為製作漢堡選單與在選單上加上箭頭動畫。如下詳述：</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>本章節著重在漢堡選單的製作上，現今手機及平板上的選單，因為滑鼠滑動被改成手指點選，必須在選單上做一些更動，才能更加的人性化，符合使用者需求。&lt;br&gt;本節分兩小章分別為製作漢堡選單與在選單上加上箭頭動畫。如下詳述：</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#漢堡表單製作&lt;br&gt;本小節中，將自行畫出的漢堡選單與核取方塊建立關係，並放置在畫面中(xo-banner與xo-globalnav之間)。詳細新增的部分如下：</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#漢堡表單製作&lt;br&gt;本小節中，將自行畫出的漢堡選單與核取方塊建立關係，並放置在畫面中(xo-banner與xo-globalnav之間)。詳細新增的部分如下：</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>#*<del class="diffchange diffchange-inline">原始程式：</del>&lt;<del class="diffchange diffchange-inline">br</del>&gt;&lt;nowiki&gt;&lt;div id='xo-banner'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;div id='xo-globalnav'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;→&lt;br&gt;&lt;nowiki&gt;&lt;div id='xo-banner'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;input type='checkbox' name='menu-switcher' id='menu-switcher' /&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;!--新增核取方塊 for 展開選單--&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;label for='menu-switcher' class='hamburger'&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;!--漢堡選單按鈕 --&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;div class='hamburger-line'&gt;&lt;/div&gt;&lt;/label&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;!--漢堡選單按鈕線條--&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;div id='xo-globalnav'&gt;...&lt;/div&gt;&lt;/nowiki&gt;</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>#*<ins class="diffchange diffchange-inline">程式：</ins>&lt;<ins class="diffchange diffchange-inline">div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;</ins>&gt;&lt;nowiki&gt;&lt;div id='xo-banner'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;div id='xo-globalnav'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;→&lt;br&gt;&lt;nowiki&gt;&lt;div id='xo-banner'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;input type='checkbox' name='menu-switcher' id='menu-switcher' /&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;!--新增核取方塊 for 展開選單--&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;label for='menu-switcher' class='hamburger'&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;!--漢堡選單按鈕 --&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;div class='hamburger-line'&gt;&lt;/div&gt;&lt;/label&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;!--漢堡選單按鈕線條--&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;div id='xo-globalnav'&gt;...&lt;/div&gt;&lt;/nowiki<ins class="diffchange diffchange-inline">&gt;&lt;/div</ins>&gt;</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#箭頭動畫&lt;br&gt;本小節中，將在選單內放置一個箭頭，並做出旋轉的動畫設定。本頁面提供兩個方法，詳細新增的部分如下</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#箭頭動畫&lt;br&gt;本小節中，將在選單內放置一個箭頭，並做出旋轉的動畫設定。本頁面提供兩個方法，詳細新增的部分如下</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>##第一種方法(hover事件)，本方法讓滑鼠經過選單時就會觸發箭頭旋轉的動畫，優點為改動不多，缺點則是在RWD狀況下較難操縱，因為平板、手機沒有滑鼠，事件設定會比較不一樣。詳細新增的部分如下面兩個： (<del class="diffchange diffchange-inline">若是在設計RWD的頁面推薦第二種方法。</del>)</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>##第一種方法(hover事件)，本方法讓滑鼠經過選單時就會觸發箭頭旋轉的動畫，優點為改動不多，缺點則是在RWD狀況下較難操縱，因為平板、手機沒有滑鼠，事件設定會比較不一樣。詳細新增的部分如下面兩個： (<ins class="diffchange diffchange-inline">若是在設計RWD的頁面推薦第二或第三種方法。</ins>)</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>##*<del class="diffchange diffchange-inline">原始程式</del>(theme.php第20行)：&lt;<del class="diffchange diffchange-inline">br</del>&gt;&lt;nowiki&gt;$strnav.=&quot;\t\t&lt;dt&gt;&lt;a href='#'&gt;&quot;.subst&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;r&lt;/span&gt;&lt;nowiki&gt;($v,1).&quot;&lt;/a&gt;&lt;/dt&gt;\n&quot;;#&lt;!--加入箭頭&#160; --&gt; &lt;/nowiki&gt;&lt;br&gt;→&lt;br&gt;&lt;nowiki&gt;$strnav.=&quot;\t\t&lt;dt&gt;&lt;a href='#'&gt;&quot;.subst&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;r&lt;/span&gt;&lt;nowiki&gt;($v,1).&quot;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;div class='arrow'&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;/div&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;/a&gt;&lt;/dt&gt;\n&quot;;*/ &lt;/nowiki&gt;</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>##*<ins class="diffchange diffchange-inline">程式</ins>(theme.php第20行)：&lt;<ins class="diffchange diffchange-inline">div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;</ins>&gt;&lt;nowiki&gt;$strnav.=&quot;\t\t&lt;dt&gt;&lt;a href='#'&gt;&quot;.subst&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;r&lt;/span&gt;&lt;nowiki&gt;($v,1).&quot;&lt;/a&gt;&lt;/dt&gt;\n&quot;;#&lt;!--加入箭頭&#160; --&gt; &lt;/nowiki&gt;&lt;br&gt;→&lt;br&gt;&lt;nowiki&gt;$strnav.=&quot;\t\t&lt;dt&gt;&lt;a href='#'&gt;&quot;.subst&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;r&lt;/span&gt;&lt;nowiki&gt;($v,1).&quot;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;div class='arrow'&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;/div&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;/a&gt;&lt;/dt&gt;\n&quot;;*/ &lt;/nowiki<ins class="diffchange diffchange-inline">&gt;&lt;/div</ins>&gt;</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>##*<del class="diffchange diffchange-inline">原始程式</del>(theme.php第35行)：&lt;<del class="diffchange diffchange-inline">br</del>&gt;&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;工具&lt;/a&gt; &lt;/dt&gt;&lt;/nowiki&gt;&lt;br&gt;→&lt;br&gt;&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;工具&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;div class='arrow'&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;/div&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;/a&gt; &lt;/dt&gt;!--加入箭頭&#160; --&gt;&lt;/nowiki&gt;</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>##*<ins class="diffchange diffchange-inline">程式</ins>(theme.php第35行)：&lt;<ins class="diffchange diffchange-inline">div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;</ins>&gt;&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;工具&lt;/a&gt; &lt;/dt&gt;&lt;/nowiki&gt;&lt;br&gt;→&lt;br&gt;&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;工具&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;div class='arrow'&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;/div&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;/a&gt; &lt;/dt&gt;!--加入箭頭&#160; --&gt;&lt;/nowiki<ins class="diffchange diffchange-inline">&gt;&lt;/div</ins>&gt;</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>##第二種方法(click事件)：本方法讓滑鼠點下選單時才觸發箭頭旋轉的動畫，優點為較符合RWD的設計，缺點則是要多寫一段Javascript碼，改動幅度較大。若是不想那麼複雜，可以先改動成第一種方法看效果。 &lt;span style=&quot;color:red;&quot;&gt;(施工中)&lt;/span&gt;</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>##第二種方法(click事件)：本方法讓滑鼠點下選單時才觸發箭頭旋轉的動畫，優點為較符合RWD的設計，缺點則是要多寫一段Javascript碼，改動幅度較大。若是不想那麼複雜，可以先改動成第一種方法看效果。 &lt;span style=&quot;color:red;&quot;&gt;(施工中)&lt;/span&gt;</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>##*新增兩個新變數(副標題的編號與箭頭編號)，在theme.php大概第4~6行處，程式如下：&lt;br&gt;$subMenu9='&amp;#39;subMenu9&amp;#39;';&lt;br&gt;$arrow9='&amp;#39;arrow9&amp;#39;';</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>##*新增兩個新變數(副標題的編號與箭頭編號)，在theme.php大概第4~6行處，程式如下：&lt;br&gt;$subMenu9='&amp;#39;subMenu9&amp;#39;';&lt;br&gt;$arrow9='&amp;#39;arrow9&amp;#39;';</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>##*新增數個變數(讓每個副標題與箭頭編號不重複)，並在$strnav中新增switchMenu程式(主選單，副選單，箭頭) 並用ul 包住副選單 dt包住主選單&lt;<del class="diffchange diffchange-inline">br</del>&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp; ...&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp; if(...){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp; if($c==1){$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;}&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$strnav.=&quot;\t\t&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;&quot;.sub&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;str&lt;/span&gt;($v,1).&quot;&lt;/a&gt;&lt;/dt&gt;\n&quot;;&lt;br&gt;&amp;emsp;&amp;emsp; }&lt;br&gt;&amp;emsp;&amp;emsp; ...&lt;br&gt;&amp;emsp; }&lt;br&gt;&amp;emsp;$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;}&lt;br&gt;→&lt;br&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp; ...&lt;br&gt;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;$number='1';&lt;br&gt;&amp;emsp;$numberr=&quot;2&quot;;&lt;/span&gt;&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp;if(...){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;if($c==1){$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;}&lt;br&gt;&lt;span style=&quot;color:red;&quot;&gt;&amp;emsp;&amp;emsp;&amp;emsp;$subMenu.=$number;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$arrow.=$numberr;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$number.=&quot;1&quot;;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$numberr.=&quot;2&quot;;&lt;/span&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;$strnav.=&quot;\t\t&lt;dt oncl&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;ick='switchMenu( this,&quot;.$subMenu.&quot;,&quot;.$arrow.&quot;)'&gt;&lt;a href='#'&gt;&quot;.sub&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;str($v,1).&quot;&lt;nowiki&gt;&lt;div id=&quot;.$arrow.&quot; class='arrow'&gt;&lt;/nowiki&gt;&lt;/div&gt;&lt;/a&gt;\n &lt;nowiki&gt;&lt;ul id=&quot;.$subMenu.&quot; class='sub-menu' style='display:none;'&gt; \n&quot;;&lt;/nowiki&gt;&lt;/span&gt; &lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;&amp;emsp;...&lt;br&gt;&amp;emsp;}&lt;br&gt;&amp;emsp;$strnav.=&quot;\t&lt;span style=&quot;color:red&quot;&gt;&lt;/ul&gt;&lt;/dt&gt;&lt;/span&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;}&lt;br&gt;</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>##*新增數個變數(讓每個副標題與箭頭編號不重複)，並在$strnav中新增switchMenu程式(主選單，副選單，箭頭) 並用ul 包住副選單 dt包住主選單&lt;<ins class="diffchange diffchange-inline">div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;</ins>&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp; ...&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp; if(...){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp; if($c==1){$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;}&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$strnav.=&quot;\t\t&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;&quot;.sub&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;str&lt;/span&gt;($v,1).&quot;&lt;/a&gt;&lt;/dt&gt;\n&quot;;&lt;br&gt;&amp;emsp;&amp;emsp; }&lt;br&gt;&amp;emsp;&amp;emsp; ...&lt;br&gt;&amp;emsp; }&lt;br&gt;&amp;emsp;$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;}&lt;br&gt;→&lt;br&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp; ...&lt;br&gt;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;$number='1';&lt;br&gt;&amp;emsp;$numberr=&quot;2&quot;;&lt;/span&gt;&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp;if(...){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;if($c==1){$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;}&lt;br&gt;&lt;span style=&quot;color:red;&quot;&gt;&amp;emsp;&amp;emsp;&amp;emsp;$subMenu.=$number;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$arrow.=$numberr;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$number.=&quot;1&quot;;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$numberr.=&quot;2&quot;;&lt;/span&gt;&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;$strnav.=&quot;\t\t&lt;dt oncl&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;ick='switchMenu( this,&quot;.$subMenu.&quot;,&quot;.$arrow.&quot;)'&gt;&lt;a href='#'&gt;&quot;.sub&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;str($v,1).&quot;&lt;nowiki&gt;&lt;div id=&quot;.$arrow.&quot; class='arrow'&gt;&lt;/nowiki&gt;&lt;/div&gt;&lt;/a&gt;\n &lt;nowiki&gt;&lt;ul id=&quot;.$subMenu.&quot; class='sub-menu' style='display:none;'&gt; \n&quot;;&lt;/nowiki&gt;&lt;/span&gt; &lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;&amp;emsp;...&lt;br&gt;&amp;emsp;}&lt;br&gt;&amp;emsp;$strnav.=&quot;\t&lt;span style=&quot;color:red&quot;&gt;&lt;/ul&gt;&lt;/dt&gt;&lt;/span&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;}&lt;br<ins class="diffchange diffchange-inline">&gt;&lt;/div</ins>&gt;</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>##*在工具選單中如上述方法修改(新增switchMenu程式(主選單，副選單，箭頭) 並用ul 包住副選單 dt包住主選單)：&lt;<del class="diffchange diffchange-inline">br&gt;&amp;emsp;</del>&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;&lt;/nowiki&gt;工具&lt;/a&gt; &lt;/dt&gt;&lt;br&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;→&lt;br&gt;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;&lt;dt on&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;click='switchMenu( this,&quot;.$subMenu9.&quot;,&quot;.$arrow9.&quot;)'&gt;&lt;a href='#'&gt;工具&lt;nowiki&gt;&lt;div id='arrow9' class='arrow'&gt;&lt;/nowiki&gt;&lt;/div&gt;&lt;/a&gt;&lt;/span&gt;&lt;br&gt;&amp;emsp;&lt;nowiki&gt;&lt;ul id='subMenu9' class='sub-menu' style='display:none;'&gt;#加入副選單&lt;/nowiki&gt;&lt;br&gt;...&lt;br&gt;&lt;span style=&quot;color:red&quot;&gt;&lt;/ul&gt;&lt;/dt&gt;&lt;/span&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;#加入ul dt 結尾</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>##*在工具選單中如上述方法修改(新增switchMenu程式(主選單，副選單，箭頭) 並用ul 包住副選單 dt包住主選單)：&lt;<ins class="diffchange diffchange-inline">div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;&gt;&amp;emsp;</ins>&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;&lt;/nowiki&gt;工具&lt;/a&gt; &lt;/dt&gt;&lt;br&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;→&lt;br&gt;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;&lt;dt on&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;click='switchMenu( this,&quot;.$subMenu9.&quot;,&quot;.$arrow9.&quot;)'&gt;&lt;a href='#'&gt;工具&lt;nowiki&gt;&lt;div id='arrow9' class='arrow'&gt;&lt;/nowiki&gt;&lt;/div&gt;&lt;/a&gt;&lt;/span&gt;&lt;br&gt;&amp;emsp;&lt;nowiki&gt;&lt;ul id='subMenu9' class='sub-menu' style='display:none;'&gt;#加入副選單&lt;/nowiki&gt;&lt;br&gt;...&lt;br&gt;&lt;span style=&quot;color:red&quot;&gt;&lt;/ul&gt;&lt;/dt&gt;&lt;/span&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;#加入ul dt 結尾<ins class="diffchange diffchange-inline">&lt;/div&gt;</ins></div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>##*新增switchmenu程式&lt;<del class="diffchange diffchange-inline">br</del>&gt;&lt;script language = 'javascript'&gt;&lt;br&gt;var VisibleMenu = ''; // 記錄目前顯示的子選單的 ID&lt;br&gt;function switchMenu( theMainMenu, theSubMenu,thearrow, theEvent ){// 加入switchMenu程式(主選單，副選單，箭頭) 點擊執行&lt;br&gt;&amp;emsp;var SubMenu = document.getElementById( String(theSubMenu) );// 定義程式中的副選單&lt;br&gt;&amp;emsp;const div = document.getElementById( String(thearrow) );// 定義程式中的箭頭&lt;br&gt;&amp;emsp;if( SubMenu.style.display == 'none' ){ // 若副選單原本未顯示&lt;br&gt;&amp;emsp;&amp;emsp;SubMenu.style.display = 'block';// 顯示副選單&lt;br&gt;&amp;emsp;&amp;emsp;div.style.transform = 'rotate(135deg)';// 旋轉箭頭往下&lt;br&gt;&amp;emsp;&amp;emsp;VisibleMenu = theSubMenu;// 顯示選單為本副選單&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;else{ // 隱藏子選單&lt;br&gt;&amp;emsp;&amp;emsp;if( theEvent != 'MouseOver' || VisibleMenu != theSubMenu ){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;SubMenu.style.display = 'none';// 不顯示副選單&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;div.style.transform = 'rotate(45deg)';// 旋轉箭頭往右&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;VisibleMenu = '';// 顯示選單為空&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;}&lt;br&gt;&lt;/script&gt;&lt;<del class="diffchange diffchange-inline">br</del>&gt;</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>##*新增switchmenu程式&lt;<ins class="diffchange diffchange-inline">div class=&quot;mw-collapsible mw-collapsed&quot; data-collapsetext=&quot;展開&quot;</ins>&gt;&lt;script language = 'javascript'&gt;&lt;br&gt;var VisibleMenu = ''; // 記錄目前顯示的子選單的 ID&lt;br&gt;function switchMenu( theMainMenu, theSubMenu,thearrow, theEvent ){// 加入switchMenu程式(主選單，副選單，箭頭) 點擊執行&lt;br&gt;&amp;emsp;var SubMenu = document.getElementById( String(theSubMenu) );// 定義程式中的副選單&lt;br&gt;&amp;emsp;const div = document.getElementById( String(thearrow) );// 定義程式中的箭頭&lt;br&gt;&amp;emsp;if( SubMenu.style.display == 'none' ){ // 若副選單原本未顯示&lt;br&gt;&amp;emsp;&amp;emsp;SubMenu.style.display = 'block';// 顯示副選單&lt;br&gt;&amp;emsp;&amp;emsp;div.style.transform = 'rotate(135deg)';// 旋轉箭頭往下&lt;br&gt;&amp;emsp;&amp;emsp;VisibleMenu = theSubMenu;// 顯示選單為本副選單&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;else{ // 隱藏子選單&lt;br&gt;&amp;emsp;&amp;emsp;if( theEvent != 'MouseOver' || VisibleMenu != theSubMenu ){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;SubMenu.style.display = 'none';// 不顯示副選單&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;div.style.transform = 'rotate(45deg)';// 旋轉箭頭往右&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;VisibleMenu = '';// 顯示選單為空&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;&amp;emsp;}&lt;br&gt;&amp;emsp;}&lt;br&gt;&lt;/script&gt;&lt;<ins class="diffchange diffchange-inline">/div</ins>&gt;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">##第三種方法(details+summary)本方法讓滑鼠按下選單時就會觸發箭頭旋轉的動畫，優點為改動不多，只需要改theme.php即可，不用改style.css，特別推薦。詳細新增的部分如下： (若是在設計RWD的頁面推薦本方法。)</ins></div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>===頁首頁尾===</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>===頁首頁尾===</div></td></tr> </table>

林芸伍 http://science4everyone.net/MediaWiki/index.php?title=RWD/theme&diff=6549&oldid=prev 2022-02-28T10:18:20Z

<p>‎<span dir="auto"><span class="autocomment">參考資料</span></span></p> <table class="diff diff-contentalign-left" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr style="vertical-align: top;" lang="zh-TW"> <td colspan="2" style="background-color: white; color:black; text-align: center;">←上個修訂</td> <td colspan="2" style="background-color: white; color:black; text-align: center;">於 2022年2月28日 (一) 10:18 的修訂</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l44" >行 44：</td> <td colspan="2" class="diff-lineno">行 44：</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#新增改變字體的按鈕方塊*3，放在header與xo-banner之間：</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#新增改變字體的按鈕方塊*3，放在header與xo-banner之間：</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#*原始程式：&lt;br&gt;&lt;nowiki&gt;&lt;div id='header'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;div id='xo-banner'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;→&lt;br&gt;&lt;nowiki&gt;&lt;div id='header'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;&lt;br&gt;&lt;nowiki&gt;&lt;div id='font_box'color='#000'&gt;&lt;/nowiki&gt;&quot;.$font_Size.&quot;&lt;br&gt;&lt;input type='button' value='特' on click=&lt;span&gt;&lt;/span&gt;'zoomInInFontSize()'&gt;&lt;br&gt;&lt;input type='button' value='大' on click=&lt;span&gt;&lt;/span&gt;'zoomInFontSize()'&gt;&#160; &lt;br&gt;&lt;input type='button' value='原' on click=&lt;span&gt;&lt;/span&gt;'zoomFontSize()'&gt;&lt;br&gt;&lt;input type='button' value='小' on click=&lt;span&gt;&lt;/span&gt;'zoomOutFontSize()'&gt;&#160; &lt;br&gt;&#160; &lt;nowiki&gt;&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;/span &gt;&lt;nowiki&gt;&lt;div id='xo-banner'&gt;...&lt;/div&gt;&lt;/nowiki&gt;</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#*原始程式：&lt;br&gt;&lt;nowiki&gt;&lt;div id='header'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;div id='xo-banner'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;→&lt;br&gt;&lt;nowiki&gt;&lt;div id='header'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;&lt;br&gt;&lt;nowiki&gt;&lt;div id='font_box'color='#000'&gt;&lt;/nowiki&gt;&quot;.$font_Size.&quot;&lt;br&gt;&lt;input type='button' value='特' on click=&lt;span&gt;&lt;/span&gt;'zoomInInFontSize()'&gt;&lt;br&gt;&lt;input type='button' value='大' on click=&lt;span&gt;&lt;/span&gt;'zoomInFontSize()'&gt;&#160; &lt;br&gt;&lt;input type='button' value='原' on click=&lt;span&gt;&lt;/span&gt;'zoomFontSize()'&gt;&lt;br&gt;&lt;input type='button' value='小' on click=&lt;span&gt;&lt;/span&gt;'zoomOutFontSize()'&gt;&#160; &lt;br&gt;&#160; &lt;nowiki&gt;&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;/span &gt;&lt;nowiki&gt;&lt;div id='xo-banner'&gt;...&lt;/div&gt;&lt;/nowiki&gt;</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2">&#160;</td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">===參考資料===</del></div></td><td colspan="2">&#160;</td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;input type='button' value='小' on&amp;ensp;click='zoomOutFontSize()'&gt;</del></div></td><td colspan="2">&#160;</td></tr> </table>

林芸伍 http://science4everyone.net/MediaWiki/index.php?title=RWD/theme&diff=6548&oldid=prev 2022-02-28T10:00:27Z

<p>‎<span dir="auto"><span class="autocomment">字體工具箱</span></span></p> <table class="diff diff-contentalign-left" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr style="vertical-align: top;" lang="zh-TW"> <td colspan="2" style="background-color: white; color:black; text-align: center;">←上個修訂</td> <td colspan="2" style="background-color: white; color:black; text-align: center;">於 2022年2月28日 (一) 10:00 的修訂</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l41" >行 41：</td> <td colspan="2" class="diff-lineno">行 41：</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#* $font_Size=&quot;字級：&quot;;</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#* $font_Size=&quot;字級：&quot;;</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#新增改變字體的javascript code，放在head中的最後面：</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#新增改變字體的javascript code，放在head中的最後面：</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>#*原始程式：&#160; &lt;br&gt;&lt;head&gt;&lt;br&gt;...&lt;br&gt;&lt;/head&gt;&lt;br&gt;→&lt;br&gt;&lt;head&gt;&lt;br&gt;...&lt;br&gt;&lt;span style=&quot;color:red;&quot;&gt;&lt;nowiki&gt; &lt;script&gt;&lt;!--加入字體工具箱功能 --&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;function zoomInInFontSize() {&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;var obj = document.getElementById('content'),//從content選取字&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt; curSize = '';&#160; // 當前字體大小&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt; obj.style.fontSize =&#160; '40px';//變成特大字體}&lt;/nowiki&gt;&lt;br&gt;<del class="diffchange diffchange-inline">&lt;br&gt;</del>&lt;nowiki&gt;function zoomInFontSize() {&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt; var obj = document.getElementById('content'),//從content選取字&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt; curSize = '';&#160; // 當前字體大小&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;obj.style.fontSize = '30px';//變成大字體}&lt;/nowiki&gt;&lt;br&gt;<del class="diffchange diffchange-inline">&lt;br&gt;</del>&lt;nowiki&gt;function zoomFontSize() {&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt; var obj = document.getElementById('content'),//從content選取字&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt; curSize = '';&#160; // 當前字體大小&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;obj.style.fontSize =&#160; '16px';//變成原始字體}&lt;/nowiki&gt;&lt;br&gt;<del class="diffchange diffchange-inline">&lt;br&gt;</del>&lt;nowiki&gt;function zoomOutFontSize() {&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;var obj = document.getElementById('content'),//從content選取字&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt; curSize = '';&#160; // 當前字體大小&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt; obj.style.fontSize =&#160; '12px';//變成小字體}&lt;/nowiki&gt;&lt;br&gt;<del class="diffchange diffchange-inline">&lt;br&gt;</del>&lt;nowiki&gt; // 創建一個容器，來測算當前字體大小&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt; var getFontSize = function() {&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt; var oDiv = document.createElement('div');&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt; oDiv.innerHTML = 'ABC測試';&#160; // 寫入任意字元&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt; oDiv.style.lineHeight = 1;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt; oDiv.style.position = 'absolute';&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt; oDiv.style.top = '-9999em';&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt; document.body.appendChild(oDiv);&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt; return oDiv.offsetHeight; };&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&#160; &#160; &lt;/script&gt;&lt;/nowiki&gt;&lt;/span&gt;&lt;br&gt;&lt;/head&gt;</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>#*原始程式：&#160; &lt;br&gt;&lt;head&gt;&lt;br&gt;...&lt;br&gt;&lt;/head&gt;&lt;br&gt;→&lt;br&gt;&lt;head&gt;&lt;br&gt;...&lt;br&gt;&lt;span style=&quot;color:red;&quot;&gt;&lt;nowiki&gt; &lt;script&gt;&lt;!--加入字體工具箱功能 --&gt;&lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;</ins>&lt;nowiki&gt;function zoomInInFontSize() {&lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;</ins>&lt;nowiki&gt;var obj = document.getElementById('content'),//從content選取字&lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;</ins>&lt;nowiki&gt; curSize = '';&#160; // 當前字體大小&lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;</ins>&lt;nowiki&gt; obj.style.fontSize =&#160; '40px';//變成特大字體}&lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;</ins>&lt;nowiki&gt;function zoomInFontSize() {&lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;</ins>&lt;nowiki&gt; var obj = document.getElementById('content'),//從content選取字&lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;</ins>&lt;nowiki&gt; curSize = '';&#160; // 當前字體大小&lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;</ins>&lt;nowiki&gt;obj.style.fontSize = '30px';//變成大字體}&lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;</ins>&lt;nowiki&gt;function zoomFontSize() {&lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;</ins>&lt;nowiki&gt; var obj = document.getElementById('content'),//從content選取字&lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;</ins>&lt;nowiki&gt; curSize = '';&#160; // 當前字體大小&lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;</ins>&lt;nowiki&gt;obj.style.fontSize =&#160; '16px';//變成原始字體}&lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;</ins>&lt;nowiki&gt;function zoomOutFontSize() {&lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;</ins>&lt;nowiki&gt;var obj = document.getElementById('content'),//從content選取字&lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;</ins>&lt;nowiki&gt; curSize = '';&#160; // 當前字體大小&lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;</ins>&lt;nowiki&gt; obj.style.fontSize =&#160; '12px';//變成小字體}&lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;</ins>&lt;nowiki&gt; // 創建一個容器，來測算當前字體大小&lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;</ins>&lt;nowiki&gt; var getFontSize = function() {&lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;</ins>&lt;nowiki&gt; var oDiv = document.createElement('div');&lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;</ins>&lt;nowiki&gt; oDiv.innerHTML = 'ABC測試';&#160; // 寫入任意字元&lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;</ins>&lt;nowiki&gt; oDiv.style.lineHeight = 1;&lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;</ins>&lt;nowiki&gt; oDiv.style.position = 'absolute';&lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;</ins>&lt;nowiki&gt; oDiv.style.top = '-9999em';&lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;</ins>&lt;nowiki&gt; document.body.appendChild(oDiv);&lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;</ins>&lt;nowiki&gt; return oDiv.offsetHeight; };&lt;/nowiki&gt;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;</ins>&lt;nowiki&gt;&#160; &#160; &lt;/script&gt;&lt;/nowiki&gt;&lt;/span&gt;&lt;br&gt;&lt;/head&gt;</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#新增改變字體的按鈕方塊*3，放在header與xo-banner之間：</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#新增改變字體的按鈕方塊*3，放在header與xo-banner之間：</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#*原始程式：&lt;br&gt;&lt;nowiki&gt;&lt;div id='header'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;div id='xo-banner'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;→&lt;br&gt;&lt;nowiki&gt;&lt;div id='header'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;&lt;br&gt;&lt;nowiki&gt;&lt;div id='font_box'color='#000'&gt;&lt;/nowiki&gt;&quot;.$font_Size.&quot;&lt;br&gt;&lt;input type='button' value='特' on click=&lt;span&gt;&lt;/span&gt;'zoomInInFontSize()'&gt;&lt;br&gt;&lt;input type='button' value='大' on click=&lt;span&gt;&lt;/span&gt;'zoomInFontSize()'&gt;&#160; &lt;br&gt;&lt;input type='button' value='原' on click=&lt;span&gt;&lt;/span&gt;'zoomFontSize()'&gt;&lt;br&gt;&lt;input type='button' value='小' on click=&lt;span&gt;&lt;/span&gt;'zoomOutFontSize()'&gt;&#160; &lt;br&gt;&#160; &lt;nowiki&gt;&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;/span &gt;&lt;nowiki&gt;&lt;div id='xo-banner'&gt;...&lt;/div&gt;&lt;/nowiki&gt;</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>#*原始程式：&lt;br&gt;&lt;nowiki&gt;&lt;div id='header'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;nowiki&gt;&lt;div id='xo-banner'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;→&lt;br&gt;&lt;nowiki&gt;&lt;div id='header'&gt;...&lt;/div&gt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;&lt;br&gt;&lt;nowiki&gt;&lt;div id='font_box'color='#000'&gt;&lt;/nowiki&gt;&quot;.$font_Size.&quot;&lt;br&gt;&lt;input type='button' value='特' on click=&lt;span&gt;&lt;/span&gt;'zoomInInFontSize()'&gt;&lt;br&gt;&lt;input type='button' value='大' on click=&lt;span&gt;&lt;/span&gt;'zoomInFontSize()'&gt;&#160; &lt;br&gt;&lt;input type='button' value='原' on click=&lt;span&gt;&lt;/span&gt;'zoomFontSize()'&gt;&lt;br&gt;&lt;input type='button' value='小' on click=&lt;span&gt;&lt;/span&gt;'zoomOutFontSize()'&gt;&#160; &lt;br&gt;&#160; &lt;nowiki&gt;&lt;/div&gt;&lt;/nowiki&gt;&lt;br&gt;&lt;/span &gt;&lt;nowiki&gt;&lt;div id='xo-banner'&gt;...&lt;/div&gt;&lt;/nowiki&gt;</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2">&#160;</td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">#* type='button' on&amp;ensp;click='zoomFontSize()'/</del></div></td><td colspan="2">&#160;</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>===參考資料===</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>===參考資料===</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&lt;input type='button' value='小' on&amp;ensp;click='zoomOutFontSize()'&gt;</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&lt;input type='button' value='小' on&amp;ensp;click='zoomOutFontSize()'&gt;</div></td></tr> </table>

林芸伍 http://science4everyone.net/MediaWiki/index.php?title=RWD/theme&diff=6547&oldid=prev 2022-02-28T09:55:48Z

<p>‎<span dir="auto"><span class="autocomment">選單更改 (漢堡選單 箭頭動畫)</span></span></p> <table class="diff diff-contentalign-left" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr style="vertical-align: top;" lang="zh-TW"> <td colspan="2" style="background-color: white; color:black; text-align: center;">←上個修訂</td> <td colspan="2" style="background-color: white; color:black; text-align: center;">於 2022年2月28日 (一) 09:55 的修訂</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l22" >行 22：</td> <td colspan="2" class="diff-lineno">行 22：</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>##*原始程式(theme.php第35行)：&lt;br&gt;&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;工具&lt;/a&gt; &lt;/dt&gt;&lt;/nowiki&gt;&lt;br&gt;→&lt;br&gt;&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;工具&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;div class='arrow'&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;/div&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;/a&gt; &lt;/dt&gt;!--加入箭頭&#160; --&gt;&lt;/nowiki&gt;</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>##*原始程式(theme.php第35行)：&lt;br&gt;&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;工具&lt;/a&gt; &lt;/dt&gt;&lt;/nowiki&gt;&lt;br&gt;→&lt;br&gt;&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;工具&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;div class='arrow'&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;&lt;/nowiki&gt;&lt;span style=&quot;color:red;&quot;&gt;/div&lt;/span&gt;&lt;nowiki&gt;&gt;&lt;/a&gt; &lt;/dt&gt;!--加入箭頭&#160; --&gt;&lt;/nowiki&gt;</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>##第二種方法(click事件)：本方法讓滑鼠點下選單時才觸發箭頭旋轉的動畫，優點為較符合RWD的設計，缺點則是要多寫一段Javascript碼，改動幅度較大。若是不想那麼複雜，可以先改動成第一種方法看效果。 &lt;span style=&quot;color:red;&quot;&gt;(施工中)&lt;/span&gt;</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>##第二種方法(click事件)：本方法讓滑鼠點下選單時才觸發箭頭旋轉的動畫，優點為較符合RWD的設計，缺點則是要多寫一段Javascript碼，改動幅度較大。若是不想那麼複雜，可以先改動成第一種方法看效果。 &lt;span style=&quot;color:red;&quot;&gt;(施工中)&lt;/span&gt;</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>##*新增兩個新變數(副標題的編號與箭頭編號)，在theme.<del class="diffchange diffchange-inline">php大概第8,9行處，程式如下：</del>&lt;br&gt;$subMenu9='&amp;#39;subMenu9&amp;#39;';&lt;br&gt;$arrow9='&amp;#39;arrow9&amp;#39;';</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>##*新增兩個新變數(副標題的編號與箭頭編號)，在theme.<ins class="diffchange diffchange-inline">php大概第4~6行處，程式如下：</ins>&lt;br&gt;$subMenu9='&amp;#39;subMenu9&amp;#39;';&lt;br&gt;$arrow9='&amp;#39;arrow9&amp;#39;';</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>##*新增數個變數(讓每個副標題與箭頭編號不重複)<del class="diffchange diffchange-inline">，分別在theme</del>.<del class="diffchange diffchange-inline">php的</del>&lt;br&gt;<del class="diffchange diffchange-inline">19行新增 </del>$number='1';&lt;br&gt;<del class="diffchange diffchange-inline">20行新增 </del>$numberr=&quot;2&quot;;&lt;br&gt;<del class="diffchange diffchange-inline">24行新增</del>$subMenu.=$number;<del class="diffchange diffchange-inline">#&lt;!--在subMenu字串加入number--&gt;</del>&lt;br&gt;<del class="diffchange diffchange-inline">25行新增 </del>$arrow.=$numberr;<del class="diffchange diffchange-inline">#&lt;!--在arrow字串加入numberr--&gt;</del>&lt;br&gt;<del class="diffchange diffchange-inline">26行新增 </del>$number.=&quot;1&quot;;&lt;br&gt;<del class="diffchange diffchange-inline">27行新增</del>$numberr.=&quot;2&quot;;</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>##*新增數個變數(讓每個副標題與箭頭編號不重複)<ins class="diffchange diffchange-inline">，並在$strnav中新增switchMenu程式(主選單，副選單，箭頭) 並用ul 包住副選單 dt包住主選單&lt;br&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp; ...&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp; if(...){&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp; if($c==1){$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;}&lt;br&gt;&amp;emsp;&amp;emsp;&amp;emsp;$strnav.=&quot;\t\t&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;&quot;.sub&lt;/nowiki&gt;&lt;span style=&quot;color:black;&quot;&gt;str&lt;/span&gt;($v,1).&quot;&lt;/a&gt;&lt;/dt&gt;\n&quot;;&lt;br&gt;&amp;emsp;&amp;emsp; }&lt;br&gt;&amp;emsp;&amp;emsp; ..</ins>.&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp; }&lt;br&gt;&amp;emsp;$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;}&lt;br&gt;→&lt;br&gt;if(gettype($導航列)=='boolean' &amp;&amp; $導航列==false){...}&lt;br&gt;elseif(...){...}&lt;br&gt;else{&lt;br&gt;&amp;emsp; ...&lt;br&gt;&amp;emsp;&lt;span style=&quot;color:red;&quot;&gt;</ins>$number='1';&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;</ins>$numberr=&quot;2&quot;;<ins class="diffchange diffchange-inline">&lt;/span&gt;&lt;br&gt;&amp;emsp;foreach($導航列 as $v){&lt;br&gt;&amp;emsp;&amp;emsp;if(...){</ins>&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;&amp;emsp;if($c==1){$strnav.=&quot;\t&lt;/dl&gt;&lt;/li&gt;\n\t&lt;nowiki&gt;&lt;li&gt;&lt;dl&gt;&lt;/nowiki&gt;\n&quot;;}&lt;br&gt;&lt;span style=&quot;color:red;&quot;&gt;&amp;emsp;&amp;emsp;&amp;emsp;</ins>$subMenu.=$number;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;&amp;emsp;</ins>$arrow.=$numberr;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;&amp;emsp;</ins>$number.=&quot;1&quot;;&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;&amp;emsp;</ins>$numberr.=&quot;2&quot;;<ins class="diffchange diffchange-inline">&lt;/span&gt;</ins>&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;&amp;emsp;</ins>&lt;span style=&quot;color:red;&quot;&gt;$strnav.=&quot;\t\t&lt;dt oncl&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;ick='switchMenu( this,&quot;.$subMenu.&quot;,&quot;.$arrow.&quot;)'&gt;&lt;a href='#'&gt;&quot;.sub&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;str($v,1).&quot;&lt;nowiki&gt;&lt;div id=&quot;.$arrow.&quot; class='arrow'&gt;&lt;/nowiki&gt;&lt;/div&gt;&lt;/a&gt;\n &lt;nowiki&gt;&lt;ul id=&quot;.$subMenu.&quot; class='sub-menu' style='display:none;'&gt; \n&quot;;&lt;<ins class="diffchange diffchange-inline">/nowiki&gt;&lt;/span&gt; &lt;br</ins>&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;}</ins>&lt;<ins class="diffchange diffchange-inline">br</ins>&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;...</ins>&lt;<ins class="diffchange diffchange-inline">br</ins>&gt;<ins class="diffchange diffchange-inline">&amp;emsp;}</ins>&lt;<ins class="diffchange diffchange-inline">br</ins>&gt;<ins class="diffchange diffchange-inline">&amp;emsp;</ins>$strnav.=&quot;\t<ins class="diffchange diffchange-inline">&lt;span style=&quot;color:red&quot;&gt;</ins>&lt;/ul&gt;&lt;/dt<ins class="diffchange diffchange-inline">&gt;&lt;/span</ins>&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;<ins class="diffchange diffchange-inline">&lt;br&gt;}&lt;br&gt;</ins></div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline">##*更改28行程式碼 </del>&lt;br&gt;&lt;span style=&quot;color:red;&quot;&gt;$strnav.=&quot;\t\t<del class="diffchange diffchange-inline">&lt;br&gt;</del>&lt;dt oncl&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;ick='switchMenu( this,&quot;.$subMenu.&quot;,&quot;.$arrow.&quot;)'<del class="diffchange diffchange-inline">&gt;&lt;br</del>&gt;&lt;a href='#'&gt;&quot;.sub&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;str($v,1).&quot;<del class="diffchange diffchange-inline">&lt;br&gt;</del>&lt;nowiki&gt;&lt;div id=&quot;.$arrow.&quot; class='arrow'&gt;&lt;/<del class="diffchange diffchange-inline">nowiki&gt;&lt;br&gt;&lt;</del>nowiki&gt; &lt;/div<del class="diffchange diffchange-inline">&gt;&lt;/nowiki&gt;&lt;br</del>&gt; &lt;/a&gt;\n <del class="diffchange diffchange-inline">&lt;br&gt;</del>&lt;nowiki&gt;&lt;ul id=&quot;.$subMenu.&quot; class='sub-menu' style='display:none;'&gt; \n&quot;;<del class="diffchange diffchange-inline">#</del>&lt;<del class="diffchange diffchange-inline">!--加入switchMenu程式(主選單，副選單，箭頭) 並用ul 包住副選單 dt包住主選單--</del>&gt;&lt;<del class="diffchange diffchange-inline">!--加入箭頭&#160; by 芸伍--</del>&gt;&lt;<del class="diffchange diffchange-inline">/nowiki</del>&gt;&lt;<del class="diffchange diffchange-inline">/span</del>&gt; </div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>##*<ins class="diffchange diffchange-inline">在工具選單中如上述方法修改(新增switchMenu程式(主選單，副選單，箭頭) 並用ul 包住副選單 dt包住主選單)：&lt;br&gt;&amp;emsp;&lt;nowiki&gt;&lt;dt&gt;&lt;a href='#'&gt;&lt;/nowiki&gt;工具&lt;/a&gt; &lt;/dt&gt;&lt;br&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;&lt;br&gt;→&lt;br&gt;&amp;emsp;</ins>&lt;span style=&quot;color:red;&quot;&gt;&lt;dt on&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;click='switchMenu( this,&quot;.$subMenu9.&quot;,&quot;.$arrow9.&quot;)'&gt;&lt;a href='#'&gt;工具<ins class="diffchange diffchange-inline">&lt;nowiki&gt;</ins>&lt;div id='arrow9' class='arrow'<ins class="diffchange diffchange-inline">&gt;&lt;/nowiki</ins>&gt;&lt;/div&gt;&lt;/a&gt;&lt;<ins class="diffchange diffchange-inline">/span</ins>&gt;&lt;<ins class="diffchange diffchange-inline">br</ins>&gt;<ins class="diffchange diffchange-inline">&amp;emsp;</ins>&lt;nowiki&gt;&lt;ul id='subMenu9' class='sub-menu' style='display:none;'&gt;#加入副選單<ins class="diffchange diffchange-inline">&lt;/nowiki&gt;&lt;br&gt;...&lt;br&gt;&lt;span style=&quot;color:red&quot;&gt;</ins>&lt;/ul&gt;&lt;/dt<ins class="diffchange diffchange-inline">&gt;&lt;/span</ins>&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;#加入ul dt 結尾</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline">##*更改40行程式碼 </del>$strnav.=&quot;\t&lt;/ul&gt;&lt;/dt&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;<del class="diffchange diffchange-inline">#加入ul dt 結尾</del></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>##*<ins class="diffchange diffchange-inline">新增switchmenu程式</ins>&lt;br&gt;&lt;script language = 'javascript'&gt;&lt;br&gt;var VisibleMenu = ''; // 記錄目前顯示的子選單的 ID&lt;br&gt;function switchMenu( theMainMenu, theSubMenu,thearrow, theEvent ){// 加入switchMenu程式(主選單，副選單，箭頭) 點擊執行&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;</ins>var SubMenu = document.getElementById( String(theSubMenu) );// 定義程式中的副選單&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;</ins>const div = document.getElementById( String(thearrow) );// 定義程式中的箭頭&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;</ins>if( SubMenu.style.display == 'none' ){ // 若副選單原本未顯示&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp</ins>;SubMenu.style.display = 'block';// 顯示副選單&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;</ins>div.style.transform = 'rotate(135deg)';// 旋轉箭頭往下&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;</ins>VisibleMenu = theSubMenu;// 顯示選單為本副選單&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;</ins>}&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;</ins>else{ // 隱藏子選單&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;</ins>if( theEvent != 'MouseOver' || VisibleMenu != theSubMenu ){&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;&amp;emsp</ins>;SubMenu.style.display = 'none';// 不顯示副選單&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;&amp;emsp;</ins>div.style.transform = 'rotate(45deg)';// 旋轉箭頭往右&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;&amp;emsp;</ins>VisibleMenu = '';// 顯示選單為空&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;&amp;emsp;</ins>}&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;&amp;emsp;</ins>}&lt;br&gt;<ins class="diffchange diffchange-inline">&amp;emsp;</ins>}&lt;br&gt;&lt;/script&gt;&lt;br&gt;</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>##*<del class="diffchange diffchange-inline">更改43行程式碼 </del>&lt;span style=&quot;color:red;&quot;&gt;&lt;dt on&lt;/span&gt;&lt;span style=&quot;color:red;&quot;&gt;click='switchMenu( this,&quot;.$subMenu9.&quot;,&quot;.$arrow9.&quot;)'&gt;&lt;a href='#'&gt;工具&lt;div id='arrow9' class='arrow'&gt;&lt;/div&gt;&lt;/a&gt;<del class="diffchange diffchange-inline">#</del>&lt;<del class="diffchange diffchange-inline">nowiki</del>&gt;&lt;<del class="diffchange diffchange-inline">!--加入switchMenu程式(主選單，副選單，箭頭) 並用ul 包住副選單 dt包住主選單--&gt; &lt;!--加入箭頭&#160; by 芸伍--</del>&gt;&lt;<del class="diffchange diffchange-inline">/</del>nowiki&gt;<del class="diffchange diffchange-inline">&lt;/span&gt;</del></div></td><td colspan="2">&#160;</td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline">##*更改44行程式碼 </del>&lt;ul id='subMenu9' class='sub-menu' style='display:none;'&gt;#加入副選單</div></td><td colspan="2">&#160;</td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline">##*更改60行程式碼 </del>&lt;/ul&gt;&lt;/dt&gt;&lt;/dl&gt;&lt;/li&gt;\n&quot;;#加入ul dt 結尾</div></td><td colspan="2">&#160;</td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>##*<del class="diffchange diffchange-inline">新增程式</del>&lt;br&gt;&lt;script language = 'javascript'&gt;&lt;br&gt;var VisibleMenu = ''; // 記錄目前顯示的子選單的 ID&lt;br&gt;function switchMenu( theMainMenu, theSubMenu,thearrow, theEvent ){// 加入switchMenu程式(主選單，副選單，箭頭) 點擊執行&lt;br&gt;var SubMenu = document.getElementById( String(theSubMenu) );// 定義程式中的副選單&lt;br&gt;const div = document.getElementById( String(thearrow) );// 定義程式中的箭頭&lt;br&gt;if( SubMenu.style.display == 'none' ){ // 若副選單原本未顯示&lt;br&gt;<del class="diffchange diffchange-inline">let deg=135</del>;<del class="diffchange diffchange-inline">&lt;br&gt;</del>SubMenu.style.display = 'block';// 顯示副選單&lt;br&gt;div.style.transform = 'rotate(135deg)';// 旋轉箭頭往下&lt;br&gt;VisibleMenu = theSubMenu;// 顯示選單為本副選單&lt;br&gt;}&lt;br&gt;else{ // 隱藏子選單&lt;br&gt;if( theEvent != 'MouseOver' || VisibleMenu != theSubMenu ){&lt;br&gt;<del class="diffchange diffchange-inline">let deg=45</del>;<del class="diffchange diffchange-inline">&lt;br&gt;</del>SubMenu.style.display = 'none';// 不顯示副選單&lt;br&gt;div.style.transform = 'rotate(45deg)';// 旋轉箭頭往右&lt;br&gt;VisibleMenu = '';// 顯示選單為空&lt;br&gt;}&lt;br&gt;}&lt;br&gt;}&lt;br&gt;&lt;/script&gt;&lt;br&gt;</div></td><td colspan="2">&#160;</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>===頁首頁尾===</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>===頁首頁尾===</div></td></tr> </table>

林芸伍