Сегодня в этом блоге вы узнаете, как создать боковую панель в HTML CSS JavaScript, существует множество навигационных меню, например, боковое меню и горизонтальную строку меню, а также анимацию наведения курсора мыши на навигационные ссылки.
Сегодняшняя панель боковой панели будет простой и очень полезной. Главная особенность этой боковой панели в том, что мы можем закрыть ее, щелкнув снаружи.
Меню боковой панели - это раздел, который выравнивает правую или левую часть веб-сайта и приложений и помогает пользователям перенаправляться по своему усмотрению. Как правило, боковая панель представляет собой преобразование горизонтального навигационного меню, которое появляется на устройствах небольшой ширины, таких как планшеты и мобильные устройства.
Как вы можете видеть на предварительном просмотре нашего бокового меню, оно выровнено по левой стороне. Есть кнопка открытия / закрытия логотипа и несколько навигационных ссылок. Буквально, согласно моему проекту, боковая панель находится в закрытом состоянии, и мы увидим логотип и кнопки открытия и закрытия. Когда мы нажимаем на эту кнопку открытия / закрытия, появляется боковая панель. Также мы можем закрыть боковую панель, нажав на кнопку открытия / закрытия или за пределами боковой панели.
Давайте посмотрим данное видео нашего меню боковой панели. Просмотрев данный видеоурок, вы увидите виртуальную демонстрацию этой боковой панели навигации и всех HTML CSS и JavaScript-кодов, которые я использовал для создания этого красивого бокового меню.
Я предоставил все коды HTML CSS и JavaScript, которые я использовал для создания этого красивого бокового меню. Прежде чем перейти к файлу исходного кода. Я хотел бы кратко объяснить данный видеоурок в нашей боковой панели меню навигации.
Как вы видели в видеоуроке нашего бокового меню. Сначала на экране было название логотипа и кнопка открытия / закрытия. Когда я нажал на кнопку открыть / закрыть, боковая панель появилась с левой стороны. Когда боковая панель открылась, внешняя часть боковой панели стала немного темной, а когда я закрыл боковую панель, эта темная часть исчезла. Затем, когда я открыл боковую панель и нажал на темную часть, боковая панель закрылась, тогда мы узнали, что мы можем закрыть боковую панель, нажав и на эти темные части.
Для части пользовательского интерфейса и UX этой боковой панели я использовал HTML и CSS. А для открытия и закрытия боковой панели я использовал некоторый JavaScript. Все шрифты взяты с веб-сайта box icons, а шрифты импортированы с веб-сайта Google fonts, как вы видели в видеоуроке.
Надеюсь, теперь вы сможете создать это боковое меню, используя HTML CSS и JavaScript. Если вам сложно создать эту боковую панель, я предоставил все исходные коды ниже.
Чтобы получить следующий HTML CSS и Javascript код для бокового меню или боковой панели меню навигации. Вам нужно создать два файла, один из которых является HTML-файлом, а другой - CSS-файлом. После создания этих двух файлов вы можете скопировать и вставить указанные коды в свой документ. Вы также можете загрузить все файлы исходного кода с помощью указанной кнопки загрузки.
Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете скачать исходный код, нажав на кнопку скачать. Кроме того, оставляйте свои вопросы, предложения и отзывы в комментариях ниже.
<!DOCTYPE html>
<html lang="en">
<head>
<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>Sidebar Menu | Side Navigation Bar</title>
<!-- CSS -->
<link rel="stylesheet" href="css/style.css" />
<!-- Boxicons CSS -->
<link
href="https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css"
rel="stylesheet"
/>
</head>
<body>
<nav>
<div class="logo">
<i class="bx bx-menu menu-icon"></i>
<span class="logo-name">CodingLab</span>
</div>
<div class="sidebar">
<div class="logo">
<i class="bx bx-menu menu-icon"></i>
<span class="logo-name">CodingLab</span>
</div>
<div class="sidebar-content">
<ul class="lists">
<li class="list">
<a href="#" class="nav-link">
<i class="bx bx-home-alt icon"></i>
<span class="link">Dashboard</span>
</a>
</li>
<li class="list">
<a href="#" class="nav-link">
<i class="bx bx-bar-chart-alt-2 icon"></i>
<span class="link">Revenue</span>
</a>
</li>
<li class="list">
<a href="#" class="nav-link">
<i class="bx bx-bell icon"></i>
<span class="link">Notifications</span>
</a>
</li>
<li class="list">
<a href="#" class="nav-link">
<i class="bx bx-message-rounded icon"></i>
<span class="link">Messages</span>
</a>
</li>
<li class="list">
<a href="#" class="nav-link">
<i class="bx bx-pie-chart-alt-2 icon"></i>
<span class="link">Analytics</span>
</a>
</li>
<li class="list">
<a href="#" class="nav-link">
<i class="bx bx-heart icon"></i>
<span class="link">Likes</span>
</a>
</li>
<li class="list">
<a href="#" class="nav-link">
<i class="bx bx-folder-open icon"></i>
<span class="link">Files</span>
</a>
</li>
</ul>
<div class="bottom-cotent">
<li class="list">
<a href="#" class="nav-link">
<i class="bx bx-cog icon"></i>
<span class="link">Settings</span>
</a>
</li>
<li class="list">
<a href="#" class="nav-link">
<i class="bx bx-log-out icon"></i>
<span class="link">Logout</span>
</a>
</li>
</div>
</div>
</div>
</nav>
<section class="overlay"></section>
<script src="script.js"></script>
</body>
</html>
/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
min-height: 100%;
background: #e3f2fd;
}
nav {
position: fixed;
top: 0;
left: 0;
height: 70px;
width: 100%;
display: flex;
align-items: center;
background: #fff;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
}
nav .logo {
display: flex;
align-items: center;
margin: 0 24px;
}
.logo .menu-icon {
color: #333;
font-size: 24px;
margin-right: 14px;
cursor: pointer;
}
.logo .logo-name {
color: #333;
font-size: 22px;
font-weight: 500;
}
nav .sidebar {
position: fixed;
top: 0;
left: -100%;
height: 100%;
width: 260px;
padding: 20px 0;
background-color: #fff;
box-shadow: 0 5px 1px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease;
}
nav.open .sidebar {
left: 0;
}
.sidebar .sidebar-content {
display: flex;
height: 100%;
flex-direction: column;
justify-content: space-between;
padding: 30px 16px;
}
.sidebar-content .list {
list-style: none;
}
.list .nav-link {
display: flex;
align-items: center;
margin: 8px 0;
padding: 14px 12px;
border-radius: 8px;
text-decoration: none;
}
.lists .nav-link:hover {
background-color: #4070f4;
}
.nav-link .icon {
margin-right: 14px;
font-size: 20px;
color: #707070;
}
.nav-link .link {
font-size: 16px;
color: #707070;
font-weight: 400;
}
.lists .nav-link:hover .icon,
.lists .nav-link:hover .link {
color: #fff;
}
.overlay {
position: fixed;
top: 0;
left: -100%;
height: 1000vh;
width: 200%;
opacity: 0;
pointer-events: none;
transition: all 0.4s ease;
background: rgba(0, 0, 0, 0.3);
}
nav.open ~ .overlay {
opacity: 1;
left: 260px;
pointer-events: auto;
}
const navBar = document.querySelector("nav"),
menuBtns = document.querySelectorAll(".menu-icon"),
overlay = document.querySelector(".overlay");
menuBtns.forEach((menuBtn) => {
menuBtn.addEventListener("click", () => {
navBar.classList.toggle("open");
});
});
overlay.addEventListener("click", () => {
navBar.classList.remove("open");
});
0 Комментарии