Spry Menu 的應用技巧 Vertical Menu Bar

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

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

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

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

網頁製作中使用 Font 字型取代小圖示 (icon)

在製作網頁時往往會用到依些小圖示來標示, 讓網站內容更明確清楚, 現在有一個 font 字型可以使用來取代這些常用的小圖示, 讓網站速度變快, 也省掉相當多的製圖時間.

網址為 : http://fortawesome.github.io/Font-Awesome/

可以參考裡面的範例將所要的字型圖示加到網頁中.