И снова здравствуйте! :)
В предыдущей статье я рассказывал, как с помощью только средств CSS3 сделать простенькое аккордеонное меню. При этом для обработки клика был использован псевдокласс target. В данной же статье пойдёт речь об аккордеонное меню, также выполненном только средствами CSS3, но без использования target, и реагирующему на помещение мышки на пункт меню без клика. При этом для добавления стилей к соответсвующим пунктам меню будет использован другой псевдокласс - nth-of-type, с помощью которого можно получить доступ к элементу на основе нумерации в дереве элементов.
Итак, для начала создадим html-документ:
Пункт 1
Пункт 2
Пункт 3
Пункт 4
Как видно разметка состоит из четырёх групп gigure с описанием figcaption (которые выполняют функцию пунктов меню). А в каждой из групп содержится список со ссылками, которые выполняют функцию подпунктов меню).
В раздел head документа добавим необходимые стили, в которых определим нужные размеры, цвета, время и т.п.
Вот такое несложное меню у нас получилось…
В следующей статье постараюсь рассказать ещё об одном CSS3 аккордеоне без target, но уже с реагированием на клик!
До встречи!
