In this article, we are going to cover what is a drop-down menu, why we need that. We are also going to give you the example code. After finishing the article, you can create your own dropdown menu, modify it and you will be able to add different functionality inside that dropdown menu. So, let’s start.
What is a drop-down menu?
The Dropdown Menu is a functionality that helps a user to find out different content, pages, references. Actually, it is a combination of menu and submenu. A user can find out the different location from a dropdown menu.
Think you have a website about programming language and on that website, you have different sections. In the programming section, you have 3 categories which are c, java, python. A user can easily find using the dropdown menu.
Nowadays most of the popular multi-page websites use the drop-down menu to drive a user to find out what he or she wants. So, the importance of the dropdown menu is really huge.
How we can create a drop-down menu?
|
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,
initial-scale=1"> <style> .dropbtn { background-color: black; color: white; padding: 16px; font-size: 16px; border: none; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #ff66cc;} .dropdown:hover .dropdown-content {display: block;} .dropdown:hover .dropbtn {background-color: #33bbff;} </style> </head> <body> <div class="dropdown"> <button class="dropbtn">Dropdown</button> <div class="dropdown-content"> <a href="#">Number 1</a> <a href="#">Number 2</a> <a href="#">Number 3</a> </div> </div> </body> </html> |
Output of the code:
You can change the color and text according to your theme and concept. So, the main concept is you can navigate different pages and content using this list. To do that that you just need to place your page or content link in the <a href="#"> tag. You have to paste your link instead of #. Try to change the code and make this better. Use different color codes to decorate this dropdown menu. Add different links and change the padding.
|
<!DOCTYPE
html> <html> <head> <meta
name="viewport" content="width=device-width,
initial-scale=1"> <link
rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body { font-family:
Helvetica; } .navbar { overflow:
hidden; background-color:
#4dff4d; } .navbar a { float: left; font-size:
16px; color: black; text-align:
center; padding: 14px
16px; text-decoration:
none; } .dropdown { float: left; overflow:
hidden; } .dropdown
.dropbtn { font-size:
16px; border: none; outline:
none; color: black; padding: 14px
16px; background-color:
inherit; font-family:
inherit; margin: 0; } .navbar
a:hover, .dropdown:hover .dropbtn { background-color:
red; } .dropdown-content
{ display:
none; position:
absolute; background-color:
#6666ff; min-width:
160px; box-shadow:
0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content
a { float: none; color: black; padding: 12px
16px; text-decoration:
none; display:
block; text-align:
left; } .dropdown-content
a:hover { background-color:
#ddd; } .dropdown:hover
.dropdown-content { display:
block; } </style> </head> <body> <div
class="navbar"> <a
href="#">Home</a> <a
href="#">New</a> <div
class="dropdown"> <button class="dropbtn">Language <i class="fa fa-caret-down"></i> </button> <div
class="dropdown-content"> <a
href="#">c</a> <a
href="#">java</a> <a
href="#">python</a> </div> </div> </div> </body> </html> |
The output of the code:
Think that you have 3 pages under the programming language category which are c, java, python. Copy the link on of your java page and paste in <a href="#">java</a> like this
<a href=”paste your destination page link here ”>java</a>. So, when a user clicks on the java then it will open the java page. Practice learning web development from w3school.
How you can use a drop-down menu on the blogger website?
If you are using blogger and blogger primary theme then there is a big possibility that your website has no drop-down menu built-in. You may have different sections on your site but the user is not able to find all those sections easily. So, you can use this drop-down menu easily. Here I am going to show you that in a step by step tutorial.
Step 1: Select your label and name of the drop-down menu
For example, I am going to create a dropdown menu on this website. I have 3 different sections which are Home, Android, Web, Android Studio. In the Android section, I am going to create 2 drop-down menus which are Emulator, Games. Here in the Emulator section, I am going to include the Emulator label. So, when users click on the emulator menu, they can find all the posts under the emulator label.
You can find related posts by clicking on the category. Select any category and click on it. Now, look at the link to that category. That link will help you to include all the related posts under a drop-down option.
Step 2: Modify the CSS code
Step 3: Place the Code in the Layout
Now copy the modified code and go to your blogger layout. At the top part of your template add a gadget. Select the HTML/Javascript gadget. Paste the modified code in that gadget and save the changes. Now go to the home page of your site and refresh it. It will show you the new advancement of your blogger site.