Dropdown menu HTML and CSS

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.

drop-down menu HTMLl

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?

We can create a dropdown menu using HTML and CSS. It is very easy to create. Before coding, you have to decide how many menus you want to include. Here a simple HTML, CSS dropdown menu code for you:

<!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:

dropdown menu html css 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:

drop-down menu customization

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

You can find a code we have given already where we highlighted some lines. Those are for modification. Change the name of the section and add the category link in the ahref link. You can add more sections if you want.

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.

Post a Comment (0)
Previous Post Next Post