Analysis of different implementation methods of JS secondary menu [4 methods]

The instance of this article describes the different implementation methods of the JS secondary menu. Share to everyone for reference, as follows:

When the interview was asked once, later, when the written test was in the written test, I decided to write this well.

The first is controlled by CSS; mainly using float, and position, display, Hover is done. See the source code behind. JS二级菜单不同实现方法分析【4种方法】

mainly adopts HOVER, and DISPLAY.


is controlled by JS, and MOUSEOVER, MOUSEOUT is used to control the display. Of course, CSS is also utilized.

This is also in the form of pure CSS, mainly using

Display: inline-block; JS二级菜单不同实现方法分析【4种方法】 and

Vertical-Align: Top;

is implemented. If you don’t have to use Vertical-Align, it will cause the first-level menu to be topped up by the secondary menu so that it is not necessary to set it.

Each corresponding source code is as follows:


Horizontal downs * {margin: 0; padding: 0; list-style: none; text-decoration: none; color: # 333;}. NAV {Width: 400px; heigHT: 150PX; Margin: 10px; Overflow: hidden;}. Nav UL Li {Float: Left; Width: 100px; Clear: Right;}. NAV UL Li A: Hover {Color: Red;}. NAV UL Li UL {Display: none;}. Nav UL Li: Hover UL {Display: block; Position: absolute;}. Nav UL Li: Hover UL Li {FLOAT: NONE; / ** /} / ***** *********************************************************** * /. Nav2 {width: 400px; Height: 200px; Background: gray; margin: 10px;}. Nav2 UL Li {Width: 100px;}. Nav2 UL Li Li {Margin-Left: 20px;}. NAV2 A: HOVER }. NAV2 UL Li UL {Display: none;}. Nav2 UL Li: Hover UL {Display: block;} / ******************** ******************************************************** /. NAV3 {width: 400px; Height: 150px; Background : Gray; margin: 10px;}. Nav3 UL Li {Width: 100px; float: Left;}. Nav3 UL Li UL {DISPLAY: NONE; POSITION: ABSOLUTE;}. NAV3 UL Li UL Li {FLOAT: NONE;}. NAV3 UL Li A: Hover {Color: Red;} / ************************ *************************************************** /. NAV4 {Width: 400px; Height : 200px;}. NAV4 UL Li {Width: 100px; Display: inline-block; vertical-align: top;}. NAV4 UL UL {Display: none;}. Nav4 UL Li: Hover UL {Display: block;}. NAV4 UL Li A: Hover {Color: Red;}

Column 1

 Secondary column      Secondary column     Secondary column    
Column 2
Secondary column

Secondary column 3
  • Secondary column
  • Secondary column
    • column 2
    • Secondary column
    • Secondary column
  • Secondary column
    • Level 2Column
    • Column three
    • secondary Column
    • Secondary column
    Secondary column
VAR ROW = Document.GtelementsByClassName ("row"); var length = row.length; for (var i = 0; i
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment