keleyi菜单帮助与实例

(版本 0.1.8-0.1.9选项说明)
NameTypeDefault valueDescription
widthString'986px'宽度
marginString'0px auto'外边距
isAutoAddTriangleBooleantrue是否自动在含有子菜单的一级菜单旁显示一个小三角
item_background_colorString'transparent'菜单项的背景颜色
item_background_color_hoverString'#005500'鼠标移到菜单项上时菜单项的背景颜色
item_widthString'auto'菜单项宽度
item_marginString'0px 0px 0px 10px'菜单项外边距
bar_heightString'auto'菜单栏高度
bar_background_colorString'#008000'菜单栏的背景颜色
bar_positionString'fixed'菜单栏的定位类型
bar_bottomString'0px'菜单栏下外边距边界与其包含块下边界之间的偏移
mainItem_colorString'white'一级菜单链接颜色
subItem_colorString'white'二级菜单链接颜色
subMenuShowWayString'show'子菜单的弹出方式,可能值为:show、fadeIn或者slideDown(0.1.8区分大小写,0.1.9不区分)
subMenuShowSpeedNumber0子菜单的弹出隐藏的所用的时间,单位为毫秒

Browser Support

Keleyi 0.1.4+:IE6+(IE6 7 8 9 10 11...),Chrome,Firefox,Opera,Safari
Keleyi 0.1.3:IE8+(IE8 9 10 11...),Chrome,Firefox,Opera,Safari
下面是一个实例:
代码如下:
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://hovertree.com/texiao/keleyi/inc/jquery.keleyi.min.js"></script>
<link href="http://hovertree.com/texiao/keleyi/inc/jquery.keleyi.min.css" type="text/css" rel="Stylesheet" />

<ul id="keleyimenudemo">
<li><a href="http://hovertree.com/">首页</a></li>
<li>
<a href="http://hovertree.com/texiao/">特效</a>
<ul>
<li><a href="http://hovertree.com/texiao/js/snow.htm">下雪</a></li>
<li><a href="http://hovertree.com/texiao/html5/4.htm">下雨</a></li>
<li><a href="http://hovertree.com/texiao/html5/">欢迎</a></li>
</ul>
</li>
<li>
<a href="http://hovertree.com/menu/texiao/">前端</a>
<ul>
<li><a href="http://hovertree.com/menu/jquery/">jQuery</a></li>
<li><a href="http://hovertree.com/menu/javascript/">JavaScript</a></li>
<li><a href="http://hovertree.com/menu/html5/">HTML5</a></li>
<li><a href="http://hovertree.com/menu/css/">CSS</a></li>
</ul>
</li>
<li><a href="http://hovertree.com/hvtimg/">图片</a></li>
<li><a href="http://hovertree.com/map/">导航</a></li>
</ul>

<script>
$("#keleyimenudemo").keleyi({
"width": "456px", "item_width": "90px", "bar_position": "relative"
, "margin": "0px auto", "item_background_color": "#9900FF", "item_background_color_hover": "#6600CC", "item_margin": "0px", "bar_background_color": "transparent"
});
</script>