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)的一種,可將檔案轉為另一個檔案。

導覽列與導覽按鈕的設計方法導覽列與導覽按鈕的設計方法

導覽列與導覽按鈕的設計方法,常用的有以下類型:

導覽列與導覽按鈕的設計方法導覽列設計/微軟網路機器人 Webbot 法
導覽列與導覽按鈕的設計方法導覽列設計/互動式按鈕設計法
導覽列與導覽按鈕的設計方法導覽列設計/自訂 Java 法
導覽列與導覽按鈕的設計方法導覽列設計/Html5 CSS 法

其中以互動式按鈕設計法、與 Html5 CSS 法在效果與未來性上較優。當然,如果程式與美工能力均強,則 Html5 CSS 法應是第一選擇。

除此之外,還有進階的:

導覽列與導覽按鈕的設計方法導覽列設計/下拉選單與樹狀導覽法
導覽列與導覽按鈕的設計方法導覽列設計/雙導覽列_多導覽列法
導覽列與導覽按鈕的設計方法導覽列設計/固定位置導覽列法

下拉式選單導覽,是一種節省頁面空間的設計。

各種下拉式選單示例  Pull Down Menu Examples

The Pull Down copyrights statement.

下拉式選單示例 單欄下拉式選單

多元學習‧獨立好問

程式碼:

<h4>
<a href="http://tx.liberal.ntu.edu.tw/" class="anchorclass" rel="submenu1">
多元學習‧獨立好問</a></h4>

<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://tx.liberal.ntu.edu.tw/">吳統雄</a></li>
<li><a href="http://tx.liberal.ntu.edu.tw/research.htm">研究</a></li>
<li><a href="http://tx.liberal.ntu.edu.tw/teaching.htm">教學</a></li>
<li><a href="http://tx.liberal.ntu.edu.tw/TalkList.htm">討論區</a></li>
<li><a href="http://tx.liberal.ntu.edu.tw/helps.htm">站務</a></li>
</ul>
</div>

下拉式選單示例 多欄下拉式選單

統雄網群

程式碼:

<h4 class="tb"><a href="http://tx.liberal.ntu.edu.tw/txcomm/index.htm" class="anchorclass" rel="submenu2">統雄網群</a></h4>
<div id="submenu2" class="anylinkcsscols">

<div class="column">
<h5>多元學習</h5>
<ul>
<li><a href="http://tx.liberal.ntu.edu.tw/research.htm">研究</a></li>
<li><a href="http://tx.liberal.ntu.edu.tw/teaching.htm">教學</a></li>
<li><a href="http://tx.liberal.ntu.edu.tw/TalkList.htm">討論區</a></li>
<li><a href="http://tx.liberal.ntu.edu.tw/helps.htm">站務</a></li>
</ul>
</div>

<div class="column">
<h5>數位文創</h5>
<ul>
<li><a href="http://tx.liberal.ntu.edu.tw/ColorStone/!Related/Visual_&.htm">視覺設計</a></li>
<li><a href="http://tx.liberal.ntu.edu.tw/ColorStone/!Related/DTP_&.htm">電子書</a></li>
<li><a href="http://tx.liberal.ntu.edu.tw/ColorStone/!Related/Video_&.htm">微電影</a></li>
<li><a href="http://tx.liberal.ntu.edu.tw/ColorStone/!Related/Web_&.htm">網路文創</a></li>
</ul>
</div>

<div class="column">
<h5>人類行為研究</h5>
<ul>
<li><a href="http://tx.liberal.ntu.edu.tw/~PurpleWoo/">第3類知識</a></li>
<li><a href="http://tx.liberal.ntu.edu.tw/Jx/Methodology/Method_!.htm">研究方法</a></li>
<li><a href="http://tx.liberal.ntu.edu.tw/Jx/Methodology/Analy-HappyLearn.htm">數學樂學</a></li>
<li><a href="http://tx.liberal.ntu.edu.tw/SilverJay/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。

文字改為圖形標題。

web automation這是 dynamicdrive.com 提供的範本,More info at Dynamic Drive

 

advanced Advanced: Tree Navigation Bar樹狀導覽

Tree Navigation Bar is good for Project/Technical based web that emphasizes practice more than aesthetics.

More Free/Share components

回頁首 Up to page head 至相關主題 Go to related pages
上一頁 Back to previous page 回頁首 Up to page head 下一頁 Go to nex page  
請點這裡看所有留言分類 Please click here to view categories of comments
同類別內相關主題