Spry Menu 的應用技巧 Vertical Menu Bar

美工製作網頁選單如果使用 Dreamweaver 常會使用 Spry menu 來製作加快處理選單的作法. Spry menu 是一個方便的選單處理方式. 不過如果對於 css 不熟悉或是剛剛入門的設計師而言要製作稍微客製化的選單就有點難度.

先針對一般的選單設計, 要製作出這樣的選單如果使用 Spry menu 處理很快, 以垂直顯示(Vertical) 的選單來說,設定好選單項目內容稍微修改一下 css 項目就可以達成. 每次選擇一個選項, 就會在該項目右邊顯示出相同高度的次目錄.

例如: http://www.smdoor.com.tw/test4.html

但是如果客戶要求要把選單點選後的次選單位置統一固定高度顯示,初學者可能會傻眼, 不知道要去哪邊修改高度讓他每次選擇一個主選單後次選單固定在一致的高度位置顯示.



例如: http://www.smdoor.com.tw/test3.html

說穿了就是要在次選單選項的 html 語法中 <ul>...</ul> 來動手腳了.

先指定次選單的 <ul> id 例如:

<div class="wrapper">
   <ul id="MenuBar1" class="MenuBarVertical">
     <li><a class="MenuBarItemSubmenu" href="#">銅 雕 門 系 列</a>
<ul id="pda">
 <li><a href="#">項目 1</a> </li>
 <li><a href="#">項目 2</a></li>
 <li><a href="#">項目 3</a></li>
</ul>
 </li>
</ul>
   <ul id="MenuBar1" class="MenuBarVertical">
     <li><a class="MenuBarItemSubmenu" href="#">碳 纖 門 系 列</a>
<ul id="pdb">
 <li><a href="#">項目 1</a> </li>
 <li><a href="#">項目 2</a></li>
 <li><a href="#">項目 3</a></li>
</ul>
 </li>
</ul>
..........
..........
..........
</div>

這邊已經指定好了次選單 <ul> 的 id 為 pda , pdb ...有幾個次選單就針對該次選單的 ul 來指定 id.
接著就針對 SpryMenuBarVertical.css 來處理 css 的內容.

原始的 SpryMenuBarVertical.css 處理次選單的地方是在 ul.MenuBarVertical ul 這一段 css 語法中每次點選主選單右邊就會跑出次選單,並在點選的主選單右邊相同高度顯示.

ul.MenuBarVertical ul {
margin: 0 0 0 96%;
padding: 0;
list-style-type: none;
font-size: 10px;
position: absolute;
z-index: 1020;
cursor: default;
width: 12em;
left: -1000em;
top: 1px;
}

其中的 margin : 0 0 0 96%; 就是要顯示次選單的位置. 因為先前已經設定了每個次選單的 id
我們就要針對每一個次選單來個別的指定顯示位置;讓他固定在一致的高度位置顯示. 所以針對每個次選單的 ul id 進行高度的設定.

首先要知道主選單的每個選項的高度, 在範例中每個主選單的高度為 36px,因此第一個主選單選擇後右邊出現的次選單高度就是要與選定的主選單高度相同,因此設定為 margin: 0 0 0 96%;, 往後每個主選單隨著點選的變化, 就要增加次選單高度的位置.

這邊使用負數指定高度是因為第二個主選單後次選單顯示的位置不再是與該主選單平行而是要跑到第一個主選單點選出次選單的位置, 所以是離開第二個主選單的位置因此改用負數顯示. 其他往下的選單就是以負數每次增加一個主選單的高度.

#pda {
margin: 0 0 0 96%;
}
#pdb {
margin: -36px 0 0 96%;
}

這樣就可以製作出每個主選單點選後次選單固定在同一個高度位置顯示了.

另外提供一點注意的地方, 在 Spry menu 預設的建議事項中次選單的定位 margin 是以百分比 %來顯示位置的定位點,

例如: margin: -5% 0 0 0 96%;

如果使用 % 來做為定位點, 在不同的瀏覽器中會顯示不同的結果, 為了讓網頁看起來一致建議採用 px 來指定位置比較保險.