Implementation code _JAVASCRIPT technique of Universal infinity-pole Pull-down Menu

Drop down menus are often encountered in my development, but no project needs to be rewritten, although simple but very troublesome, I am still relatively lazy, I have time to the previous project development in the menu to compile a generic version, the future will not need so much trouble.

Characteristics

Today's sorted menu is developed by JQUERY+CSS with the following features:

First, strong universality

Previously used in a Drop-down menu has a problem, the main navigation and submenus need to be set separately, for example, Level two menu is class= "First_menu", Level three menu is class= "Second_menu" .... And so on, there is a problem with this writing is not conducive to the programmer to perform the loop output, and this menu can only introduce a CSS style, do not need to define multilevel menus.

Second, beautiful automatic call Drop-down instructions

We used to trade unions to add a Drop-down display class to the drop down menu, and now, just define the dropdown style in the CSS, and the code will automatically look for a Drop-down menu and add a pointing arrow.

Three, simple call

The programmer's output list is simple and does not require a lot of judgment, as long as the menu data is recursively invoked.

Realize

One, HTML code

First we output the menu data in the page, which is made up of UL and Li to form the menu list. The concrete structure code looks like this:

<ul class= "menue" > <li class= "menue_li" ><a href= "#" > Home </a></li> <li class= "Menue_li "><a href=" > Menu one </a> <ul class= "Sub_menu" > <li><a href= "#" > Roller coaster &LT;/A&GT;&LT;/LI&G

   T <li><a href= "#" > Volcano eruption </a></li> <li><a href= "#" > Little Birdie </a></li> </ul > </li> <li class= "Menue_li" ><a href= "#" > Menu two </a> <ul class= "Sub_menu" > <li&

      Gt;<a href= "#" > About us </a> <ul class= "Sub_menu" > <li><a href= "#" > Mountain High Geo </a> <ul class= "Sub_menu" > <li><a href= "#" > Flying Pigeon Biography </a></li> <li><a href= "#" > Lifetimes </a></li> <li><a href= "#" > Prosper </a></li> </ul> &l T;/li> <li><a href= "#" > Database </a> <ul class= "Sub_menu" > <li><a href= "#" > Database table &LT;/A&GT;</li> <li><a href= "#" > Data encryption </a></li> <li><a href= "#" > Data Modeling </a ></li> </ul> </li> <li><a href= "#" >c camera </a></li> < /ul> </li> <li><a href= "#" > Test products </a></li> </ul> </li> </ul&gt ;

Some basic HTML code, very simple no need to explain the meaning of the code, emphasize the code structure: whether it is two, three or several levels of the menu is mainly nested UL can; the style sheet name is also very single, and the submenu is the "Sub_menu" style, which is very beneficial to the code loop call.

Second, CSS style

CSS style code is also very simple, the specific code is as follows:

a {text-decoration:none;}

UL, Li {list-style:none; margin:0; padding:0;} /* Define MENU * *. Menue li {background: #111; color: #fff; height:30px; line-height:30px; position:relative; float:left; margin-right:5px; width:100px; Text-align:center; Font-family:arial, Helvetica, Sans-serif; }

.

Menue li a {color: #fff; font-size:14px; display:block;}

/* Pull-down Menu Style * * Ul.sub_menu {position:absolute;width:100px; display:none; z-index:999;} . Menue Li Ul.sub_menu li {background:none; color: #555; font-size:12px; border-bottom:1px #333 solid; position:relative; wi. dth:100px; height:30px; }

. Menue Li Ul.sub_menu li.last {border-bottom:none}/*js adds the class to the last Li, removing the border-bottom effect.

Menue Li Ul.sub_menu li a {background: #222; color: #888; display:block;height:30px;} . Menue Li Ul.sub_menu li A:hover,.

Menue Li Ul.sub_menu li a.now {background: #f90; color: #fff;} . Menue Li.now,.

Menue li.current {background: #f60; color: #fff;} /* If there is a drop-down menu added class*/. hasmenu {background:url (arrow.png) no-repeat RIGht padding-right:15px;} /* Main navigation arrow down//. Menue Li A.hasmenu {background:url (arrow.png) no-repeat right; padding-right:15px;background-position:right-30px;} /* Drop-down menu arrow to the right.

Menue Li Ul.sub_menu li a.hasmenu {background: #222 URL (arrow.png) no-repeat right top;} . Menue Li Ul.sub_menu li a.hasmenu:hover {background: #f90 URL (arrow.png) no-repeat right top; color: #fff;}

Here I only emphasize two points to note:

1, the difference between absolute and relative in position

Absolute: Absolute positioning, CSS writing "Position:absolute;" ", it's positioned in two different situations, as follows:

A, does not set top, right, Bottom, left, the default based on the parent's "content area original point" as the original point.

B. There are set top, right, Bottom and left, and here are two different situations:

(1). The parent has no position attribute, the upper-left corner of the browser (that is, the body) is positioned as the "origin of the coordinates", and the position is determined by top, right, Bottom, and left-hand properties.

(2). The parent has the position attribute, and the parent's "coordinate original point" is the original point.

Relative: relative positioning, CSS writing "position:relative;" , referring to the parent's "content area origin" as the original point, without the parent is the body's "content area original point" as the original point, the position is determined by top, right, Bottom, left property, and has "open or occupy a high" role.

The above two differences are very important, is very commonly used a skill, must distinguish, I in the development of waste a lot of time to find the problem is actually because of these two attributes caused.

2, Background-position use

Sometimes we in order to enhance the speed of the site and site management convenience, often put some landscaping commonly used small pictures on a large picture, CSS needs the corresponding small picture can be achieved through this method, as long as to understand what meaning call up very convenient. This method of understanding points is the image interception function, the use of specific instructions are as follows:

Grammar:

Background-position:length | | Length

background-position:position | | Position

Take value:

Length: Percentage | The length value consisting of floating-point numbers and unit identifiers.

Position:top | Center | Bottom | Left | Center | Right

Description
Sets or retrieves the background image position of an object. The Background-image attribute must be specified first. This property positioning is not affected by the Patch property (padding) setting of the object. The default value is: 0% 0%. The background picture is positioned at the top-left corner of the content area where the object does not include patches (padding). If only one value is specified, the value is used for the horizontal axis. The ordinate will default to 50%. If two values are specified, the second value is used for ordinate. If you set the value to right center, the background image will be positioned on the right-hand side because it overrides the center value as the horizontal axis value. Here are some equations

Top left, and left top is equivalent to 0% 0%.

Top, top center, and center top are equivalent to 50% 0%.

Right top is equivalent to 100% 0%.

Left, left center, and center left are equivalent to 0% 50%.

Center, center Center is equivalent to 50% 50%.

Right, right center, center right is equivalent to 100% 50%.

Bottom left and left bottom equivalent to 0% 100%.

Bottom, bottom center, center bottom is equivalent to 50% 100%.

Bottom right, right bottom equivalent to 100% 100%

Three, JS code

This menu is based on jquery, so you must first introduce the jquery code library, and then write the following JS code to implement the Drop-down menu.

<script src= "Js/jquery.min.js" ></script> <script> $ (document). Ready (function () {//Set default highlighting for navigation This menu has nothing to do with $ ("ul". Menue Li. Menue_li:eq (0) "). AddClass (" current ")/*jquery menu Start////To add a style to the last Li of the submenu, which is suitable for removing the last underscore $ (". Sub_menu ") when adding an underscore to Li. Find ("Li:last-child"). AddClass ("last")//Traverse all Li to determine if a submenu is included, or to add an arrow if it is included to indicate the status $ (".

 Menue li "). each (function () {if ($ () (" ul "). Length!=0) {$ (a). Find (" A:first "). AddClass (" HasMenu ")})// $(".

 Menue li "). Hover (function () {$ (this). addclass (' Now ');

  var menu = $ (this);

 Menu.find ("Ul.sub_menu:first"). Show ();

 },function () {$ (this). Removeclass (' Now ');

 $ (this). Find ("Ul.sub_menu:first"). Hide ();

 

 }); var submenu = $ (". Sub_menu"). Find (". Sub_menu") Submenu.css ({left: ' 100px ', Top: "0px"}) $ (". Sub_menu li"). Hover (

 Function () {$ (this). Find ("A:first"). AddClass (' Now ') $ (this). Find ("Ul:first"). Show ();

},function () {$ (this). Find ("A:first"). Removeclass (' Now ') $ (this). Find ("Ul:first"). Hide ()}); /*jquery mENU end */}) </script> 

Through the above steps to achieve a common multi-level menu, the above code is my daily development in the accumulation, due to my limited level may exist many mistakes I hope colleagues criticize or put forward more optimized code for my reference, thank you.

The above universal infinite Pole Drop-down Menu Implementation code is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.