jQuery菜單插件用法實例

2024-05-06 16:23:42

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了jQuery菜單插件用法,以一個實例形式較為詳細的分析了jquery菜單插件的完整使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了jQuery菜單插件用法。分享給大家供大家參考。具體如下：

這里要分享的是一個菜單插件，在http://plugins.jquery.com/keleyi/ 看到的，使用找個插件可以制作頁面底部向上彈出的菜單，不一定在頁底，還有多種其他方式。

jQuery菜單插件js文件：

/*!

* Keleyi(jQuery Menu)

* version: 0.1.6

* Copyright (c) 2013 KeLeyi

*/

(function ($) {

$.fn.keleyi = function (options) {

var settings = $.extend({

width: '986px',

margin: '0px auto',

isAutoAddTriangle: true,

item_background_color_hover: '#005500',

item_background_color: 'transparent',

item_width: 'auto',

item_margin: '0px 0px 0px 10px',

bar_height: 'auto',

bar_position: 'fixed',

bar_background_color: "#008000",

bar_bottom: "0px",

mainItem_color: "white",

subItem_color:"white"

}, options);

$(this).addClass("keleyi-menu");

$(this).css({ "width": settings.width, "margin": settings.margin });

$(this).wrap("<div class='keleyi-menubar'></div>");

var k_bar = $(this).parent();

k_bar.css({ "background-color": settings.bar_background_color

, "height": settings.bar_height, "position": settings.bar_position

, "bottom": settings.bar_bottom, "min-width": settings.width

});

if (! -[1, ] && !window.XMLHttpRequest) {

if (k_bar.css("position") == "fixed") {

ie6FixedBottom(k_bar, settings.bar_bottom);

}

}

$(this).parent().append("<div style='width:100%;clear:both;height:0px;overflow:hidden'></div>");

$(this).find(">li").css({ "width": settings.item_width, "background-color": settings.item_background_color, "margin": settings.item_margin

, "padding": "0px", "white-space": "nowrap", "height": "20px", "float": "left", "text-align": "center"

, "display": "inline-block", "position": "relative"

});

$(this).find(">li a").css({ "color": "white", "line-height": "20px"

, "display": "block", "font-size": "14px"

});

if (settings.isAutoAddTriangle)

$(this).find(">li").has('ul').find("a:first").append("<b></b>");

$(this).find(">li").find("a:first").css({ "width": "100%", "overflow": "hidden", "color": settings.mainItem_color });

$(this).find(">li").find("b").css({ "border-color": ("transparent transparent " + settings.mainItem_color) })

$(this).find(">li ul").css({ "padding": "0px", "list-style-type": "none"

, "background-color": "transparent", "position": "absolute", "display": "none"

});

$(this).find(">li").find("li a").css({ "color": settings.subItem_color });

$(this).find(">li>a").mouseover(function () {

$(this).parent().css({ "background-color": settings.item_background_color_hover });

var k_ul = $(this).parent().find("ul");

if (k_ul.length < 1)

return;

k_ul.css({ "background-color": settings.item_background_color_hover, "top": $(this).parent().position().top - (k_ul.height())

, "left": "0px", "margin": "0px"

}).show();

if (k_ul.width() < $(this).parent().width())

k_ul.width($(this).parent().width());

});

$(this).find(">li").mouseleave(function () {

$(this).find("ul").hide();

$(this).css("background-color", settings.item_background_color);

});

function ie6FixedBottom(fixedobj, bottommargin) {

fixedobj.css({ "position": "absolute" });

var k_bm = new Number;

k_bm = Number(bottommargin.substring(0, bottommargin.length - 2));

var obj = fixedobj[0];

function setStyleTop() {

obj.style.top = document.documentElement.scrollTop + document.documentElement.clientHeight

- obj.offsetHeight - (parseInt(obj.currentStyle.marginTop, 0) || k_bm) - (parseInt(obj.currentStyle.marginBottom, 0) || k_bm)

}

window.onscroll = function () { setStyleTop(); }

window.onresize = function () { setStyleTop(); }

}

}

} (jQuery));

插件css文件：

div.keleyi-menubar{width:100%;visibility:visible;padding:0px;}

ul.keleyi-menu{list-style-type:none;padding:0px;}

ul.keleyi-menu a{text-decoration:none}

ul.keleyi-menu a:hover{text-decoration:underline;}

ul.keleyi-menu>li li{padding:0px;}

ul.keleyi-menu li b{

display:inline-block;

width: 0;

height: 0;

border-width: 4px 4px;

border-style: solid;

border-color: transparent transparent #fff;

font-size: 0;

line-height: 0;

-moz-transition: -moz-transform .2s ease-in;

-o-transition: -o-transform .2s ease-in;

transition: transform .2s ease-in;

vertical-align:text-top;

margin-left:5px

}

jQuery菜單插件例子：

<!DOCTYPE html>

<html>

<head>

<title>Keleyi Menu (jQuery Plugin)0.1.6 Demo- keleyi.com</title>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="jquery.keleyi.js"></script>

<link href="jquery.keleyi.css" type="text/css" rel="Stylesheet" />

<style>body{margin: 0px;}</style>

</head>

<body>

<div style="text-align:center;width:986px;margin:0px auto;">

<h1>

Keleyi</h1>

A jQuery Menu Plugin

<h2>Browser Support</h2>

Keleyi 0.1.4-0.1.6:IE6+,Chrome,Firefox,Opera,Safari<br />

Keleyi 0.1.3:IE8+(not support IE6),Chrome,Firefox,Opera,Safari

</div>

<div style="height: 360px;background-color: #66FF66;"></div>

<ul id="keleyi-menu">

<li><a href="">Home</a></li>

<li><a href="http://plugins.jquery.com/keleyi/">jQuery</a>

<ul>

<li><a href="https://github.com/keleyi/keleyi">github</a></li>

</ul>

</li>

<li><a href="/keleyi/">Keleyi</a></li>

<li><a href="/keleyi/demo/11.htm">Demo 11</a></li>

<li><a href="/keleyi/demo/">Demo</a>

<ul>

<li><a href="/keleyi/demo/1.htm">Demo 1</a></li>

<li><a href="/keleyi/demo/2.htm">Demo 2</a></li>

<li><a href="/keleyi/demo/3.htm">Demo 3</a></li>

<li><a href="/keleyi/demo/4.htm">Demo 4</a></li>

<li><a href="/keleyi/demo/5.htm">Demo 5</a></li>

</ul>

</li>

<li><a href="/keleyi/demo/6.htm">Demo 6</a>

<ul>

<li><a href="/keleyi/demo/7.htm">Demo 7</a></li>

<li><a href="/keleyi/demo/8.htm">Demo 8</a></li>

<li><a href="/keleyi/demo/9.htm">Demo 9</a></li>

<li><a href="/keleyi/demo/10.htm">Demo 10</a></li></ul>

</li>

<li><a href="/keleyi/demo/12.htm">Demo 12</a></li>

<li><a href="/keleyi/demo/0x1x5/">Demo 13</a></li>

</ul>

<div style="height: 900px; visibility: visible; background-color: Olive"></div>

<script type="text/javascript">

$("#keleyi-menu").keleyi({ "item_width": "100px", "bar_position": "relative"

, "margin": "0px auto 0px 0px", "item_margin": "0px", "mainItem_color": "black","subItem_color":"black","bar_background_color":"#ffffff","item_background_color_hover":"#eeeeee"

});

</script>

</body>

</html>