0

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

1

2 ответа 2

0

Например. Стили, классы и т д Ваши. Для мобильных устройств и планшетов будет работать так же. "кнопку" можете размещать где захотите...

$('.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>

0

Ну если вас просто кнопка интересует, то реализуется она следующим образом

* {
  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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.