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

Question

[mr_firuzinho]

Здравствуйте, на сайте есть меню:

//Чекбокс нужен для открытия меню, через :checked
                       <input type="checkbox" id="hmt" class="hidden-menu-ticker">
                        //Гамбургер, это три линии, обычно используемые в качестве кнопки для открытия меню
			<label class="btn-menu" for="hmt">
				<span class="first"></span>
				<span class="second"></span>
				<span class="third"></span>
			</label>
                       //Это само меню
			<ul class="hidden-menu">
                                ...
                           //три точки означают, что тут много чего, что не влияет на суть вопроса
                         </ul>

У этого меню есть стили, ключевые:

position: fixed;
right: -200px;

При нажатии на гамбургер (когда чекбокс активируется), меню появляется путем зануления "right" вот так:

.hidden-menu-ticker:checked ~ .hidden-menu {
			      right: 0;
			}

То есть функционал полностью написан на css.

Задача:
Как сделать, чтобы при нажатии на пункты(ссылки) меню, оно(меню) закрывалось ?

Писал и js, и jQ код - не работает. Версия jq соответствующая. Код вставлял и в хедер, и футер.
P.S.
прежде, чем писать, дня 2 искал в гугле не пишите пожалуйста "Погугли". Вообще это слово в тостере лишает смысл тостера.

Comments

[Stalker_RED]

Вы попробуйте перечитать что вы написали. Если коротко, то смысл сводится к "где-то что-то не работает".

Соберите может пример в песочнице.

[E]

очередная поделка на MegaMenu.... потом говорят что вп тупой и лучше его не использовать, конечно, когда плагины типа мегаменю и элементор использованы. по сабжу сказать нечего, кроме того что, я как то часа 4 убил что бы пофиксить творение на подобном плагине.

[ⓒⓢⓢ]

он плавно переходит по нужному блоку, но не скрывается.

Значит событие клика не доходит до label и соответственно мешает снять выделение с чекбокса.
Смотри где прерывается событие ...

Можешь ещё попробовать чтото такое сделать для проверки:

<span class="first" onclick="$('#hmt').click()"></span>
<span class="second" onclick="$('#hmt').click()"></span>

Насколько помню inline объявления имеют больший приоритет

[mr_firuzinho]

Stalker_RED, Попробуйте сейчас что-то понять, пожалуйста. Вроде старался

[mr_firuzinho]

JRK_DV, не доходит, т.к ссылки меню находятся за пределы label.

[Stalker_RED]

mr_firuzinho, все равно непонятно. Вот я собрал пример за вас: https://jsfiddle.net/gtdxoa6u/
так как вы выложили довольно мелкий огрызок кода некоторые куски пришлось самому дофантазировать.

И вроде как эта штука работает.
Вы там пишете про какие-то ссылки, хидер, футер и jQuery, но эта хрень работает без них. Прикольно, да?

В чем проблема - непонятно. Я верю что у вас где-то что-то не работает, но где оно не работает, и что именно не работает - без телепатии не узнать.

[mr_firuzinho]

Stalker_RED, извиняюсь если ещё раз не понятно, я ещё новичек в этом деле. Просто меню в wp формируется через функцию, а та в свою очередь ( в моем случае) вызывает обертку MegaMenu:
https://jsfiddle.net/gtdxoa6u/3/
Попробуйте нажать на ссылки, меню остается открытым, мне нужно, чтобы оно закрывалось при нажатии. Я очень сильно надеюсь, что наконец разберетесь. Спасибо!

<ul class="hidden-menu">
<li id="nav-menu-item-280-5ab7b7f38d34a" class="mega-menu-item nav-item menu-item-depth-0"><a href="#about" class="menu-link main-menu-link item-title"><span>О НАС</span></a></li>
<li id="nav-menu-item-281-5ab7b7f38d4ae" class="mega-menu-item nav-item menu-item-depth-0 current-menu-ancestor current-menu-item"><a href="#course" class="menu-link main-menu-link item-title"><span>КУРСЫ</span></a></li>
<li id="nav-menu-item-282-5ab7b7f38d5d0" class="mega-menu-item nav-item menu-item-depth-0"><a href="#master" class="menu-link main-menu-link item-title"><span>МАСТЕР-КЛАССЫ</span></a></li>
<li id="nav-menu-item-283-5ab7b7f38d6f2" class="mega-menu-item nav-item menu-item-depth-0"><a href="#vacancies" class="menu-link main-menu-link item-title"><span>ТРУДОУСТРОЙСТВО</span></a></li>
<li id="nav-menu-item-284-5ab7b7f38d80d" class="mega-menu-item nav-item menu-item-depth-0"><a href="#migrate" class="menu-link main-menu-link item-title"><span>ИНОГОРОДНИМ</span></a></li>
<li id="nav-menu-item-285-5ab7b7f38d926" class="mega-menu-item nav-item menu-item-depth-0"><a href="#akcii" class="menu-link main-menu-link item-title"><span>АКЦИИ</span></a></li>
<li id="nav-menu-item-286-5ab7b7f38da3b" class="mega-menu-item nav-item menu-item-depth-0"><a href="#contacts" class="menu-link main-menu-link item-title"><span>КОНТАКТЫ</span></a></li>
</ul>

[Stalker_RED]

mr_firuzinho, так? https://jsfiddle.net/gtdxoa6u/4/

[mr_firuzinho]

Stalker_RED, да, именно, Спасибо большое!!!

Answer 1

[rosaline]

https://www.youtube.com/watch?v=YVBOQXx5kdo&index=...
на 3:42 минуте ответ на твой вопрос))