Как создать раскрывающееся меню учетной записи для пользователя | User Account Dropdown Menu HTML, CSS и JavaScript
Меню учетных записей пользователей являются важной частью многих сайтов, предоставляя пользователям удобный способ доступа к своим профилям и настройкам. В этом уроке мы покажем вам процесс создания раскрывающегося меню учетной записи пользователя с использованием HTML, CSS и JavaScript. Повысьте удобство использования вашего сайта, добавив этот функциональный и стильный элемент.
Надеюсь, это видео будет полезным для вас. Если у вас возникнут какие-либо трудности при создании этого кода, вы можете скачать готовый код, нажав кнопку «СКАЧАТЬ».
Также если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.
HTML КОД:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
<link href='images/favicon.jpeg' rel='icon' type='image/png'/>
<title>User Account Drop Down</title>
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<!--Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<!--Stylesheets-->
<link rel="stylesheet" href="css/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-->
<script src="js/script.js"></script>
</body>
</html>
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;
}
JAVASCRIPT КОД:
let profile = document.querySelector(".profile");
let toggleMenu = document.querySelector(".menu");
profile.addEventListener("click", ()=>{
toggleMenu.classList.toggle("js-active");
})
0 Комментарии