Code example for implementing multi-level menu bar using JS-JS Tutorial-php.cn

Code example for implementing multi-level menu bar using JS

Y2J

Release： 2017-05-24 11:32:42

Original

4276 people have browsed it

Recently, there is a project to implement N-level menus. First, start with the layout, that is, determine whether there are lower-level menus, and the specific implementation code. You can refer to this article

Requirements Analysis

A simple analysis, to implement an N-level menu, first start with the layout, that is, determine whether there is a lower-level menu

1. If there is no lower-level menu, arrange it directly

2. There is a lower-level menu, which is divided into the lower-level menu placement position and a symbol similar to '>' displayed on the upper-level menu. The effect is as shown in the figure:

##Picture ：1

## Initial implementation1. Whether the implementation exists >

Note: Any concerns below xxx=== yyy ? xxx : xxx all use the ternary

expression

to express ideas. HTML structure is as follows:

Figure: 2

•To achieve the effect of Figure 1, we only need to determine the content in the li tag children.length===2 ? 'span exists' : 'span remove'

2. The location where the lower-level menu appears

HTML structure is as follows:

•To achieve this requirement, you also need to determine children.length===2? 'The upper-level menu is relatively positioned, top is 0, left is the upper-level offsetWidth, and the lower-level menu is absolutely positioned': 'No processing'

The specific code is to realize The effect diagram is as follows:

The code is as follows:

Document

一级菜单 >
一级菜单 >
- 二级菜单 >
  - 三级菜单 >
  - 三级菜单 >
  - 三级菜单 >
  - 三级菜单 >
- 二级菜单 >
  - 三级菜单 >
  - 三级菜单 >
  - 三级菜单 >
  - 三级菜单 >
- 二级菜单 >
- 二级菜单 >
  - 三级菜单 >
  - 三级菜单 >
  - 三级菜单 >
  - 三级菜单 >
一级菜单 >
- 二级菜单 >
- 二级菜单 >
  - 三级菜单 >
  - 三级菜单 >
  - 三级菜单 >
- 二级菜单 >
  - 三级菜单 >
  - 三级菜单 >
  - 三级菜单 >
  - 三级菜单 >
- 二级菜单 >
  - 三级菜单 >
  - 三级菜单 >
  - 三级菜单 >
  - 三级菜单 >
一级菜单 >

Copy after login

【Related recommendations】

Javascript Free Video Tutorial

JS Code examples for making QQ chat message display and comment submission functions

Single line of JS to implement mobile money format inspection

JavaScript form Verify implementation code_javascript skills

Detailed examples of commonly used middleware body-parser in Nodejs

The above is the detailed content of Code example for implementing multi-level menu bar using JS. For more information, please follow other related articles on the PHP Chinese website!