Jump to content
  • 0

Как сделать выпадающее меню при нажатии (не при наведении)


Alfa2015
 Share

Question

Как сделать выпадающее меню при нажатии, а не при наведении?
То есть, вот пример, меню: http://cssor.ru/examples/cssmenu/cssmenu.htm здесь меню выпадает при наведении.

А мне нужно, чтобы нажав на пункт меню отобразились подпункты и так и оставались.При наведении не надо.

Ставила свойство active, но оно при нажатии появляется и тут же исчезает.

Edited by Alfa2015
Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

Можно при помощи :target

#submenu{display:none}#submenu:target{display:block}
<a href="#submenu">something</a>

Прадва IE до 9й версии этого не ест, но он вообще почти ничего не ест)

(хотя ест ли в девятой не знаю, может и там нет)

Link to comment
Share on other sites

  • 0

Мне кажется здесь не обойтись без Javascript. Дело в том, что при первом клике по пункту меню оно открывается, а при втором - не закрывается. Это вызовет у пользователя недоумение и раздражение. 

Link to comment
Share on other sites

  • 0
оно при нажатии появляется и тут же исчезает

 

В принципе, существует вот такой финт/хак, чтобы это обойти. Но да, с JS проще и логичнее, всё-таки это уже конкретное поведение, а не просто состояние.

Link to comment
Share on other sites

  • 0

Мне кажется здесь не обойтись без Javascript. Дело в том, что при первом клике по пункту меню оно открывается, а при втором - не закрывается. Это вызовет у пользователя недоумение и раздражение.

:target закрывется при нажатии на любую другую ссылку, даже вымышленную.

Так что закрыть его проще простого: помещаете в субменю невидимый элемент с выдуманной ссылкой (например <a href="#close">, при этом элемента "close"не существует, это рендомное слово). Вуаля, при нажатии на невидимый элемент субменю пропадает. Все что еще осталось - это спозиционировать невидику на место кнопки меню.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy