DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery常見問題 >> 向上彈出菜單jQuery插件
向上彈出菜單jQuery插件
編輯:JQuery常見問題     
插件名:
英文名: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/

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

從示例可以看出,Keleyi這個菜單插件使用方便,可以靈活自定義多種樣式,包括顏色,位置,菜單項寬度等等。

下面給出一個示例的HTML文件代碼:

<!DOCTYPE html>
<html>
<head>
<title>Keleyi(jQuery Menu Plugin) - </title><base target="_blank" />
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<link href="http:///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;background-color:#66FF66;"></div>
<ul id="keleyi-menu">
<li><a href="http://">Home</a></li>
<li><a href="http:///menu/webqd/">Web</a>
<ul>
<li><a href="http:///menu/javascript/">Javascript</a></li>
<li><a href="http:///menu/jquery/">jQuery</a></li>
<li><a href="http:///menu/html5/">HTML5</a></li>
</ul>
</li>
<li><a href="http:///keleyi/">Keleyi</a></li>
<li><a href="http:///keleyi/demo/">Demo</a>
<ul>
<li><a href="http:///keleyi/demo/1.htm">Demo 1</a></li>
<li><a href="http:///keleyi/demo/2.htm">Demo 2</a></li>
<li><a href="http:///keleyi/demo/3.htm">Demo 3</a></li>
<li><a href="http:///keleyi/demo/4.htm">Demo 4</a></li>
<li><a href="http:///keleyi/demo/5.htm">Demo 5</a></li>
<li><a href="http:///keleyi/demo/6.htm">Demo 6</a></li>
<li><a href="http:///keleyi/demo/7.htm">Demo 7</a></li>
</ul>
</li>
<li><a href="http:///keleyi/demo/8.htm">Demo 8</a></li>
<li><a href="http:///keleyi/demo/9.htm">Demo 9</a></li>
</ul>
<div style="height:900px; visibility: visible; background-color:Olive">
</div>
<script type="text/javascript" src="http:///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/inc/jquery.keleyi.css" type="text/css" rel="Stylesheet" />
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http:///keleyi/inc/jquery.keleyi.js"></script>

插件的使用二:
從上面的代碼看出,這個菜單的HTML代碼非常簡潔,格式如下:
<ul id="keleyi-menu">

<li><a href="http://">主菜單項一</a></li>
<li><a href="http:///keleyi/">主菜單項二</a></li>

<li><a href="http:///keleyi/demo/">主菜單項三</a>
<ul>
<li><a href="http:///keleyi/demo/1.htm">子菜單項1</a></li>
<li><a href="http:///keleyi/demo/2.htm">子菜單項2</a></li>
<li><a href="http:///keleyi/demo/3.htm">子菜單項3</a></li>
<li><a href="http:///keleyi/demo/4.htm">子菜單項4</a></li>
<li><a href="http:///keleyi/demo/5.htm">子菜單項5</a></li>
<li><a href="http:///keleyi/demo/6.htm">子菜單項6</a></li>
<li><a href="http:///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>

這樣就可以在頁面上顯示一個特別的向上彈出菜單了。


菜單大全
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved