User account menus are a crucial part of many websites, providing a convenient way for users to access their profiles and settings. In this tutorial, we'll walk you through the process of creating a user account dropdown menu using HTML, CSS, and JavaScript. Elevate the user experience of your website by adding this functional and stylish element.
Step 1: HTML Markup:
Start by setting up the HTML structure for your user account dropdown menu. You'll need a container for the menu and its trigger, such as a user icon.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>User Account Drop Down</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="logo">
logo
</div>
<ul class="link">
<li><a href="#">Frontend</a></li>
<li><a href="#">Backend</a></li>
<li><a href="#">Code</a></li>
<li><a href="#">Project</a></li>
</ul>
<div class="account">
<div class="profile">
<img src="https://source.unsplash.com/100x100/?face" alt="">
</div>
<div class="menu">
<h3>Jennu Rayen</h3>
<p>Web Designer</p>
<ul>
<li>
<i class="fa-solid fa-user"></i>
<a href="#">Profile</a>
</li>
<li>
<i class="fa-regular fa-pen-to-square"></i>
<a href="#">Edit</a>
</li>
<li>
<i class="fa-regular fa-message"></i>
<a href="#">Message</a>
</li>
<li>
<i class="fa-solid fa-gear"></i>
<a href="#">Settings</a>
</li>
<li>
<i class="fa-solid fa-gear"></i>
<a href="#">Help</a>
</li>
<li>
<i class="fa-solid fa-arrow-right-from-bracket"></i>
<a href="#">Log out</a>
</li>
</ul>
</div>
</div>
</nav>
<section>
your content
</section>
<script src="main.js"></script>
</body>
</html>
Step 2: Styling with CSS:
Create a separate CSS file (style.css) to style the user account dropdown menu and its appearance.
/*-------------------- CSS --------------------*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
font-family: sans-serif;
}
body {
min-height: 100vh;
overflow-x: hidden;
}
nav {
display: flex;
height: 80px;
align-items: center;
box-shadow: 0 2px 1px black;
}
.logo {
font-size: 2rem;
font-weight: bold;
text-transform: uppercase;
font-family: monospace;
margin-left: 50px;
width: 100%;
cursor: pointer;
}
.link {
display: flex;
align-items: center;
gap: 20px;
position: relative;
margin: 0 50px;
}
.link li {
margin: 0 5px;
position: relative;
padding: 5px 2px;
}
.link li a {
color: black;
font-size: 1.2rem;
position: relative;
}
.link li a::before {
content: "";
position: absolute;
width: 0%;
bottom: -3px;
height: 3px;
background: black;
left: 50%;
transform: translateX(-50%);
transition: 0.3s;
}
.link li a:hover::before {
width: 100%;
}
.account {
position: relative;
width: 80px;
margin-right: 50px;
}
.profile {
position: absolute;
right: 0;
top: 0;
transform: translateY(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid #0000002f;
overflow: hidden;
cursor: pointer;
}.profile:hover {
border: 2px solid #000000;
}
.profile img {
width: 100%;
height: 100%;
object-fit: cover;
}
.menu {
width: 260px;
border: 4px solid black;
position: absolute;
right: -80px;
top: 50px;
border-radius: 12px;
background: linear-gradient(135deg, #353535, #4d4d4d);
box-shadow: 0 0 50px #00000077;
visibility: hidden;
opacity: 0;
transition: 0.3s;
}
.js-active {
visibility: visible;
opacity: 1;
right: -20px;
}
.menu::before {
content: "";
width: 15px;
height: 15px;
background: linear-gradient(135deg, #111 50%, #0000 0%);
position: absolute;
rotate: 45deg;
top: -7px;
right: 35px;
}
.menu h3 {
text-align: center;
font-size: 1.4rem;
color: white;
margin: 18px 0 5px;
}
.menu p {
text-align: center;
color: white;
margin-bottom: 20px;
font-family: monospace;
text-transform: uppercase;
}
.menu ul {
margin-bottom: 15px;
}
.menu ul li {
padding: 15px 20px;
border-top: 1px solid #3333336b;
cursor: pointer;
transition: 0.5s;
}
.menu ul li:hover {
background: #f8f8f831;
}
.menu ul li i {
font-size: 1.3rem;
color: #b4b4b4;
transition: 0.5s;
}
.menu ul li:hover i {
color: white;
}
.menu ul li a {
font-size: 1.3rem;
margin-left: 20px;
color: white;
}
section {
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
text-transform: uppercase;
font-size: 1.2rem;
}
Step 3: Adding JavaScript Interaction:
Create a JavaScript file (script.js) to handle the dropdown menu's visibility.
//-------------------- Java Script --------------------//
let profile = document.querySelector(".profile");
let toggleMenu = document.querySelector(".menu");
profile.addEventListener("click", ()=>{
toggleMenu.classList.toggle("js-active");
})
Congratulations! You've successfully created a user account dropdown menu using HTML, CSS, and JavaScript. This functional and stylish element can enhance the user experience of your website by providing a convenient way for users to access their profiles and settings.
Feel free to customize the colors, fonts, and other styles to match your website's design. You can also explore additional JavaScript features to add animations or other interactions to the dropdown menu.
By following this tutorial, you've gained a valuable skill in web development that can help you create more user-friendly and visually appealing interfaces. Implement this user account dropdown menu on your website to provide a seamless and efficient way for users to manage their accounts.
0 Comments