Posted on 2008-01-24 23:12
itspy 閱讀(604)
評論(0) 編輯 收藏 所屬分類:
其它技術(shù)
主頁(有示例):http://plugins.jquery.com/project/jdMenu
jmenu是我見過菜單中最完善的,加上它使用的jquery,我對jquery比較熟悉,所以使用起來比較方便,現(xiàn)記錄筆記如下。
本文章首發(fā)于 http://www.openj.cn
可以通過設(shè)置jd_menu_vertical或者jd_menu來配置菜單是水平的,還是垂直菜單。我在筆記中刪除了所有垂直相關(guān)的CSS
ul.jd_menu_slate {
height: 19px;
background-color: #DDF;
background: url(gradient.png) repeat-x;
border: 1px solid #70777D;
border-top: 1px solid #A5AFB8;
border-left: 1px solid #A5AFB8;
clear: both;
}
ul.jd_menu_slate a,
ul.jd_menu_slate a:active,
ul.jd_menu_slate a:link,
ul.jd_menu_slate a:visited {
text-decoration: none;
color: #FFF;
}
ul.jd_menu_slate ul li a,
ul.jd_menu_slate ul li a:active,
ul.jd_menu_slate ul li a:link,
ul.jd_menu_slate ul li a:visited {
color: #70777D;
}
/**全局生效,配置真正顯示的風(fēng)格,因?yàn)樗男畔⒆詈蠖际峭ㄟ^在li中的子元素顯示出來**/
ul.jd_menu_slate li {
font-family: Tahoma, sans-serif;
font-size: 11px;
padding: 2px 6px 4px 6px;
cursor: pointer;
white-space: nowrap;
color: #FFF;
}
/**菜單欄目的樣式**/
ul.jd_menu_slate li.jd_menu_active_menubar,
ul.jd_menu_slate li.jd_menu_hover_menubar {
padding-left: 5px;
border-left: 1px solid #ABB5BC;
padding-right: 5px;
border-right: 1px solid #929AA1;
border-right: 1px solid #70777D;
color: #FFF;
background: url(gradient-alt.png) repeat-x;
}
/**下拉菜單所使用的樣式,不管是多少級菜單**/
ul.jd_menu_slate ul {
background: #ABB5BC;
border: 1px solid #70777D;
}
ul.jd_menu_slate ul li {
padding: 3px 10px 3px 4px;
background: #E6E6E6;
border: none;
color: #70777D;
}
/**只有使用動態(tài)菜單(AJAX)才會用的到**/
ul.jd_menu_slate ul li.jd_menu_active,
ul.jd_menu_slate ul li.jd_menu_hover {
background: url(gradient.png) repeat-x;
padding-top: 2px;
border-top: 1px solid #ABB5BC;
padding-bottom: 2px;
border-bottom: 1px solid #929AA1;
color: #FFF;
}
/**菜單欄目的樣式**/
ul.jd_menu_slate ul li.jd_menu_active a.jd_menu_active,
ul.jd_menu_slate ul li.jd_menu_hover a.jd_menu_hover {
color: #FFF;
}