ВизаВиза Переводчик, разговорник, уроки греческогоПеревод Транспорт, таксиТакси ЮристАдвокат-юрист КомпанияКомпания ДоверенностьДоверенность СертификатСертификат АпостильАпостиль КурьерКурьер НотариусНотариус БукетБукет ВизаШенген Свадьба и регистрация бракаСвадьба
Кипрский флагКипр +357-96-38-39-40      Российский флагМоб. +7 965 2 38-39-40      Украинский флагUA +38-073-738-39-40     WhatsApp WhatsApp     Messenger Messenger     Отправить сообщение Сообщение     Чат Чат     email info@prokipr.ru

Выпадающее меню по клику средствами CSS без JavaScript

CSS позволяет реализовать выпадающее меню по клику без JavaScript. Сделать это можно c помощью CSS псевдоклассов :focus, :active, :hover и некоторых маленьких хитростей.

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

<a class="main-item" href="javascript:void(0);" tabindex="1" >Открыть подменю</a>
<ul class="sub-menu">
<li><a href="#1">подпункт 1</a></li>
<li><a href="#2">подпункт 2</a></li>
<li><a href="#3">подпункт 3</a></li>
</ul>

Список с классом «sub-menu» по-умолчанию будет скрыт, и будет появляться при получении фокуса соответствующим пунктом главного меню с классном «main-item».
В итоге мы получим примерно такой css-код:


.sub-menu
{
display: none;
}
.main-item:focus ~ .sub-menu,
.main-item:active ~ .sub-menu,
.sub-menu:hover
{
display: block;
}

Вот и все, никакой магии и javascript-а, только ловкость рук и css.

Демонстрация:

Открыть подменю по щелчку

Эта реализация будет работать во всех современных веб-браузерах и в IE7+ (в IE6 не проверялось).

А теперь немного моментов на которые следует обратить внимание:



Кипрский флагКипр +357-96-38-39-40      Российский флагМоб. +7 965 2 38-39-40      Украинский флагUA +38-073-738-39-40     WhatsApp WhatsApp     Messenger Messenger     Отправить сообщение Сообщение     Чат Чат     email info@prokipr.ru

ГлавнаяКонтакты
Copyright © KrAn. 2004-2021. All rights reserved.