Adaptive position drop-down menu

 

The drop-down menu function is usually used on the activity page during work. The original drop-down JS is very inconvenient, so a drop-down menu with adaptive position is written in JQ, the highlight is that the drop-down menu height and position are automatically centered, as well as boundary judgment.

[Here is the demo address>]

The following is the core code:

/* ===================================== App: the drop-down menu of the adaptive position [extend the JQ method] Author: derdate: 2010-10-07website: http://www.ueder.net ===========================*/(function ($) {$. FN. setdropmenu = function (OPT) {// opt = $. extend ({mainnav: "# mainnav", // drop-down menu container subnav :". subnav ", // The subselector insubnav :". subnav>. insubnav ", // relative to this sub-Selector curclass:" on ", // on status style dropspeed:" fast "// animation speed}, OPT ); // variable VAR mainnav = OPT. mainnav, subnav = OPT. subnav, insubnav = OPT. insubnav, curclass = OPT. curclass, dropspeed = OPT. dropspeed, mainnavwidth = $ (mainnav ). outerwidth (), mainnavleft = $ (mainnav ). offset (). left, thisheight = $ (this ). outerheight (); // process $ (this ). each (function (I) {// VaR _ this = $ (this), f_subnav = _ this. find (subnav), f_insubnav = _ this. find (insubnav), subnavwidth = f_insubnav.outerwidth (), subnavheight = f_insubnav.outerh Eight (), navwidth = _ this. outerwidth (), sleft = NULL, halfwidth = (subnavwidth-navwidth)/2; // filter the drop-down menu if (f_subnav.offset ()) {// set the top value of the drop-down menu f_subnav.css ("TOP", thisheight + "PX"); f_insubnav.css ("TOP", "-" + subnavheight + "PX "); // The original position of the drop-down menu. left value var mleft = _ this. offset (). left-mainnavleft; // If (mleft <mainnavwidth/2) {If (halfwidth <mleft) {sleft = halfwidth ;} else {sleft = mleft;} e LSE {var maxwidth = mleft + (subnavwidth/2) + (navwidth/2); If (maxwidth <mainnavwidth) {sleft = halfwidth ;} else {sleft = subnavwidth-(mainnavwidth-mleft) ;}}// negative value judgment (sleft <0 )? F_subnav.css ("Left", math. ABS (sleft) + "PX"): f_subnav.css ("Left", "-" + sleft + "PX"); // move the mouse over Event _ this. hover (function () {_this.css ("Z-index", 2); // set the width and height of the container f_subnav.width (subnavwidth ). height (subnavheight); // drop down f_insubnav.stop (). animate ({top: 0}, dropspeed ). end (). addclass (curclass) ;}, function () {_this.css ("Z-index", ""); // pull back f_insubnav.stop (). animate ({top: "-" + subnavheight + "PX"}, dropspeed, function () {// The return width and height are set to 0 f_subnav.width (0 ). height (0 );}). end (). removeclass (curclass) ;}}}) ;}}) (jquery );