How to make a dropdown menu using <details> tag
Dropdown menu is a good design choice because it saves lot of space on a webpage. When it comes to displaying mega menu with many sub menus, dropdown proves to be a good choice especially for mobile screen.
Dropdown menu with HTML and CSS but no Javascript
Javascript is a good tool to add interactivity to user interface. But many web developers may want to avoid javascript. CSS can also be used to add interactivity to UX elements.
Using details Tag to make a dropdown menu
The details tag gives a fair amount of interactivity without the use of javascript. This tag is mainly used for showing some hidden content at a click of a button like display within the details tag. So, the details tag is similar to dropdown in terms of appearance and functionality. Let us make a dropdown menu using details and summary tags in html.
Making the Skeleton of Dropdown Menu
Following is the html for my dropdown menu.
Steps
- Add a
detailstag and addsummarytag inside this. - Add
ultag and add as manylitag inside this as you need. - Copy this block of codes as many times as the required number of menu items.
At present the page is without a style. When you will view it in browser, it will look like this picture.
Add CSS
Now the skeleton is ready, you need to make it look beautiful. Let us add some CSS to create a nice look.
Steps
- Write rules for font family and font size.
- Write CSS for showing a different color font for the code tag.
- Write CSS for adding style to dropdown buttons. Here, I have used
summarytag instead of button. - Write CSS for hover effect on the dropdown button.
- Write CSS for making enough space around list items so that it becomes easiery for user to click on them on small screen.
- Write CSS for hover effect on list items.
Now, as the style part is over, you can refresh the page to see its new look. It will look like the following picture.
You can view this demo on Codepen