ilusha_sergeevich 25 мар 2013 в 08:25

Accordion меню на чистом CSS

4 мин

66K

Веб-разработка * CSS * HTML *

Из песочницы

+12

Комментарии 23

balaganski 25 мар 2013 в 08:39

Такая штука называется accordion menu. При чем тут according?

ilusha_sergeevich 25 мар 2013 в 08:45

Ну вообще некоторые называют и according (яндекс надет много результатов, и не видит ошибки), но все же правильнее я думаю Accordion. Спасибо за коммент, переименовал

blaq 25 мар 2013 в 08:45

Анимация будет работать если использовать MAX-HEIGHT

ilusha_sergeevich 25 мар 2013 в 09:02

А зачем max-height, нам бы min-height, а дальше что бы само растягивалось и анимировалось…

blaq 25 мар 2013 в 09:07

Мы максимальной высотой задаем свернутое состояние max-height:0px, а при наведении max-height:999px; при наведении параметр «отпускает» высоту и блок разворачивается в соответствии с содержимым. Transition указывать надо и в свойствах блока и в :hover

Rondo 25 мар 2013 в 08:48

Кстати, NoScript ругается на Clickjacking, но это скорее false-positive из-за изменения объекта, по которому мы вроде не собирались кликать:

[NoScript ClearClick] Swallowed event click on INPUT/0 at http://fiddle.jshell.net/d7WGb/1/show/

Georgy1 25 мар 2013 в 08:56

У меня только одно на уме: «Браво!»

Rastishka 25 мар 2013 в 09:01

Ваш аккордион это ̶б̶а̶я̶н̶ плагиат.

Или отметьте как перевод: tympanus.net/codrops/2012/02/21/accordion-with-css3/ чтобы не смущать публику.

ilusha_sergeevich 25 мар 2013 в 09:07

Обратите внимание на обезличенную подачу текста. Я нигде не написал, что это мой аккордион и не присваивал себе чьи либо лавры.

Rastishka 25 мар 2013 в 09:09

Дык это и есть перевод.
Или напишите «по мотивам».
̶И̶л̶и̶ ̶п̶е̶р̶е̶и̶м̶е̶н̶у̶й̶т̶е̶ ̶к̶л̶а̶с̶с̶ы̶ ̶и̶ ̶т̶е̶г̶и̶ ̶п̶о̶к̶а̶ ̶н̶и̶к̶т̶о̶ ̶н̶е̶ ̶в̶и̶д̶е̶л̶.̶