<li id="three" class="cloud"><a href="#three">Cloud<span>58</span></a></li>
<li id="two" class="mail"><a href="#two">Mail<span>26</span></a></li>
<li id="one" class="files"><a href="#one">My Files<span>495</span></a></li>
Начало создания этого меню производится из прописывания тега маркированного списка и <span> тега. Каждому элементу списка <li> задается идентификатор id и класс. Для открытия меню при нажатии используется целевой селектор (:target selector). Чтобы вышеуказанный селектор работал, необходимо предварительно прописать ссылку с указанием на идентификатор, что в свою очередь в результате нажатия на нее отобразит id как целевой селектор. Эти операции позволят нам видеть ссылки подменю, другими словами, разворачивание меню производится в ответ на нажатие по определенному пункту.
Данный урок посвящен раскрытию технологии создания Аккордеон меню с помощью чистого CSS3. Особенность этого меню заключается в его корректной работе в браузерах и устройствах, поддерживающих целевой псевдо-класс селектор (:target pseudo-class selector.).
[Tutorial] Верстка меню Аккордеон с помощью CSS 3
Загрузка. Пожалуйста, подождите...
[Tutorial] Верстка меню Аккордеон с помощью CSS 3 - scanread.name
Комментариев нет:
Отправить комментарий