向上弹出菜单jQuery插件
插件名：柯樂義
英文名：Keleyi
js文件名稱：jquery.keleyi.js
插件功能：該插件可以讓你輕易地在頁面上構(gòu)建一個(gè)向上彈出的二級(jí)菜單。
支持瀏覽器：
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這個(gè)菜單插件使用方便，可以靈活自定義多種樣式，包括顏色，位置，菜單項(xiàng)寬度等等。
下面給出一個(gè)示例的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>
插件的使用一：
使用這個(gè)插件,需要引用這3個(gè)文件(一個(gè)CSS文件，一個(gè)jQuery庫，和一個(gè)插件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>
插件的使用二：
從上面的代碼看出，這個(gè)菜單的HTML代碼非常簡(jiǎn)潔，格式如下：
<ul id="keleyi-menu">
<li><a href="http://keleyi.com">主菜單項(xiàng)一</a></li>
<li><a href="http://keleyi.com/keleyi/">主菜單項(xiàng)二</a></li>
<li><a href="http://keleyi.com/keleyi/demo/">主菜單項(xiàng)三</a>
<ul>
<li><a href="http://keleyi.com/keleyi/demo/1.htm">子菜單項(xiàng)1</a></li>
<li><a href="http://keleyi.com/keleyi/demo/2.htm">子菜單項(xiàng)2</a></li>
<li><a href="http://keleyi.com/keleyi/demo/3.htm">子菜單項(xiàng)3</a></li>
<li><a href="http://keleyi.com/keleyi/demo/4.htm">子菜單項(xiàng)4</a></li>
<li><a href="http://keleyi.com/keleyi/demo/5.htm">子菜單項(xiàng)5</a></li>
<li><a href="http://keleyi.com/keleyi/demo/6.htm">子菜單項(xiàng)6</a></li>
<li><a href="http://keleyi.com/keleyi/demo/7.htm">子菜單項(xiàng)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>
這樣就可以在頁面上顯示一個(gè)特別的向上彈出菜單了。
菜單大全
?
?
原文：http://keleyi.com/a/bjac/c4oc8tyo.htm
轉(zhuǎn)載于:https://www.cnblogs.com/wangyongx/p/5016375.html
總結(jié)
以上是生活随笔為你收集整理的向上弹出菜单jQuery插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 比亚迪副总裁豪捐1.6亿：拿出50万股“
- 下一篇： 1203正规式转换为有穷自动机