Dreamweaver 說明 / 使用 Spry 自訂選單列 Widget


無標題文件



自訂選單列 Widget


「屬性」檢視窗可讓您對選單列 Widget 進行簡單的編輯,但不支援自訂的樣式設計工作。您可以變更選單列 Widget 的 CSS規則,並依照您所喜愛的樣式建立選單列。


以下主題中的所有 CSS 規則都是指 SpryMenuBarHorizontal.css 或 SpryMenuBarVertical.css 檔案 (視您的選擇而定) 中的預設規則。每當您建立 Spry 選單列 Widget 時,Dreamweaver 都會將這些 CSS 檔案儲存在您網站的 SpryAssets 資料夾中。這些檔案也包含 Widget 所適用各種樣式的實用註解資訊。


您可以輕鬆地在隨附的 CSS 檔案中直接編輯選單列 Widget 的規則,也可以使用「CSS 樣式」面板來編輯選單列的 CSS。「CSS 樣式」面板可以協助您尋找指定給 Widget 不同部分的 CSS 類別,在您使用面板的「目前」模式時,特別有用。




變更選單項目文字樣式


附加至 <a> 標籤的 CSS 包含文字樣式的相關資訊。另外還有幾種附加於 <a> 標籤、與不同的選單狀態相關的文字樣式類別值。



<thead>





</thead>



























要變更的樣式

垂直或水平選單列的 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;


變更選單項目背景顏色


附加至 <a> 標籤的 CSS 包含選單項目背景顏色的相關資訊。另外還有幾種附加於 <a> 標籤、與不同的選單狀態相關的背景顏色類別值。



  • 若要變更選單項目的背景顏色,請使用下表找出適合的 CSS 規則,然後變更預設值:

<thead>





</thead>



























要變更的顏色

垂直或水平選單列的 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 標籤的寬度屬性。



  1. 找出 ul.MenuBarVertical li 或 ul.MenuBarHorizontal li 規則。
  2. 將寬度屬性變更為您所要的寬度 (或者將屬性變更為 auto 以移除固定寬度,並將屬性和值white-space: nowrap; 新增至規則)。
  3. 找出 ul.MenuBarVertical ul 或 ul.MenuBarHorizontal ul 規則。
  4. 將寬度屬性變更為您所要的寬度 (或者將屬性變更為 auto 以移除固定寬度)。
  5. 找出 ul.MenuBarVertical ul li 或 ul.MenuBarHorizontal ul li 規則:
  6. 新增下列屬性至規則:float: none; 和 background-color: transparent;。
  7. 刪除 width: 8.2em; 屬性和值。

定位子選單


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



  1. 找出 ul.MenuBarVertical ul 或 ul.MenuBarHorizontal ul 規則。
  2. 將 margin: -5% 0 0 95%; 預設值變更為您所要的值。

留言

這個網誌中的熱門文章

歐姆龍 HEM-7600T 評價,購買心得分享(打臉文)

超任 三國志3代,登入武將金手指

年青人眼鏡評價(負評),辛酸血淚史分享文