JQuery menu plug-in usage example _ jquery

This article mainly introduces the usage of the jQuery menu plug-in. It provides a detailed analysis of the complete usage skills of the jquery menu plug-in the form of an example, which has some reference value, for more information about jQuery menu plug-ins, see the examples in this article. Share it with you for your reference. The details are as follows:

Here to share is a menu plug-in, in the http://plugins.jquery.com/keleyi/ to see, use to find a plug-in can make the page at the bottom of the pop-up menu, not necessarily at the bottom of the page, there are a variety of other ways.

JQuery menu plug-in js file:

/*!* 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));

Plug-in css file:

p.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 menu plug-in Example:

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