Привет, можете пожалуйста подсказать, как сделать вот такую кнопочку выпадающего? Нужно использовать бутстрап или можно и при помощи стилей? И она должна работать даже при полном разрешении экрана.
2 ответа
Например. Стили, классы и т д Ваши. Для мобильных устройств и планшетов будет работать так же. "кнопку" можете размещать где захотите...
$('.main-block__humb').click(function(){
$('.menu').toggleClass('active');
});
.main-block {
position: relative;
height: 100vh;
width: 100%;
background: red;
}
.main-block__humb {
height: 12px;
width: 23px;
position: relative;
border-bottom: 1px solid #ffffff;
display: block;
margin: 3px 0 100px 30px;
z-index: 1000;
}
.main-block__humb::before, .main-block__humb::after {
height: 2px;
background: #ffffff;
width: 23px;
display: block;
content: '';
margin: 0 0 4px 0;
}
.main-block__humb::after {
height: 1px;
width: 18px;
margin: 0 0 0 1px;
}
.menu {
position: absolute;
text-align: center;
left: -2000px;
bottom: 0;
top: 0;
transform: translateX(0%);
transition: .3s;
}
.menu.active {
position: absolute;
left: 0;
text-align: center;
background: #000000;
height: 100vh;
width: 100%;
z-index: 30;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-block">
<span class="main-block__humb"></span>
<div class = "menu">
<ul class = "menu__list">
<li>fdsf</li>
<li>fdsfsdf</li>
</ul>
</div>
</div>
Ну если вас просто кнопка интересует, то реализуется она следующим образом
* {
margin: 0;
padding: 0;
}
.mobile-button {
display: inline-block;
width: 40px;
height: 40px;
margin: 20px;
cursor: pointer;
}
.mobile-button>i {
display: block;
width: 30px;
height: 6px;
background: #ccc;
margin: 6px auto;
}
<span class="mobile-button">
<i></i>
<i></i>
<i></i>
</span>