Pages

0

JQuery dropListMenu plugin


點選上面這張圖片就可以看到效果~

其實下拉式選單對我來說並不難，
大概半小時就可以用 css 做出一組，
但要做成方便修改的 plugin 又是一回事了，
這個 plugin 我整整做了兩天才做出來，
在設定自由度與彈性上做了滿大的開放，
應該可以滿足大部分前端設計者的需求，
但真正快速且對流覽器負擔不大的下拉式選單，
坦白說還是用 css 做的最快速ㄎㄎ~
oxxo_dropListMenu_v1.js 主程式下載 (右鍵另存)
oxxo_dropListMenu_v1_options.js 設定檔下載 (右鍵另存)
dropListMenu_img.zip 指標箭頭 icon 下載 (右鍵另存)

因為下拉式選單的設定不少，
(例如選單位置、顏色、背景色、邊框...等一大堆)
所以另外做了一個設定檔的 js，
要套用這個 plugin 就要連同設定檔一起套用，
不過把設定檔直接寫在同一頁裡面也是沒問題的，
只是會落落長，所以才獨立到外面，
下載後開啟，說明在設定檔裡面都寫得很清楚囉，
相信在五分鐘內就可以做出一個美美的下拉選單~

設定檔：
mainFloat : 0,                                // 0:水平，1:垂直
mainWidth : 0,                                // 主選單為垂直的時候，必需要設定寬度，主選單為水平時不一定，如果不需要，填上 0 可取消寬度

mainMargin : 2,                               // 主選單彼此之間的間隔
mainPadding : "5px 10px",                     // 主選單文字與其邊框的間距 ( css padding 寫法 ) 

secondMenuMarginLeftMove : 0,                 // 第二層選單左右水平位置 
secondMenuMarginTopMain : 1,                  // 第二層選單與主選單之間的空隙 ( 主選單為水平 )
secondMenuMarginTopMove : -28,                // 第二層選單上下位置 ( 主選單垂直時 ) 
thirdMenuMarginTopMove : -1,                  // 第三層選單(與以後)垂直移動距離 ( 主選單垂直時 ) 

allMenuAnimateOption : 1,                      // 彈出動畫開啟或關閉，0:關閉，1:開啟
allMenuAnimateTime :250,                       // 彈出動畫時間，毫秒

allMenuShadowOption : 1,                       // 陰影開啟或關閉，0:關閉，1:開啟
allMenuShadowX : 2,                            // 陰影水平位移
allMenuShadowY : 2,                            // 陰影垂直位移
allMenuShadowBlur : 3,                         // 陰影模糊程度
allMenuShadowColor : "#000",                   // 陰影顏色 (css 顏色寫法) 

mainBorderWidth : 1,                           // 主選單邊框樣式 ( css 寫法 )
mainBorderStyle : "solid",
mainBorderColor : "#aaa",
mainHoverBorderWidth : 1,                      // 主選單 hover 邊框樣式 ( css 寫法 )
mainHoverBorderColor : "#aaa",
mainHoverBorderStyle : "solid", 

mainFontSize : "12px",                        // 主選單文字大小 ( 包含超連結 )  ( css 寫法 )
mainColor : "#000",                           // 主選單文字顏色 ( 包含超連結 )  ( css 寫法 )
mainTextAlign : "left",                       // 主選單文字對齊 ( 包含超連結 )  ( css 寫法 )
mainTextDecoration : "none",                // 主選單文字樣式 ( 包含超連結 )  ( css 寫法 )
mainFontWeight : "normal",                    // 主選單文字粗細 ( 包含超連結 )  ( css 寫法 )
mainFontFamily : "新細明體" ,                 // 主選單字體 ( 包含超連結 )  ( css 寫法 )
mainHoverTextDecoration : "underline",        // 主選單hover文字樣式 ( 包含超連結 hover )  ( css 寫法 )
mainHoverColor : "#fff",                      // 主選單hover文字顏色 ( 包含超連結 hover )  ( css 寫法 )
mainHoverFontWeight : "normal",                 // 主選單hover文字粗細 ( 包含超連結 hover )  ( css 寫法 )

mainBg : "#eee",                              // 主選單背景樣式 ( css 寫法，寫法可與 css 中 background 寫法相同 )
mainHoverBg : "#666",                         // 主選單hover背景樣式 ( css 寫法，寫法可與 css 中 background 寫法相同 )

outsideMenuBorderWidth : 1,                   // 選單最外圍邊框樣式 ( css 寫法 ) ( 不含主選單 )
outsideMenuBorderStyle : "solid",
outsideMenuBorderColor : "#999",
outsideMenuBg : "#fff",                       // 選單最外圍背景樣式 ( css 寫法，寫法可與 css 中 background 寫法相同 ) ( 不含主選單 ) 

allMenuMarginTop : 0,                         // 選單內邊框與外圍邊框的間距  ( 不含主選單 )
allMenuMarginRight : 0,
allMenuMarginBottom : 0,
allMenuMarginLeft : 0,

allMenuPaddingTop : 5,                        // 選單內文字與內邊框間距 
allMenuPaddingRight : 5,
allMenuPaddingBottom : 5,
allMenuPaddingLeft : 5,
allMenuBorderWidth : "0 0 0 0",                // 選單邊框樣式 ( css 寫法 ) 
allMenuBorderStyle : "dashed",
allMenuBorderColor : "#00f",
allMenuHoverBorderWidth : "0 0 0 0",           // 選單邊框 hover 樣式 ( css 寫法 ) 
allMenuHoverBorderStyle : "dashed",
allMenuHoverBorderColor : "#00f",

allMenuLastBorderOption : 1,                     // 進階選項，0:最後一個選項沒有border-bottom，1:有

allMenuFontSize : "12px",                        // 選單文字大小 ( 包含超連結 ) ( css 寫法 ) 
allMenuColor : "#000",                           // 選單文字顏色 ( 包含超連結 )  ( css 寫法 ) 
allMenuTextAlign : "left",                       // 選單文字對齊 ( 包含超連結 )  ( css 寫法 ) 
allMenuTextDecoration : "none",                  // 選單文字樣式 ( 包含超連結 )  ( css 寫法 ) 
allMenuFontWeight : "normal",                      // 選單文字粗細 ( 包含超連結 )  ( css 寫法 ) 
allMenuFontFamily : "新細明體",                  // 選單字體 ( 包含超連結 )  ( css 寫法 ) 
allMenuHoverColor : "#f00",                      // 選單hover文字顏色 ( 包含超連結 hover )  ( css 寫法 ) 
allMenuHoverTextDecoration : "underline",        // 選單hover文字樣式 ( 包含超連結 hover )  ( css 寫法 ) 
allMenuHoverFontWeight : "normal",                 // 選單hover文字粗細 ( 包含超連結 )  ( css 寫法 ) 

allMenuBg : "#f5f5f5",                           // 選單背景樣式 ( css 寫法，寫法可與 css 中 background 寫法相同 )
allMenuHoverBg : "#ddd",                         // 選單背景 hover 樣式 ( css 寫法，寫法可與 css 中 background 寫法相同 )

groupMenuArrowOption : 1,                          // 具有子選單的選項後方是否有箭頭圖顯，預設為開啟，關閉時樣式與選單樣式相同(不包含主選單)，0 關閉，1 開啟
groupMenuWidthAdd : 15,                            // 若要有指示下一層選單的箭頭或背景圖，可用此屬性增大選單右方寬度 
groupMenuArrowIcon : "img/dropListMenu_img/arrow_right_000.gif",    // 箭頭圖檔位置
groupMenuArrowHoverIcon : "img/dropListMenu_img/arrow_right_f00.gif",
groupMenuArrowIconMarginTop : 8,                   // 箭頭和上邊框的距離
groupMenuArrowIconMarginRight : 3                  // 箭頭和右邊框的距

範例html：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>jquery dropListMenu plugin</title>
   <script src="jquery-1.7.1.min.js"></script>
   <script src="plugin/oxxo_plugin/oxxo_dropListMenu_v1.js"></script>
<script src="plugin/oxxo_plugin/oxxo_dropListMenu_v1_options.js"></script>
   </head>
<body>
   <div style=" position:absolute; top:30px; left:30px; z-index:100;">
    <ul id="menu1">
     <li><div><a href="#">選單1</a></div>
      <ul>
       <li><div><a href="#">選單1-1</a></div>
        <ul>
         <li><div><a href="#">選單1-1-1</a></div></li>
        <li><div>選單1-1-2</div></li>
         <li><div>選單1-1-3 長度長</div></li>
        </ul>
       </li>
       <li><div>選單1-2</div></li>
       <li><div>選單1-3</div>
        <ul>
         <li><div>選單1-3-1</div></li>
         <li><div>選單1-3-2 長度長</div></li>
         <li><div>選單1-3-3</div></li>
        </ul>
       </li>
      </ul>
     </li>
    </ul>
  </div>
</body>
</html>

oxxo

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

沒有留言:

張貼留言