Introduction
A dropdown menu is a type of menu that allows users to select from a list of options. Dropdown menus are often used in website navigation bars and toolbars.
To create a dropdown menu, you will need to use HTML and CSS. HTML is used to define the structure of the dropdown menu, while CSS is used to style the dropdown menu.
Creating a Dropdown Menu in HTML
To create a dropdown menu in HTML, you will need to use the following elements:
<div>: This element will be used to contain the entire dropdown menu.<a>: This element will be used to open the dropdown menu when the user hovers on it.<ul>: This element will be used to contain the dropdown menu links.<li>: This element will be used to contain each individual dropdown menu link.
Here is an example of a simple dropdown menu in HTML:
HTML CODES
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Bar With Dropdown | Ludiflex</title>
<!-- FONTAWESOME ICONS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<nav class="nav">
<div class="logo">
<h1>Ludiflex.</h1>
</div>
<button class="menu-toggle"><i class="fa fa-bars"></i></button>
<ul class="nav-main-menu">
<li><a href="#" class="nav-link">Home</a></li>
<li class="dropdown">
<a href="#" class="nav-link"><span>Blog</span> <i class="fa fa-chevron-down"></i></a>
<ul class="dropdown-content">
<li><a href="#">Technology</a></li>
<li><a href="#">Software and Apps</a></li>
<li><a href="#">Cybersecurity</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link"><span>Services</span> <i class="fa fa-chevron-down"></i></a>
<ul class="dropdown-content">
<li><a href="#">Web Development</a></li>
<li class="sub-dropdown">
<a href="#" class="dropdown-link"><span>Hosting</span> <i class="fa fa-chevron-right"></i></a>
<ul class="sub-dropdown-content">
<li><a href="#">WordPress Hosting</a></li>
<li><a href="#">Shared Hosting</a></li>
<li><a href="#">Cloud Hosting</a></li>
<li><a href="#">VPS Hosting</a></li>
</ul>
</li>
<li><a href="#">Software Development</a></li>
</ul>
</li>
<li><a href="#" class="nav-link">About</a></li>
<li><a href="#" class="nav-link">Contact</a></li>
</ul>
<button class="btn"><span>Sign In</span> <i class="fa fa-right-to-bracket"></i></button>
</nav>
<main>
<p>Navigation Bar With Dropdown & <br> Sub Dropdown.</p>
</main>
</body>
</html>
Styling the Dropdown Menu with CSS
To style the dropdown menu, you will need to use CSS. Here is an example of some basic CSS for a dropdown menu:
CSS CODE
/* POPPINS FONT */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
/* ===== Reset some default styles ===== */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
/* ===== VARIABLES ===== */
:root{
--bg-color: #fff;
--primary-color: #000000;
--second-color: #196FE0;
--hover-bg-color: #efefef;
--shadow-1: 0px 2px 10px rgba(0, 0, 0, 0.3);
--shadow-2: 0px 2px 10px rgba(26, 112, 224, 0.4);
}
/* ===== BODY ===== */
body{
background: url("../img/bg.jpg");
background-position: center;
background-size: cover;
background-attachment: fixed;
}
/* ===== Reusable CSS ===== */
a{
text-decoration: none;
color: var(--primary-color);
font-weight: 500;
}
ul{
list-style-type: none;
}
/* ===== Menu Toggle ===== */
.menu-toggle{
display: none;
font-size: 24px;
background: transparent;
border: none;
color: var(--primary-color);
cursor: pointer;
}
/* ===== Navigation Bar ===== */
.nav{
display: flex;
justify-content: space-between;
align-items: center;
padding-inline: 3vw;
height: 70px;
background: var(--bg-color);
color: var(--primary-color);
}
.logo h1{
font-weight: 600;
}
.nav-main-menu{
display: flex;
}
.nav-link{
padding: 26px 10px;
margin-inline: 10px;
transition: .3s;
}
.nav-link:hover{
color: var(--second-color);
}
.nav span{
margin-right: 5px;
}
.fa-chevron-down, .fa-chevron-right{
font-size: 12px;
transition: .3s;
}
.dropdown:hover .fa-chevron-down, .sub-dropdown:hover .fa-chevron-right{
transform: rotate(180deg);
}
.dropdown:hover .nav-link{
color: var(--second-color);
}
/* ===== Dropdown ===== */
.dropdown{
position: relative;
}
.nav-main-menu .dropdown-content{
display: none;
position: absolute;
top: 46px;
left: 0;
background: var(--bg-color);
min-width: 240px;
border-top: 3px solid #ccc;
border-radius: 0 0 3px 3px;
animation: slideUp .3s;
}
.dropdown-content li{
padding: 20px;
}
.dropdown-content li:hover{
background: var(--hover-bg-color);
}
.dropdown:hover .dropdown-content{
display: block;
}
/* ===== Sub - Dropdown ===== */
.nav-main-menu .sub-dropdown-content{
display: none;
position: absolute;
top: 34%;
left: 100%;
background: var(--bg-color);
min-width: 240px;
border-top: 3px solid #ccc;
border-radius: 3px;
animation: slideUp .3s;
box-shadow: var(--shadow-1);
}
@keyframes slideUp {
from{
margin-top: 20px;
}
to{
margin-top: 0;
}
}
.dropdown-link{
display: flex;
justify-content: space-between;
align-items: center;
}
.sub-dropdown:hover .sub-dropdown-content{
display: block;
}
.btn{
font-size: 15px;
background-color: var(--second-color);
color: var(--bg-color);
border: none;
padding: 10px 24px;
border-radius: 30px;
box-shadow: var(--shadow-2);
cursor: pointer;
transition: .3s;
}
.btn:hover{
opacity: 0.9;
}
main{
display: flex;
align-items: center;
justify-content: center;
height: 80vh;
color: var(--bg-color);
padding: 20px;
}
main p{
font-size: 50px;
font-weight: 600;
text-align: center;
}
/* ===== Responsive styles ===== */
@media only screen and (max-width: 794px){
.nav-main-menu{
display: none;
}
.menu-toggle{
display: block;
}
}
This CSS will position the dropdown menu below the dropdown button, hide it by default, and display it when the user hovers over the dropdown button. You can customize the CSS to your own liking, such as changing the background color, font size, and padding.
Using the Dropdown Menu
To use the dropdown menu, simply Hover on the dropdown button to open it. You can then select one of the dropdown menu links. To close the dropdown menu, simply click outside of it.
Tips
- You can use any element to open the dropdown menu, such as a button, link, or image.
- You can add any type of content to the dropdown menu, such as links, text, images, and forms.
- You can nest dropdown menus to create multi-level menus.
- You can use CSS to style the dropdown menu to match your website’s design.
Dropdown menus are a versatile and useful way to add navigation to your website. By following the steps in this tutorial, you can easily create your own dropdown menus using HTML and CSS.
