Узнайте, как свернуть / развернуть меню боковой панели, используя только JavaScript, HTML и CSS. В этом уроке мы создадим полностью отзывчивое меню боковой панели, которое можно развернуть и свернуть с помощью кнопки. Это часто встречается на современных административных панелях.
Используя CSS и JS, мы сделаем наше боковое меню потрясающим и функциональным с поисковой строкой/всплывающим окном. Я также протестировал и закодировал для отзывчивых медиа-запросов, поэтому оно работает не только на настольных компьютерах, но и на мобильных телефонах, так что ваша боковая панель может отлично выглядеть на протяжении всего проекта. Имейте в виду, что это учебник только для внешнего вида, но вы можете использовать его как основу для навигации всего проекта.
Посмотреть на YouTube
Структура папок
index.html
/images
avatar.jpg
logo.png
mobile.svg
/sass
style.scss
/js
init.js
/css (generated by Sass)
style.css
style.min.css
Наш HTML
HTML этого учебника очень прост. По сути, у нас есть боковая панель с верхней и нижней частью, затем основная для содержимого страницы. В этом уроке не будет использоваться BootStrap для стилизации, но мы будем использовать иконки, поэтому убедитесь, что вы используете либо их иконки, добавив ссылку на таблицу стилей иконок bootstrap, либо добавив свои собственные.
<!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>Collapse / Expand Sidebar Tutorial</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
<link rel="stylesheet" href="/css/style.min.css">
</head>
<body>
<div class="container">
<div class="sidebar">
<div class="sidebartop">
<div class="logo">
<img src="/images/logo.png" alt="">
</div>
<div class="logo-mobile">
<img src="/images/mobile.svg" alt="">
</div>
<div class="menu">
<i class="bi bi-list"></i>
</div>
</div>
<div class="search">
<form action="">
<button type="submit" class="callSearch"><i class="bi bi-search"></i></button><input type="text" placeholder="Search" class="searchInput">
</form>
</div>
<nav>
<ul>
<li><a href="#"><i class="bi bi-speedometer"></i><span class="text">Dashboard</span></a></li>
<li><a href="#"><i class="bi bi-file-earmark"></i><span class="text">Pages</span></a></li>
<li><a href="#"><i class="bi bi-pencil-square"></i><span class="text">Posts</span></a></li>
<li><a href="#"><i class="bi bi-people"></i><span class="text">Users</span></a></li>
<li><a href="#"><i class="bi bi-gear"></i><span class="text">Settings</span></a></li>
</ul>
</nav>
<div class="account">
<div class="avatar">
<img src="/images/avatar.jpg" alt="">
</div>
<div class="name">
<h4>The DevDrawer</h4>
Adminstrator
</div>
<div class="logout">
<a href="#"><i class="bi bi-box-arrow-left"></i></a>
</div>
</div>
</div>
<div class="main">
[page content here]
</div>
</div>
<div class="searchWindow">
<button type="button" class="cancelSearch"><i class="bi bi-x"></i></button>
<h2>Search Our Site</h2>
<form action="">
<input type="text" placeholder="Enter your text">
<button type="submit">Search</button>
</form>
</div>
<script src="/js/init.js"></script>
</body>
</html>
Наш базовый Sass
Таблица стилей является важной частью этого руководства, поэтому вы можете скопировать то, что я написал ниже, или использовать классы и привести их в соответствие с вашим собственным брендингом.
Стилей очень много, но следующие должны помочь вам начать работу с размещением и компоновкой. Я использую шрифт Open Sans, поэтому я импортирую его непосредственно из Google Fonts.
Пожалуйста, имейте в виду, что у меня есть аддон Sass в моем VS Code, который помогает генерировать style.css и style.min.css, на которые есть ссылки в HTML-коде. Вы можете скачать его здесь, если у вас его еще нет: https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass.
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
$primary-color:#333;
$white: #fff;
body {
color:$primary-color;
padding:0;
margin:0;
position: relative;
min-height:100vh;
overflow:hidden;
font-family: 'Open Sans', sans-serif;
font-size:14px;
}
.container {
display:flex;
flex-flow:row wrap;
.sidebar {
background-color:$primary-color;
color:$white;
width:30%;
height:100%;
padding:0 1rem;
position: fixed;
top:0;
left:0;
transition: width .10s ease-in-out;
a {
color:$white;
text-decoration: none;
}
.sidebartop{
display:flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
padding-top:1rem;
height:55px;
.logo {
width:70%;
img {
height:auto;
width:100%;
}
}
.menu {
width:20%;
text-align:end;
i {
cursor:pointer;
font-size:1.75rem;
}
}
.logo-mobile {
display:none;
}
}
.search {
display:flex;
flex-direction:row;
justify-content: space-between;
align-items: flex-start;
position: relative;
margin:1rem 0;
button {
cursor:pointer;
width:auto;
background-color:transparent;
border:0;
color:$white;
position: absolute;
font-size:1.25rem;
left:1.5rem;
top:50%;
transform: translate(-50%, -50%);
}
input {
background-color:lighten($primary-color, 5%);
border:0px;
padding:1rem;
border-radius: .5rem;
width:calc(100% + 1rem);
&::placeholder {
padding-left:1.5rem;
}
}
}
nav {
ul {
padding:0;
margin:0;
list-style:none;
li {
display:block;
align-items:center;
padding:1.25rem 0;
position: relative;
background-color:transparent;
transition: background-color .25s ease-in-out;
a {
display:block;
i {
font-size:1.25rem;
}
.text {
position: relative;
left:1rem;
top:-.2rem;
}
}
}
}
}
.account {
display:flex;
justify-content: space-between;
align-content:center;
align-items:center;
width:calc(100% - 2rem);
position: absolute;
bottom:1rem;
.avatar {
margin-right:1rem;
width:20%;
img {
border-radius:50%;
height:50px;
width:50px;
}
}
.name {
flex: 1 1 auto;
h4 {
padding:0;
margin:0;
}
}
.logout {
flex: 1 1 auto;
text-align: end;
i {
font-size:1.5rem;
}
}
}
}
.main {
margin-left:calc(30% + 2rem);
padding:1rem;
}
}
Наш JS
Наш JS — это то, что добавляет или удаляет наш короткий класс. По сути, он берет щелчок по меню и добавляет класс body, который показывает боковую панель свернутой или развернутой. Вы можете запустить приведенный ниже код, и вы увидите, как новый класс добавляется в тело HTML.
ПРИМЕЧАНИЕ: Вы еще не увидите изменений в стилях, потому что мы не добавили класс short в наш Sass, но вы должны увидеть добавление класса.
ПРИМЕЧАНИЕ: JS ниже также добавляет локальный элемент хранения, чтобы сохранить выбранное состояние боковой панели для пользователя.
const menu = document.querySelector(".menu"); // get menu item for click event
menu.addEventListener("click", function () {
expandSidebar();
showHover();
getSearch();
});
/**
* expand sidebar if it is short, otherwise collapse it
*/
function expandSidebar() {
document.querySelector("body").classList.toggle("short");
let keepSidebar = document.querySelectorAll("body.short");
if (keepSidebar.length === 1) {
localStorage.setItem("keepSidebar", "true");
} else {
localStorage.removeItem("keepSidebar");
}
}
/**
* show hover effect on sidebar
*/
function showHover() {
const li = document.querySelectorAll(".short .sidebar li a");
if (li.length > 0) {
li.forEach(function (item) {
item.addEventListener("mouseover", function () {
const text = item.querySelector(".text");
text.classList.add("hover");
});
item.addEventListener("mouseout", function () {
const text = item.querySelector(".text");
text.classList.remove("hover");
});
});
}
}
/**
* get search button click if short sidebar or mobile
*/
function getSearch() {
document.querySelector(".callSearch").addEventListener("click", function (e) {
e.preventDefault();
if (
document.querySelector("body").classList.contains("short") ||
window.innerWidth <= 844
) {
document.querySelector(".searchWindow").classList.toggle("active");
}
});
document
.querySelector(".cancelSearch")
.addEventListener("click", function () {
document.querySelector(".searchWindow").classList.toggle("active");
});
}
/**
* check local storage for keep sidebar
*/
function showStoredSidebar() {
if (localStorage.getItem("keepSidebar") === "true") {
document.querySelector("body").classList.add("short");
showHover();
getSearch();
}
}
showStoredSidebar(); // show sidebar if stored in local storage
Добавление нашего короткого класса в Sass
Теперь, когда мы добавили короткий класс в тело HTML, нам нужно придать ему стиль. Поэтому откройте файл style.scss и добавьте в его нижнюю часть (за пределами текущего CSS) следующее.
Этот класс будет обрабатывать вид свертывания/развертывания, а также скрывать ненужные элементы в боковой панели.
.short {
.sidebar {
width:5%;
text-align:center;
.logo, .searchInput, .text, .avatar, .name {
display:none;
}
.sidebartop {
display:block;
height:75px;
.logo-mobile {
display:none;
}
.menu {
width:100%;
text-align:center;
}
}
.text.hover {
display: block !important;
background-color:rgba(255,255,255,.9);
color:$primary-color;
padding:.5rem;
box-shadow: 1px 1px 5px 0 rgba(0,0,0,.25);
position: absolute;
left:3rem;
top:1rem;
border-radius:.25rem;
}
.account {
display:block;
.logout {
width:100%;
text-align:center;
}
}
.search {
margin:1.75rem -.2rem;
}
}
.main {
margin-left:calc(5% + 2rem)
}
}
Кроме того, теперь вы должны иметь возможность навестись на иконки на свернутой боковой панели, чтобы увидеть связанный с ними наведенный текст.
Всплывающее окно поиска
В приведенном выше JS мы добавили функцию поиска, которая на тот момент не использовалась, но теперь нам нужно создать всплывающее окно при нажатии на значок поиска на свернутой боковой панели, поскольку сам поиск недоступен с этого экрана.
Итак, сначала добавим Sass для корректного отображения всплывающего окна.
.searchWindow{
position: fixed;
height:100vh;
width:100vw;
background-color:rgba(51,51,51,.9);
z-index:1;
top:0;
padding:1rem;
text-align:center;
color:$white;
padding-top:20vh;
display:none;
input {
background-color:darken($white, 25%);
border:0px;
padding:1rem .5rem;
border-radius:.5rem;
width:60vw;
&::placeholder {
padding-left:.5rem;
}
}
button {
background-color:transparent;
border:2px solid $white;
font-size:1rem;
padding:1rem 2rem;
color:$white;
border-radius: .5rem;
cursor:pointer;
&.cancelSearch {
border:0px;
font-size:2rem;
position: absolute;
top:0;
right:2vw;
}
}
&.active {
display:block;
}
}
Теперь, используя вышеприведенную функцию JS и CSS, вы должны увидеть всплывающее окно поиска при нажатии на иконку поиска на свернутой боковой панели.
Мобильная стилизация
Наконец, нам нужно добавить мобильную стилизацию. Этот стиль не охватывает все типы мобильных устройств, но вы должны быть в состоянии использовать его, чтобы охватить, по крайней мере, iPhone. Вы можете изменить стили для других размеров экрана.
Ниже мы рассмотрим вертикальный и горизонтальный вид на телефоне.
@media (max-width:844px) {
.container {
.sidebar {
width:5%;
text-align:center;
.logo, .searchInput, .text, .avatar, .name {
display:none;
}
.sidebartop {
display:block;
height:auto;
.logo-mobile {
display:block;
img {
height:auto;
width:80%
}
}
.menu {
display:none;
}
}
nav {
ul {
li {
padding:0;
a {
padding:0.6rem 0;
}
}
}
}
.account {
display:block;
.logout {
width:100%;
text-align:center;
}
}
.search {
margin:1.5rem -.2rem;
}
}
.main {
margin-left:calc(5% + 2rem)
}
}
}
@media (max-width:390px) {
.container {
.sidebar {
width:8%;
nav {
ul {
li {
padding:0;
a {
padding:2rem 0;
}
}
}
}
.search {
margin-top:4rem;
margin-bottom:3rem;
margin-left:-.5rem;
}
}
.main {
margin-left:calc(8% + 2rem)
}
}
.searchWindow{
padding:0;
padding-top:10vh;
input {
width:calc(100% - 2rem);
}
button {
width:calc(100% - 1rem);
margin-top:.5rem;
}
}
}
Заключение
Теперь вы должны закончить работу над кодом, и у вас должна быть сворачиваемая и разворачиваемая боковая панель, которая хранит ваши настройки в локальном объекте хранения и работает на мобильных устройствах. Удачи.