Как сделать кнопку Гамбургер для открывания меню?

Question

[Сергей Кореневский]

Коллеги, Молю помогите. Имею большой опыт. Но кажется с простой задачей справится не могу.
-Имеется в углу экрана кнопка гамбургер.
-При нажатии на которую открывается меню.
Работало просто. Делаю любой тег в виде кнопки, и вешаю на него :HOVER.
Меню же открывается после наведения на тег в виде кнопки.
То теперь надо усложнить задачу. надо чтобы после открытия меню тег в виде кнопки превращался в кнопку с крестиком.
Т.е. надо так чтобы после срабатывания :HOVER, тег само собой меняет иконку, но при этом чтобы при нажатии на иконку меню закрывалось.

<div class=menu>
	<div class=icon>
		<ul>
			<li><a>Пункт меню 1
			<li><a>Пункт меню 2
		</ul>
	</div>
</div>

.icon{
	width: 40px; height: 40px;
	position: relative;
}
.icon ul{
	position: absolute;
	top: 100%;
	display: none;
}
.icon:hover{
	display: block;
}

Как видно простая схема открывания меню при наведении.
.
Но как сделать чтобы изначальная иконка меняла свое поведение после клика на открытие меню?
Кликабельность иконки все равно из чего делать, из внутреннего DIV или из внешнего значения не имеет.

Добавлено:
хочу сделать меню для смартфона
https://gesor.ru/index.php
Там слева открывается гамбургер на маленьком экране
.
суть в том что сейчас клик пальцем по экрану в пустое не активное место расценивается как ховер.
ну в общем
при первом клике пальцем на гамбургере открывается меню. А при втором клике на гамбургере меню должно закрыватся

PS сделать без JS и без CHECKBOX

Comments

[Kvason]

почему просто не сделать блок кнопки, блок меню и вешать событие на нажатие?

[Semantic.Moscow]

Kvason, второй час ночи воскресенья, вот почему.
ну и всегда хочется обойтись без JS,
особенно если точно знаешь, что это возможно

[John Didact]

Kvason, я однажды извратился с этим https://rud.social
Смотреть надо со Смарта или в браузере выставить длину менее 500px

[Сергей Кореневский]

Semantic.Moscow, Вы все правильно поняли. Если бы в каждом случае когда возникают затупы делал как знаешь, то из сайта бы бполучалась бы хрень из JS.
Поэтому всегда хочется обойтись без JS, да и пробрасывать JS одельным файлом в CMSке, каждый раз думая куда же его засунуть, не хочется.

[Kvason]

Сергей Кореневский, Semantic.Moscow, не знаю, как по мне подобные ищвращения в css это костыли

[Kvason]

Сергей Кореневский, не всегда же все ток цсс, жс для этого и придумали чтобы добавлять динамику и логику, конечно паралаксы можно делать просто фикс. фоном, а какие-нибудь фигуры с анимациями свгшками, а не канвасом

[Сергей Кореневский]

Kvason John Didact Semantic.Moscow

хочу сделать меню для смартфона
https://gesor.ru/index.php
Там слева открывается гамбургер на маленьком экране
.
суть в том что сейчас клик пальцем по экрану в пустое не активное место расценивается как ховер.
ну в общем
при первом клике пальцем на гамбургере открывается меню. А при втором клике на гамбургере меню должно закрыватся

[Kvason]

Сергей Кореневский, как по мне костыль нереальный, лучше использовать жабаскрипт

[John Didact]

Сергей Кореневский, а маленький онклик — проблема? Я «решил» это так (на сайте выше показано):

<a onClick='document.getElementById("close_menu").focus()'></a>

#close_menu — это элемент вне фокуса менюшки

[Сергей Кореневский]

John Didact, Проблема. Использую CMS Joomla, не хотелось бы делать переопределения МАКЕТОВ модулей менюшек.

[cssfish]

что такое "тег в виде кнопки" ?!

[Сергей Кореневский]

cssfish,

.menu{
width: 40px; height: 40px;
border-radius: 4px;
box-shadow: 0 0 3px gray;
}
.menu:hover{
trasform: scale(1.2);
}

Answer 1

[Semantic.Moscow]

не внимательно прочитал, а потому ранее фигню написал, извините.
не хочу думать про hover и кликабельность иконки.

предложу обойтись вообще без всех этих div`ов и пр.

<details><summary>показать меню</summary><ul>
<li><a>Пункт меню 1<li><a>Пункт меню 2</ul></details>

иконку сами приделайте вместо стандартной.

Comments

[Сергей Кореневский]

Спасибо, идея хорошая. Я уже хотел применить. Но вот она не анимируется.

Answer 2

[cssfish]

Т.е. хотите сделать закрытие по клику без js.
Скрытый input type="checkbox" в помощь. Но тогда и скрывать и показывать надо по клику, без hover

Comments

[Сергей Кореневский]

ДА, именно, без JS и без CHECKBOX.
С JS или CHECKBOX я и сам знаю как делать. Большой опыт имею. Я именно так и написал что имею опыт.

[cssfish]

Сергей Кореневский, про опыт я все понял. все понял. Чем чекбокс не устраивает, не понял. В условиях вашей задачи речи про него не было. Удачи.