Выпадающее меню

[Igor_Dp]

Всем доброго дня! Подскажите, будьте добры, как правильно реализовать д выпадающее меню такого образца (https://artmobile.ua/shop/category-1/category991 смотрим раздел "Каталог"). То бишь, нажимаем на пункт меню и открывается меню с подпунктами. Нажимаем еще раз - подпункты пропадают. У меня получилось сделать не при клике, а только при наведении. Соответственно, если курсор убрать - подпункты снова скроются. Вот кусок кода (https://jsfiddle.net/eoL5bLmg/). Прошу помочь, даже если это банально и просто. Я с этим застрял...

[Endorphin]

Метод то поинтересней конечно, а разбираетесь ли вы в JS если сами этого не сделали, я скинул вам самый простой вариант на обычном CSS зачем JS использовать для таких банальных вещей?)))) квадратик убирается просты display:none для input, ознакомьтесь https://github.com/you-dont-need/You-Dont-Need-JavaScript, и Светлане советую ознакомиться))))

[Endorphin]

Сделай чекбоксом главную кнопку, и когда она :checked появляется меню. 

https://jsfiddle.net/zzw687d8/

[Igor_Dp]

Благодарю за совет. А как тогда убрать квадратик этот??? Что-то никак не получается. 

 

И сразу еще - а как сделать, чтобы плавно открывалось меню? transition, как я понял, здесь не поможет.

[Igor_Dp]

Да. И еще, у меня подменю выпадает, только когда я галочку ставлю. Все логично, судя по коду. Только в песочнице работает даже при клике на слово, а у меня в коде только при клике на сам input

[Svetlana_P]

Здравствуйте! Можете по этому примеру https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_animate сделать. Вам никто не мешает вместо текста поставить ссылки или какие угодно теги (список и т.п.) https://jsfiddle.net/Benedetta/14fe5t05/ 

[Igor_Dp]

Благодарю за совет. Этот метод поинтересней будет.

[Igor_Dp]

Благодарю за ссылочку. Довольно интересный материал. Даже не думал, что такое можно без JS сделать)

[Endorphin]

https://jsfiddle.net/zzw687d8/ вот вам без JS

Лайк если понравилось

[Svetlana_P]

Endorphin, не знала о таком хаке, спасибо за информацию Как оказалось, чекбоксом можно много чего делать, и JS не понадобится.

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

[Schamil74]

Таким образом можно стилизовать radio и checkbox

[Endorphin]

23 часа назад, Svetlana_P сказал:

Endorphin, не знала о таком хаке, спасибо за информацию Как оказалось, чекбоксом можно много чего делать, и JS не понадобится.

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

Да даже не знаю какие минусы в таком случае могут быть, мы много чего используем не по назначению когда верстаем, так что если уже такая библиотека создана, значит приемы не осуждаемы, можете еще посмотреть http://100dayscss.com интересные челендж был

[Svetlana_P]

Действительно очень интересные штуки, поизучаю. Ну и Ваш посыл понятен: не лепить JS, даже простейший, если можно обойтись без него.