Верстаю макет с использованием Bootstrap. Появилась необходимость сделать так чтобы sideebar слева (скриншот приложил) в мобильной версии скрывался и его можно было сделать выезжающим при нажатии на кнопку или ваще свайпом от края экран. Подскажите пожалуйста как это реализовать?
-
Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа).– Nicolas Chabanovsky ♦7 июн 2016 в 6:02
Добавить комментарий
|
1 ответ
Не бутстрап, но думаю не составит особого труда под него это сделать:
$('.menu_icon, .close').on('click', function(){
$('.menu-mobile--itself').toggleClass('show')
})
* {
box-sizing: border-box;
}
body {
font-family: "Open Sans", sans-serif;
}
.wrapper {
border: 1px solid #333;
margin: 30px auto;
max-width: 768px;
width: 100%;
height: 768px;
padding: 10px;
position: relative;
overflow: hidden;
}
.menu-mobile--itself {
position: absolute;
padding: 30px;
background-color: #333;
width: 50%;
height: 100%;
top: 0;
right: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: cubic-bezier(0.52, 0.26, 0, 0.92) 0.5s;
transition: cubic-bezier(0.52, 0.26, 0, 0.92) 0.5s;
color: #fff;
}
.menu-mobile--itself.show {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu-mobile--itself .close {
position: absolute;
top: 15px;
right: 15px;
font-size: 22px;
color: #fff;
cursor: pointer;
}
.menu_block {
border: 1px solid #f2f2f2;
display: table;
width: 100%;
}
.menu_block .logo, .menu_block .menu_icon {
display: table-cell;
width: 50%;
vertical-align: middle;
}
.menu_block .logo {
padding: 10px;
}
.menu_block .logo img {
max-width: 200px;
width: 100%;
vertical-align: middle;
}
.menu_block .menu_icon {
font-size: 32px;
text-align: right;
padding: 0 30px;
-webkit-transition: 500ms;
transition: 500ms;
cursor: pointer;
}
.menu_block .menu_icon:hover {
color: #727272;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet">
<div class="wrapper">
<div class="menu-mobile--itself">
<div class="close">
<i class="fa fa-times-circle" aria-hidden="true"></i>
</div>
<ul>
<li>Option #1</li>
<li>Option #2</li>
<li>Option #3</li>
<li>Option #4</li>
<li>Option #5</li>
</ul>
</div>
<div class="menu_block">
<div class="image-block logo">
<img src="http://www.juggcash.com/images/hd_tools/default_logo.png" alt="" />
</div>
<div class="menu_icon">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</div>
</div>