How to make a dropdown menu using
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.
details Tag to make a dropdown menu
details tag is similar to dropdown in terms of appearance and functionality. Let us make a dropdown menu using
summary tags in html.
Making the Skeleton of Dropdown Menu
Following is the html for my dropdown menu.
- Add a
detailstag and add
summarytag inside this.
ultag and add as many
litag 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.
Now the skeleton is ready, you need to make it look beautiful. Let us add some CSS to create a nice look.
- 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