Native JS implements code for n-level menu

Simple analysis, to implement the n-level menu, first start from the layout, that is, if there is a lower-level menu

1. No next Level menu, direct arrangement

2. There is a lower menu, divided into subsequent menu emissions position, and display the symbols like ‘>’ in the upper menu, the effect is as shown:

原生JS实现N级菜单的代码

1. Does it exist>

Note: Any worries xxx === YYY? XXX: XXX is used to express thinking.

原生JS实现N级菜单的代码

• To implement the effect of Figure 1, we only need to judge the LI tag Children.Length === 2? ‘span exists’: ‘span removal’

2. The lower menu appears position

The HTML structure is as follows:

原生JS实现N级菜单的代码 • Implement this need, also need to judge Children.Length === 2? ‘Upper-level menu relative positioning, TOP is 0, Left is offsetwidth of the superior, lower menu absolute positioning’: ‘Don’t do any handle’

The specific code is realized

The effect is as follows:

The code is as follows: 原生JS实现N级菜单的代码

 Document   * {margin: 0; padding: 0;} #box {margiN: 200px 0 0 50px; text-align: center; color: #ccc;} ul {list-style: none; float: Left;} li {width: 150px; height: 40px; line-height: 40px; Background Color: # 124520; border: 1px solid #eee; Position: relative;} li span {position: absolute; top: 0; Right: 10px;} li: hover {background-color: # 666; transition: background-color. } Ul {display: none;} ul.first {display: block;} .relative {position: relative; top: 0; left: 0;} .absolute {position: absolute; left: 0; Top: 0; } .show {Display: block;} .hide {display: none;}     >   > 
  • secondary menu >
  • >
      Three-stage menu
    • >
        Three-stage menu
      • >
      • >
      • Secondary menu
      • >
      • three menu
      • > Three-stage menu
      • >
    • The three-level menu
    • >
        Three-stage menu
      • Secondary menu
      • >
      • secondary menu
      • >
      • Three-stage menu
      • > >
    • 3 menu
    • >
    • three Level menu
    • >
      • 1 menu >
      • secondary menu >
      • Secondary menu
      • > Three-level menu
      • >
      • 3 menu
      • >
    • >
  • Secondary menu
      >
    • >
    • Three-stage menu >
      • Three-stage menu >
      • >
      • Secondary menu >
    • three menu
    • > Three-level menu
        >
      • Three-level menu
      • >
      • 1 menu
      • >
      Let uls = Document.QuerySelectorall ("UL"); // Get all Ullet Lis = Document.QuerySelectOrall ("li"); // Get all Lilet LiWidth = Document.QuerySelector ("# Box UL"). The width-2 of offsetwidth-2 // li is to look at the layout START * / / / * * * Each li.children.length is implemented through the following layout. Either 0.2 * 0 No Squash menu * 2 has a lower menu * * / for (let i = uls.length - 1; I> = 0; I -) {IF (ULS [i] .parentNode.NodeName === "Li") {uls [i] .parentnode.classlist.add ("relative"); // Relatively locate ULS [i] .ClassList.Add ("absolute"); // absolutely positioning ULS [i] .Style.Left = liwidth + "px";}} for (var i = 0; i
      • The above is the code for the native JS to implement the n-level JS to realize the code for the n-level JS. I hope that if you have any questions, please leave a message, Xiaobu Reply to everyone in time!
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment