posts - 82, comments - 269, trackbacks - 0, articles - 1
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

jmenu的css笔记

Posted on 2008-01-24 23:12 itspy 阅读(457) 评论(0)  编辑  收藏 所属分类: 其它技术

主页(有示例):http://plugins.jquery.com/project/jdMenu



jmenu是我见过菜单中最完善的,加上它使用的jquery,我对jquery比较熟悉,所以使用起来比较方便,现记录笔记如下。

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

可以通过设置jd_menu_vertical或者jd_menu来配置菜单是水平的,还是垂直菜单。我在笔记中删除了所有垂直相关的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;
}

/**全局生效,配置真正显示的风格,因为所胡的信息最后都是通过在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;
}


只有注册用户登录后才能发表评论。


网站导航: