боковая панель для сайта

Всплывающая боковая панель для сайта

· HTML & CSS, JavaScript и Блог · 7 мин чтения

Фиксированная боковая панель (sidebar) для сайта с функцией скрыть/показать.

Если вас интересует всплывающая верхняя панель, то вы сможете ее найти по этой ссылке.

Демо боковой панели

Ниже представлено демо, где вы можете посмотреть как это все будет выглядеть в живую. Демо во весь экран можно посмотреть здесь.

HTML

Со стороны HTML я написал стандартный каркас веб страницы. Слева боковая панель (sidebar), а справа контейнер. Боковая панель у нас будет 30% в ширину экрана, а контейнер 70% — тем самым делая 100% ширину экрана пользователя.

<div class="sidebar">
    <div class="show_hide">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
    </div>
    <aside>
        <ul class="menu">
            <li><a href="#">Ссылка</a></li>
            <li><a href="#">Ссылка</a></li>
            <li><a href="#">Ссылка</a></li>
            <li><a href="#">Ссылка</a></li>

        </ul>
    </aside>
</div>
<div class="container-inner">
    <h1>Заголовок контенера</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
        hassurvived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishingsoftware like Aldus PageMaker including versions of Lorem Ipsum.</p>

    <h1>Заголовок контенера</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
        hassurvived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishingsoftware like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

CSS

Далее нам нужно написать CSS, чтобы это все как следует выглядело. Я выбрал темную цветовую гамму, а вы уже дальше сами исправляйте на ту, которая вам нравится больше всего.

Так же обратите внимание на свойства:

-webkit-transition: background-color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;

Именно они меняют насколько быстро меняется задний фон например при наведении на меню и насколько быстро будут передвигаться объекты если один из них спрятать или что-то изменить в свойствах. Например я хочу спрятать боковую левую панель с экрана, то при скрытии, она будет скрываться в течении 0.5 сек.

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: background-color 0.5s ease-in-out;
    -moz-transition: background-color 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
}

body {
    font-size: 11pt;
    font-family: Verdana, Tahoma, sans-serif;
    color: #8F8F8F;
    background-color: #212121;
}

h1 {
    margin-bottom: 10px;
}

p {
    margin-bottom: 20px;
}

.sidebar,
.container-inner {
    float: left;
    display: inline-block;
}

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 30%;
    background-color: #303030;
    z-index: 99;
}

.sidebar .show_hide {
    position: absolute;
    right: -30px;
    top: 0;
    background-color: #545454;
    height: 30px;
    width: 30px;
    padding: 5px;
    cursor: pointer;
}

.sidebar .show_hide:hover {
    background-color: #5D5C5C;
}

.sidebar .show_hide .bar {
    display: block;
    width: 95%;
    border-bottom: 4px solid #969191;
    margin-bottom: 4px;
}

.container-inner {
    position: relative;
    left: 30%;
    width: 70%;
    top: 0;
    padding: 35px 15px 15px 15px;
}

.sidebar ul.menu {
    list-style: none;
}

.sidebar ul.menu,
.sidebar ul.menu > li,
.sidebar ul.menu > li > a {
    width: 100%;
    float: left;
    display: block;
}

.sidebar ul.menu > li > a {
    padding: 15px 0;
    text-align: center;
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 11pt;
}

.sidebar ul.menu > li > a:hover,
.sidebar ul.menu > li > a:focus,
.sidebar ul.menu > li > a:active {
    background-color: rgb(78, 78, 78);
}

jQuery

Последним этапом у нас остается добавить магии с помощью jQuery. Скрипт не сложный, все очень легко и я сейчас для вас все подробно опишу.

В целом скрипте есть две функции. Первая это — updateSidebarHeight() и вторая showHideSidebar().

updateSidebarHeight() отвечает за обновление высоты боковой панели, так как она у нас во всю высоту экрана пользователя. Изначально, когда пользователь заходит на сайт (и он полностью загрузился), скрипт обновляет высоту боковой панели на всю высоту экрана пользователя. Далее эту функция откликается только когда пользователь изменяет высоту экрана, то есть делает окно браузера меньше или больше.

showHideSidebar() отвечает за скрытие или показывание боковой панели. При нажатии на div с классом show_hide (который отвечает за показ и скрытие боковой панели).

Изначально функция проверяет есть ли у боковой панели класс hidden (который является индикатором того, что панель спрятана), если нет, то добавляет класс hidden к div боковой панели и потом так же добавляет дополнительные стили:

$('.sidebar').css({
     'margin-left': -$('.sidebar').width()
});
$('.container-inner').css({
     'width': '100%',
     'left': 0
});

margin-left убирает боковую панель влево на минусовую ширину самой панели (то есть за видимую часть экрана). Далее для контенера нужно поставить ширину 100% и убрать отступ слева, чтобы он полностью расположился на всю ширину экрана.

Если класс hidden есть на боковой панели, то скрипт убирает style атрибуты с боковой панел, а так же с контейнера, тем самым возвращая все в изначальное положение.

$(document).ready(function() {
    updateSidebarHeight()
});

$(function() {
    $(window).resize(function() {
        updateSidebarHeight();
    });

    $('.show_hide').click(function() {
        showHideSidebar();
    });
});

function updateSidebarHeight() {
    $('.sidebar').css('height', $(window).height());
}

function showHideSidebar() {
    if (!$('.sidebar').hasClass('hidden')) {
        $('.sidebar').addClass('hidden');
        $('.sidebar').css({
            'margin-left': -$('.sidebar').width()
        });
        $('.container-inner').css({
            'width': '100%',
            'left': 0
        });
    } else {
        $('.sidebar')
            .removeClass('hidden')
            .removeAttr('style');
        $('.container-inner').removeAttr('style');
        updateSidebarHeight();
    }
}

Если у вас остались какие-либо вопросы — пишите их в комментарии.

Об авторе

Full-stack разработчик. Люблю кодить, кофе и свой блог.