Navigation Bar & Navigation Buttons Design by
Pull Down Menu and Trees
導覽列與導覽按鈕設計5：下拉選單與樹狀導覽法
Web Design:
Automations - Epistemological/Digital Aesthetics
- Formation Methodology
網站/網頁設計:自動化實作-知識美學/數位美學之建構方法
Links, Navigation and Mata page 超連結、導覽與重新導向
超連結：以<a></a>所構成，各種站間、站內物件的相互連結。
導覽：對具有結構性的內容引導，通常具備按鈕或統一性的視覺設計。
重新導向：是統合標籤(Meta Tag)的一種，可將檔案轉為另一個檔案。
[RwdColorStone/!Related/Navi.htm]各種下拉式選單示例 Pull Down Menu Examples
The Pull Down copyrights statement.
單欄下拉式選單
多元學習‧獨立好問
程式碼：
<h4>
<a href="https://seantxwu.pages.dev/" class="anchorclass"
rel="submenu1">
多元學習‧獨立好問</a></h4>
<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="https://seantxwu.pages.dev/">吳統雄</a></li>
<li><a href="https://seantxwu.pages.dev/research.htm">研究</a></li>
<li><a href="https://seantxwu.pages.dev/teaching.htm">教學</a></li>
<li><a href="https://seantxwu.pages.dev/TalkList.htm">討論區</a></li>
<li><a href="https://seantxwu.pages.dev/helps.htm">站務</a></li>
</ul>
</div>
多欄下拉式選單
統雄網群
程式碼：
<h4 class="tb"><a
href="../%26EWMedia/index.htm" class="anchorclass"
rel="submenu2">統雄網群</a></h4>
<div id="submenu2" class="anylinkcsscols">
<div class="column">
<h5>多元學習</h5>
<ul>
<li><a href="https://seantxwu.pages.dev/research.htm">研究</a></li>
<li><a href="https://seantxwu.pages.dev/teaching.htm">教學</a></li>
<li><a href="https://seantxwu.pages.dev/TalkList.htm">討論區</a></li>
<li><a href="https://seantxwu.pages.dev/helps.htm">站務</a></li>
</ul>
</div>
<div class="column">
<h5>數位文創</h5>
<ul>
<li><a
href="../../RwdColorStone!Related/Visual_&.htm">視覺設計</a></li>
<li><a
href="../../RwdColorStone!Related/DTP_&.htm">電子書</a></li>
<li><a
href="../../RwdColorStone!Related/Video_&.htm">微電影</a></li>
<li><a
href="../../RwdColorStone!Related/Web_&.htm">網路文創</a></li>
</ul>
</div>
<div class="column">
<h5>人類行為研究</h5>
<ul>
<li><a href="../../RwdPurpleWoo/">第3類知識</a></li>
<li><a
href="../../RwdPurpleWoo/Methodology/Method_!.htm">研究方法</a></li>
<li><a
href="../../RwdPurpleWoo/Methodology/Analy-HappyLearn.htm">數學樂學</a></li>
<li><a
href="../../RwdSilverJay/index.htm">電子商務</a></li>
</ul>
</div>
</div>
在 <head> 內的程式碼 Script in the <head> section
以下程式碼必須設在 <head> 內。
anylinkcssmenu.css 與 anylinkcssmenu.js，則放在工具夾 !TxTemp 內。
<link rel="stylesheet" type="text/css"
href="../!TxTemp/anylinkcssmenu.css" />
<script type="text/javascript" src="../!TxTemp/anylinkcssmenu.js">
</script>
<script type="text/javascript">
//anylinkcssmenu.init("menu_anchors_class") ////Pass in the CSS class of
anchor links (that contain a sub menu)
anylinkcssmenu.init("anchorclass")
</script>
下拉式選單之個人化
下拉式選單之個人化可包括：
連結。
欄數。
文字之CSS。
文字改為圖形標題。
這是
dynamicdrive.com 提供的範本，More info at
Dynamic Drive.
Advanced: Tree Navigation Bar樹狀導覽
Tree Navigation Bar is good for Project/Technical based web that emphasizes practice more than aesthetics.
連結不到網頁