JAVA AJAX C++

主頁（有示例）：http://plugins.jquery.com/project/jdMenu



jmenu是我見過菜單中最完善的，加上它使用的jquery，我對jquery比較熟悉，所以使用起來比較方便，現記錄筆記如下。

本文章首發于 http://www.openj.cn

可以通過設置jd_menu_vertical或者jd_menu來配置菜單是水平的，還是垂直菜單。我在筆記中刪除了所有垂直相關的ＣＳＳ

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;
}

/**全局生效，配置真正顯示的風格，因為所胡的信息最后都是通過在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;
}

/**只有使用動態菜單（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;
}