unfold menu using JavaScript, consider the case where JS does not work

akhipakhi090807

When you click on the parent menu of a group, the hidden child menus of that parent appear in a row. This is a so-called foldable menu. It also has the benefit of reducing page transitions for users, so it can be said that it is a UI with good usability. However, these days, JavaScript works in most environments, and we often see cases where we are not prepared for cases where JavaScript does not work. Also, if you say so, it is often not very good from an SEO perspective. If you use JavaScript to add extra benefits, you should be able to use it without any problems even if JS doesn't work in the first place, and being careful in that aspect will also have a positive effect on SEO. This column includes SEO, but it's more about usability.


Accordion Menu Basics How to create an environment where JS is disabled Canada Phone Number Data Accordion Menu Basics First of all, as a premise before renovation, I will introduce the basic method of making it. It's a foldable menu developed using JS, but it's relatively easy to create, and the rough explanation is as follows. Prepare HTML with parent-child structure Child menus are initially hidden When clicking the parent menu, show/hide the child menu using JS "HTML with a parent-child structure" generally means nesting ul/li tags. Also, I sometimes see dl tags used like ``parent is dt tag'' and ``child is dd tag''. The key is to understand the relationship between parents and children as a document structure.




How to create an environment where JS is disabled Now, the accordion menu is a UI using JavaScript. Since it uses JavaScript, it will naturally not become an accordion menu in an environment where JavaScript does not work. If you use JavaScript, you should either make it work even if JS doesn't work, or provide alternative content (or a message like "Please turn on JS"). This is the so-called noscript philosophy. The following are points to keep in mind when creating a website, taking into account that JavaScript may not work in some cases. Also write the link URL (href attribute) in the a tag of the parent menu. Display the child menu at first, then hide it when JS is running If there are many child menus, do not write them in the HTML, but add them to the DOM later using JS. We will briefly explain the reasons and benefits for each. Also write the link URL (href attribute) in the a tag of the parent menu.