jmenu的css笔记

主页（有示例）：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;
}