jquery Menu Plug-in Usage example _jquery

The examples in this article describe the jquery menu plug-in usage. Share to everyone for your reference. Specifically as follows:

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

jquery Menu Plugin 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_b  Ackground_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 ', b
    Ar_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.b Ar_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-al
    IGN ":" 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)}) $ ("a"). Find ("&G T;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_backgr
      Ound_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": $ (a). 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.clientHeigh T-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));

Plugin CSS file:

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 Menu Plugin Example:

<! 
  DOCTYPE html>  

I hope this article will help you with your jquery programming.