Home  >  Article  >  Web Front-end  >  jQuery菜单插件用法实例_jquery

jQuery菜单插件用法实例_jquery

WBOY
WBOYOriginal
2016-05-16 15:49:091069browse

本文实例讲述了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("
"); 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("
"); $(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(""); $(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菜单插件例子:




  Keleyi Menu (jQuery Plugin)0.1.6 Demo- keleyi.com
  
  
  
  

Keleyi

A jQuery Menu Plugin

Browser Support

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

希望本文所述对大家的jquery程序设计有所帮助。

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn