@make_dev

Как сделать вот такой выдвигающийся sidebar?

Привет! Как можно сделать вот такой выдвигающийся sidebar?
bucketadmin.themebucket.net/index.html
Чтобы при открытии сайдбара основной контент не уезжал за пределы экрана, а просто немного сжимался.
Для основного контента планирую использовать флексбокс.
  • Вопрос задан
  • 1073 просмотра
Решения вопроса 1
27cm
@27cm
TODO: Написать статус
При закрытии меню к тегу основного контента добавляется класс merge-left, а к тегу меню - класс hide-left-bar:
<div id="sidebar" class="nav-collapse hide-left-bar">
   ...
</div>
<section id="main-content" class="merge-left">
   ...
</section>


#main-content {
    margin-left: 240px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.merge-left {
    margin-left: 0px !important;
}

#sidebar {
    width: 240px;
    height: 100%;
    position: fixed;
    background: #32323a;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.hide-left-bar {
    margin-left: -240px !important;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы