码迷,mamicode.com
首页 > Web开发 > 详细

向上弹出菜单jQuery插件

时间:2015-12-03 15:35:31      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:

插件名:柯乐义
英文名:Keleyi
js文件名称:jquery.keleyi.js
插件功能:该插件可以让你轻易地在页面上构建一个向上弹出的二级菜单。


支持浏览器:

keleyi 0.1.4版本支持IE6以及以上、Chrome、火狐(Firefox)、欧朋(Opera)、Safari等浏览器,也支持IE6

keleyi 0.1.3版本支持IE8以及以上、Chrome、火狐(Firefox)、欧朋(Opera)、Safari等浏览器,不支持IE6。


示例查看:http://keleyi.com/keleyi/

更多示例:0 1 2 3 4 5 6 7 8 9 10 11 12

从示例可以看出,Keleyi这个菜单插件使用方便,可以灵活自定义多种样式,包括颜色,位置,菜单项宽度等等。

下面给出一个示例的HTML文件代码:

<!DOCTYPE html>
<html>
<head>
<title>Keleyi(jQuery Menu Plugin) - keleyi.com</title><base target="_blank" /> 
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<link href="http://keleyi.com/keleyi/inc/jquery.keleyi.css" type="text/css" rel="Stylesheet" />
<style>
body
{
margin: 0px;
overflow:scroll;
}
</style>
</head>
<body>
<div style="text-align:center"><h1>Keleyi</h1>
A jQuery Menu Plugin 
</div>
<div style="height:360px;"></div>
<ul id="keleyi-menu">
<li><a href="http://keleyi.com">Home</a></li>
<li><a href="http://keleyi.com/menu/webqd/">Web</a>
<ul>
<li><a href="http://keleyi.com/menu/javascript/">Javascript</a></li>
<li><a href="http://keleyi.com/menu/jquery/">jQuery</a></li>
<li><a href="http://keleyi.com/menu/html5/">HTML5</a></li>
</ul>
</li>
<li><a href="http://keleyi.com/keleyi/">Keleyi</a></li>
<li><a href="http://keleyi.com/keleyi/demo/">Demo</a>
<ul>
<li><a href="http://keleyi.com/keleyi/demo/1.htm">Demo 1</a></li>
<li><a href="http://keleyi.com/keleyi/demo/2.htm">Demo 2</a></li>
<li><a href="http://keleyi.com/keleyi/demo/3.htm">Demo 3</a></li>
<li><a href="http://keleyi.com/keleyi/demo/4.htm">Demo 4</a></li>
<li><a href="http://keleyi.com/keleyi/demo/5.htm">Demo 5</a></li>
<li><a href="http://keleyi.com/keleyi/demo/6.htm">Demo 6</a></li>
<li><a href="http://keleyi.com/keleyi/demo/7.htm">Demo 7</a></li>
</ul>
</li>
<li><a href="http://keleyi.com/keleyi/demo/8.htm">Demo 8</a></li>
<li><a href="http://keleyi.com/keleyi/demo/9.htm">Demo 9</a></li>
</ul>
<div style="height:900px; visibility: visible;
</div>
<script type="text/javascript" src="http://keleyi.com/keleyi/inc/jquery.keleyi.js"></script>
<script type="text/javascript">
$("#keleyi-menu").keleyi({ "item_width": "100px", "bar_position": "relative"
, "margin": "0px auto 0px 0px"
});
</script>
</body>
</html>


插件的使用一:
使用这个插件,需要引用这3个文件(一个CSS文件,一个jQuery库,和一个插件js文件):
<link href="http://keleyi.com/keleyi/inc/jquery.keleyi.css" type="text/css" rel="Stylesheet" />
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://keleyi.com/keleyi/inc/jquery.keleyi.js"></script>

插件的使用二:
从上面的代码看出,这个菜单的HTML代码非常简洁,格式如下:
<ul id="keleyi-menu">

<li><a href="http://keleyi.com">主菜单项一</a></li>
<li><a href="http://keleyi.com/keleyi/">主菜单项二</a></li>

<li><a href="http://keleyi.com/keleyi/demo/">主菜单项三</a>
<ul>
<li><a href="http://keleyi.com/keleyi/demo/1.htm">子菜单项1</a></li>
<li><a href="http://keleyi.com/keleyi/demo/2.htm">子菜单项2</a></li>
<li><a href="http://keleyi.com/keleyi/demo/3.htm">子菜单项3</a></li>
<li><a href="http://keleyi.com/keleyi/demo/4.htm">子菜单项4</a></li>
<li><a href="http://keleyi.com/keleyi/demo/5.htm">子菜单项5</a></li>
<li><a href="http://keleyi.com/keleyi/demo/6.htm">子菜单项6</a></li>
<li><a href="http://keleyi.com/keleyi/demo/7.htm">子菜单项7</a></li>
</ul>
</li>

</ul>

插件的使用三:
然后就是定义菜单的代码:
<script type="text/javascript">
$("#keleyi-menu").keleyi({ "item_width": "100px", "bar_position": "relative"
, "margin": "0px auto 0px 0px"
});
</script>

这样就可以在页面上显示一个特别的向上弹出菜单了。


菜单大全

 

 

原文:http://keleyi.com/a/bjac/c4oc8tyo.htm

向上弹出菜单jQuery插件

标签:

原文地址:http://www.cnblogs.com/wangyongx/p/5016375.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!