Hi Guys, I am back with another fantastic project in this project I used HTML, CSS, and a bit of JavaScript. This project is a Drop-Down Menu Like Facebook.
I also share a complete source code with my readers and followers it is free of cost, not any subscription to get the source code of this project. You can download these code files and use them for free.
Recently I created a 3D flip profile card UI design using HTML and CSS. I also share this source code in the blog post here you can check this 3D flip profile card UI design.
Drop-Down Menu
A dropdown menu, also known as a drop-down list or a select menu, is a graphical user interface element that allows users to select an option from a list of predefined choices.
When the user clicks or hovers over the dropdown menu, a list of options “drops down” or expands, displaying the available choices.
The user can then select one option by clicking on it or hovering over it, and the menu will collapse, displaying the selected option as the current choice.
Dropdown menus are commonly used in web forms, navigation menus, and various user interfaces to provide a compact and organized way for users to select from a range of options without cluttering the screen.
They are widely used to enhance user experience and streamline user interactions on websites and applications.
About This Project
The Coding Pakistan blog website created this project with the aim of providing free assistance to students who are interested in learning various programming languages and web development technologies
The project focuses on teaching programming languages such as HTML, CSS, and JavaScript, as well as frameworks like React.js and Next.js.
| Created by | Coding Pakistan |
| Languages | HTML / CSS / JavaScript |
| Source Code | Download GitHub |
| Preview | Take Preview |
In this project, you see One profile image and some text like name and profession in my case Web developer is my profession when the user clicks on the profile image the Drop-down menu will appear with a smooth transition. Again clicking on the profile image menu will disappear.
In navigation links, I add some common options like Inbox, Chat, Settings, Help, and Logout, with small icons this icon is provided by the Ionicons website.
If you need more options in the navigation menu you can add easily as you want.
How To Create a Drop-Down Menu Like Facebook
There are some steps to create this type of Drop-Down Menu using HTML, CSS, and JavaScript that are given below.
- The first step is to create one folder.
- Open this folder in Vs Code Editor and create three files HTML, CSS, and JavaScript
- Make sure the HTML file extension is (.html), the CSS file extension will be (.css) and the JavaScript file extension is (.js)
- After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)
- Also, link the JavaScript file with the HTML file using this line of code <script src=”script.js”></script>
- The last step is copying and pasting the given code into your files.
Source Code of Drop-Down Menu Using HTML / CSS and JS
HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Created by www.codingpakistan.com -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drop Down Menu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="menuToggle"> </div>
<div class="profile">
<h3>Ahmed Khan <br> <span>Developer</span></h3>
<div class="imgBx">
<img src="Profile pic.png" alt="">
</div>
</div>
<div class="menu">
<ul>
<li>
<a href="#"> <ion-icon name="person-outline"></ion-icon> Profile</a>
</li>
<li>
<a href="#"> <ion-icon name="chatbubble-outline"></ion-icon> Inbox </a>
</li>
<li>
<a href="#"> <ion-icon name="settings-outline"></ion-icon> Settings </a>
</li>
<li>
<a href="#"> <ion-icon name="help-circle-outline"></ion-icon> Help </a>
</li>
<li>
<a href="#"> <ion-icon name="log-out-outline"></ion-icon> Logout </a>
</li>
</ul>
</div>
</nav>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>
<script src="script.js"></script>
</html>
CSS FILE
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(45deg, #2196f3, #b8f7ff);
}
nav{
position: relative;
top: -150px;
width: 500px;
height: 80px;
background: white;
box-shadow: 0 50px 50px rgba(0, 0,0,0.1);
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
nav .menuToggle{
position: relative;
width: 40px;
height: 40px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
nav .menuToggle::before{
content: '';
position: absolute;
width: 35px;
height: 3px;
background: #555;
box-shadow: 0 10px 0 #555,
0 -10px 0 #555;
}
nav .profile{
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
cursor: pointer;
}
nav .profile h3{
text-align: end;
font-weight: 500;
line-height: 1em;
color: black;
}
nav .profile h3 span{
font-size: 0.75em;
color: #777;
}
nav .profile .imgBx{
position: relative;
width: 50px;
height: 50px;
background: red;
border-radius: 50%;
}
nav .profile .imgBx img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
nav .menu{
position: absolute;
top: calc(100% + 30px);
right: 0;
width: 200px;
min-height: 100px;
background: white;
box-shadow: 0 50px 50px rgba(0, 0,0,0.1);
opacity: 0;
visibility: hidden;
transition: 0.5s;
}
nav .menu::before{
content: '';
position: absolute;
top: -8px;
right: 35px;
width: 20px;
height: 20px;
background: white;
transform: rotate(45deg);
}
nav .menu.active{
opacity: 1;
visibility: visible;
}
nav .menu ul{
position: relative;
display: flex;
flex-direction: column;
z-index: 10;
background: white;
}
nav .menu ul li{
list-style: none;
padding: 15px 20px;
transition: 0.5s;
}
nav .menu ul li:hover{
background: #f5f5f5;
transition: 0s;
}
nav .menu ul li a{
text-decoration: none;
color: #666;
display: flex;
align-items: center;
gap: 10px;
}
nav .menu ul li a ion-icon{
font-size: 1.25em;
color: #999;
}
JavaScirpt FILE
let profile = document.querySelector('.profile')
let menu = document.querySelector('.menu')
profile.onclick = function(){
menu.classList.toggle('active');
}
Video Tutorial – Drop-Down Menu
If you don’t understand this code and you want to learn in deep so please watch this video and subscribe to this youtube channel for more videos like this.
Related Content
- Responsive Team section Desing using HTML and CSS
- Footer Menu Design using HTML and CSS with source code.
- Build a movie app using HTML, CSS, and JavaScript
Conclusion
Creating a drop-down menu in HTML, like the one used by Facebook, is a crucial skill for web developers. By using HTML, CSS, and JavaScript, you can design an interactive and visually appealing menu that improves user experience and content organization.
Remember to follow best practices, prioritize responsiveness and accessibility, and stay up-to-date with the latest web development trends. Mastering the creation of drop-down menus will allow you to enhance your websites with a professional and user-friendly interface.
