The realization of JS Pull-down menu and the consideration of accessibility

First, vulgar tolerance of the opening language

As for the availability of Pull-down menus, I have been ignoring them before, and I can say that I do not know, and often just stop at the immediate effect. Some time ago I saw Roger's "accessing Nav drop-downs", which is the usability issue of the dropdown menu. At the same time, it is a coincidence that the recent book "PPK Talk About JavaScript", which is being translated by Taobao Ued, mentions accessibility issues, especially in P28~p37 's comments on JavaScript and some of its usability issues. The main points of view and precautions are consistent with Roger's article.

The reading experience made me realize that I ignored the accessibility of the Pull-down menu for a long time, so I started to combine the actual situation and think about the places I need to pay attention to and improve. This let me have a clearer understanding of the Pull-down menu implementation options, the use of labels, and so on. Less mature thinking, only for communication. And then specifically about the accessibility of the Pull-down menu, let's simply say the Drop-down menu and the implementation of the Pull-down menu.

Second, on the Pull-down menu and its implementation

Baidu Encyclopedia of the word "pull-down menu" is: the bar menu bar and menu bar in the pop-up menu of each item in two parts, generally as the main menu of the application system used.

But this passage is like "Inception", it's hard to understand. Popular point of view, is "after/will be clicked will show the list menu" is called the Pull-down menu. Very common on the web, such as ~ ~ I open a page, ah, it is like my browser now displayed in the upper right corner of the encyclopedia page:

Or next to the microblog page, ah, sure enough, look at the top left corner of the square Drop-down:

Well, it seems that the Pull-down menu is like a man, all over the floor. Not one of the examples, about the implementation of the Pull-down menu, the method can be more, class switch, attribute binding, JS positioning, and so on, different pages, different design, different architecture, there are different ways to achieve. Because each item, each page's situation is different, therefore, cannot easily conclude, you are the panda, is the national treasure, it is the small wildcat, is the weed. However, as far as usability is concerned, the pros and cons of different methods are judged by the standard, which will be shown naturally later.

Now, give a simple example of switching class to achieve the pull effect, the instance menu prototype comes from Mtime time network,//zxx:mtime founder is very active on Sina Weibo, you are interested can follow him, @ Mazhila, do you think this name has the space of reverie? , the screenshot is as follows:

Each drop-down content that is pulled by this navigation is already positioned through CSS, but the dropdown content is not loaded by default, given the reason for the load. That is, the mouse is moved to the navigation content, the dynamic load Drop-down div and embedded in the navigation Li tag, as shown in the following figure:

Of course, as a static demo page, there is no need for dynamic load drop-down content, so, the Demo page dropdown div default is hidden and loaded well, so we can through a simple class switch to achieve the pull effect.

The first is the HTML structure, see the following figure: