General infinitus drop-down menu and general drop-down menu

General infinitus drop-down menu and general drop-down menu

The drop-down menu is frequently used in development. However, no project needs to be written again. It is simple but troublesome to change. I am still lazy, today, I have time to organize the menus in my previous project development and write a general version, which will not be so troublesome in the future.

Features

The menus compiled today are developed by jquery + css with the following features:

I. strong versatility

In the past, there was a problem with a drop-down menu. You must set the main navigation and sub-menus separately. For example, the level-2 menu is class = "first_menu ", class = "second_menu ".... and so on, the problem with this writing method is that it is not conducive to the programmer to execute loop output, and this menu only needs to introduce a CSS style, without the need to define multi-level menus.

Ii. Beautiful automatic call drop-down instruction

Previously, we manually added a drop-down class to the drop-down menu. Now, you only need to define the style of the drop-down effect in css, and the code will automatically find the drop-down menu and add an indicator arrow;

Iii. Simple call

Programmers do not need to make a lot of judgments on the output list. You only need to call the menu data recursively.

Implementation

I. HTML code

First, we output the menu data on the page, which consists of ul and li to form the menu list. The specific structure code is as follows:

<Ul class = "Menue"> <li class = "Menue_li"> <a href = "#"> homepage </a> </li> <li class = "Menue_li"> <a href = "#"> menu 1 </a> <ul class = "sub_menu"> <li> <a href = "#"> roller coaster </a> </li> <a href = "#"> volcanic eruption </a> </li> <a href = "#"> birds </a> </li> </ul> </li> <li class = "Menue_li"> <a href = "#"> menu 2 </a> <ul class = "sub_menu "> <li> <a href =" # "> about us </a> <ul class =" sub_menu "> <li> <a href =" # "> mountain height </a> <ul class = "sub_menu"> <li> <a href = "#"> fliggy biography </a> </li> <a href =" # "> lifetime </a> </li> <a href =" # "> Apsara stack </a> </li> </ul> </li> <li> <a href = "#"> database </a> <ul class = "sub_menu"> <li> <a href = "#"> database table </> </li> <a href = "#"> Data Encryption </a> </li> <a href = "#"> Data Modeling </a> </li> </ul> </li> <a href = "#"> C camera </a> </li> </ul> </li> <a href = "#"> test product </a> </li> </ul>

 

Some basic html code is very simple. You do not need to explain the meaning of the Code. Emphasize the code structure: whether it is level 2, level 3 or level 3 menus, it is mainly nested ul; style sheet names are also very simple, the sub-menu is the "sub_menu" style, which is very helpful for program code loop calling.

Ii. CSS style

The 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;}/* drop-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; width: 100px; height: 30px ;}. menue li ul. sub_menu li. last {border-bottom: none;}/* js will add this class to the last li and remove 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. now {background: # f90; color: # fff ;}. menue li. now ,. menue li. current {background: # f60; color: # fff;}/* if there is a drop-down menu to add class */. hasmenu {background: url(arrow.png) no-repeat right; padding-right: 15px;}/* main navigation arrow down */. menue li. 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. hasmenu {background: #222 url(arrow.png) no-repeat right top ;}. menue li ul. sub_menu li. hasmenu: hover {background: # f90 url(arrow.png) no-repeat right top; color: # fff ;}

 

Here I only pay attention to the following two points:

1. Difference between absolute and relative in position

Absolute: absolute positioning. CSS is written as "position: absolute;". Its positioning is divided into two situations:

A. If Top, Right, Bottom, and Left are not set, the "content region original point" of the parent level is the original point by default.

B. If Top, Right, Bottom, and Left are set, there are two cases as follows:

(1). The parent class does not have the position attribute. In the browser, the upper Left corner (that is, the Body) is the "original coordinate point" for positioning. The position is determined by the Top, Right, Bottom, and Left attributes.

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

Relative: relative positioning. CSS is written as "position: relative;". The original point is referred to as the "original point of content area" of the parent level. If there is no parent level, the "original point of content area" of the Body is the original point, the position is determined by the Top, Right, Bottom, and Left attributes, and can be opened up or occupied in height.

The above two differences are very important. They are a very common technique and must be differentiated. I wasted a lot of time in development to find problems. They are actually caused by these two attributes.

2. Use background-position

Sometimes, in order to improve website speed and facilitate website management, we often put some small pictures that are commonly used for beautification on a large image. css can be implemented through this method when it needs a small image, it is very convenient to understand what it means. This method indicates that the white point is the image capture function. The usage is described as follows:

Syntax:

Background-position: length | length

Background-position: position | position

Valid value:

Length: percent | length value composed of floating-point numbers and unit identifiers.

Position: top | center | bottom | left | center | right

Note:
Sets or retrieves the background image position of an object. The background-image attribute must be specified first. This attribute positioning is not affected by the object's patch attribute (padding) settings. The default value is 0% 0%. In this case, the background image is located in the upper left corner of the content area of the object that does not include the patch. If only one value is specified, the value is used for abscissa. The default ordinate value is 50%. If two values are specified, the second value is used for ordinate. If the value is set to right center, right will overwrite the center value as the abscissa value, so the background image will be located on the right. Below are some equations

Top left and left top are equivalent to 0% 0%.

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

Right top. top right is equivalent to 100% 0%.

Left, left center, center left is equivalent to 0% 50%.

Center, center is equivalent to 50% 50%.

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

Bottom left, left bottom is equivalent to 0% 100%.

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

Bottom right, right bottom is equivalent to 100% 100%

 

Iii. 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 the default highlight for the navigation and this menu is irrelevant $ ("ul. menue li. menue_li: eq (0 )"). addClass ("current")/* jquery menu start * // Add a style for the last li of the sub-menu. It is suitable to remove the last underscore $ (". sub_menu "). find ("li: last-child "). addClass ("last") // traverses all li to determine whether a sub-menu is included. If so, add an arrow to it to indicate the status $ (". menue li "). each (function () {if ($ (this ). find ("ul "). length! = 0) {$ (this ). 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 ended */}) </script>

 

Through the above steps, a general multi-level menu is implemented, and the above Code is my daily development accumulation, due to my limited level, there may be many errors. I hope my colleagues will criticize and correct them or propose more optimized code for your reference. Thank you. Download the source code.