小眼睛: Dreamweaver CS5 做出簡易下拉式選單

Dreamweaver CS5 做出簡易下拉式選單

新版的Dreamweaver就內建簡易的下拉式選單，不用自己再去寫javascrip

點選插入→Spry→Spry選單列

選擇選單的顯示方式

下工具列下方，修改自己要的選單名稱，選擇連結旁的資料夾找到要連到的網頁

下拉式選單最多支援三層

儲存網頁，出現下拉式選單的js目錄

就完成了基本的下拉式選單

若想做不跟別人不一樣的選單，可以修改右邊的CSS規則

若要變更選單項目的文字樣式，請使用下表找出適合的 CSS 規則，然後變更預設值：

要變更的樣式	垂直或水平選單列的 CSS 規則	相關屬性和預設值
預設文字	ul.MenuBarVertical a、ul.MenuBarHorizontal a	color: #333; text-decoration: none;
滑鼠指標滑過時的文字顏色	ul.MenuBarVertical a:hover、ul.MenuBarHorizontal a:hover	color: #FFF;
成為焦點時的文字顏色	ul.MenuBarVertical a:focus、ul.MenuBarHorizontal a:focus	color: #FFF;
滑鼠指標滑過時的選單列項目顏色	ul.MenuBarVertical a.MenuBarItemHover、ul.MenuBarHorizontal a.MenuBarItemHover	color: #FFF;
滑鼠指標滑過時的子選單項目顏色	ul.MenuBarVertical a.MenuBarItemSubmenuHover、ul.MenuBarHorizontal a.MenuBarItemSubmenuHover	color: #FFF;

變更選單項目背景顏色

要變更的顏色	垂直或水平選單列的 CSS 規則	相關屬性和預設值
預設背景	ul.MenuBarVertical a、ul.MenuBarHorizontal a	background-color: #EEE;
滑鼠指標滑過時的背景顏色	ul.MenuBarVertical a:hover、ul.MenuBarHorizontal a:hover	background-color: #33C;
成為焦點時的背景顏色	ul.MenuBarVertical a:focus、ul.MenuBarHorizontal a:focus	background-color: #33C;
滑鼠指標滑過時的選單列項目顏色	ul.MenuBarVertical a.MenuBarItemHover、ul.MenuBarHorizontal a.MenuBarItemHover	background-color: #33C;
滑鼠指標滑過時的子選單項目顏色	ul.MenuBarVertical a.MenuBarItemSubmenuHover、ul.MenuBarHorizontal a.MenuBarItemSubmenuHover	background-color: #33C;

如果您要變更選單項目的尺寸，請變更選單項目的 li 和 ul 標籤的寬度屬性。

將寬度屬性變更為您所要的寬度 (或者將屬性變更為 auto 以移除固定寬度，並將屬性和值white-space: nowrap; 新增至規則)。

找出 ul.MenuBarVertical ul 或 ul.MenuBarHorizontal ul 規則。

將寬度屬性變更為您所要的寬度 (或者將屬性變更為 auto 以移除固定寬度)。

找出 ul.MenuBarVertical ul li 或 ul.MenuBarHorizontal ul li 規則：

新增下列屬性至規則：float: none; 和 background-color: transparent;。

刪除 width: 8.2em; 屬性和值。

Spry 選單列子選單的位置是由子選單 ul 標籤上的邊界屬性所控制。