Как сделать выпадающее меню?

Question

[Юра]

Привет, не сочите за рекламу, пересмотрел много примеров, но нигде не нашёл похожее, подскажите как сделать такое меню гамбургер как на этом сайте aviasales.ru.

Какая здесь структура кода и минимальный стиль, остальное бы сам доделал.

Comments

[Ankhena]

У вас 2 пути: открыть инспектор кода и посмотреть:

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

Либо сразу пойти на фриланс.

Answer 1

[Юпитер Макс]

Все просто делается. Тут немного анимации на саму выпадашку и работа с z-index. По клику добавляем нужный класс, у которого есть свойство в css. Вот для примера накидал вам. https://jsfiddle.net/8teqfnfz/14/

Comments

[forspamonly2]

при желании тут можно и без скриптов обойтись, привязав стили к псевдоклассу :active у ссылки с гамбургером

[Юра]

Спасибо за пример, но у меня не работает, сразу меню видно, подключен jquery 3.2.1, возможно сам javascript не правильно подключил:

<script type='text/javascript'>
$('.nav span').click(function(){
	$('.subnav').toggleClass('open');
});
</script>

ну и может ещё сделать при клике на пустом месте, что бы меню убиралось.

Answer 2

[Jimmy Tod]

Ну там вложено три элемента, при нажатии один изчезает, два меняют положение. Смысле структура кода? Что под этим понимаешь? Давай конкретнее

Comments

[Юра]

Сам HTML код и минимальный CSS

[Jimmy Tod]

Так возьми из донора, глянь как там сделано, довольно просто

Answer 3

[frees2]

var idVhod = document.getElementById('idVhod'); function onclickVhod() { idVhod.style.display = (idVhod.style.display == 'inline') ? '' : 'inline';
localStorage.setItem('hide', idVhod.style.display);}if(localStorage.getItem('hide') == 'inline') { document.getElementById('idVhod').style.display = 'inline'; setTimeout(onclickVhod, 5700)}; 
  
// window.localStorage.clear();

#idVhod {position: fixed; z-index: 100;  top:  3em;   left:  0.3em;  display: none;   background-color: rgba(255,255,255,.9);   padding: 0 0.6em 0.6em 0.8em;margin: 0.1em; box-shadow: rgba(0, 0, 128, 0.2) 0.3em -0.3em 0.7em;border-radius: 0.2em;  }
 .Vhod {cursor: pointer; padding: 0 ; display: inline-block;  border: 2px solid #efefef; border-radius: 20%;margin: 8px;background-color: rgba(255,255,255,.4);}
 .Vhod:hover {opacity: 0.7;}

<span class="Vhod" onclick="onclickVhod()"><img  src="24px.svg"> </span> <span  id="idVhod"> ggggggggggggggg11111111<span class="Vhod" onclick="onclickVhod()"> x</span><br>
gggggggggggggggggggggg
</span>