Выпадающее меню на CSS

Новые сообщения · Участники · Правила форума · Поиск · RSS

Страница 1 из 1
1

Выпадающее меню на CSS (Меню без использования JavaScript)

Выпадающее меню на CSS

redroom · Offline

Добавлено 26.07.2011 в 22:56 · Пост #1

Сообщений: 9

Награды: 10

Репутация: 5

Данная статья предназначена для новичков в CSS, желающих научиться делать красивые меню без использования JavaScript, сохраняя при этом чистый код HTML-страниц. Я постараюсь объяснить каждое применяемое правило, показывая промежуточные результаты.

Начнем мы с семантической разметки. Наше меню, содержащее сразу три уровня — это простой ненумерованный список, а каждое подменю в нем — это вложенный список. Такой подход имеет ряд преимуществ:

-Код вашего меню занимает мало места
-Меню становится доступным для поисковиков и альтернативных клиентов
-Вы разделяете содержимое и представление, контролируя оформление только при помощи CSS

В HTML это выглядит примерно так:

Code

<ul id="nav">
     <li><a href="#null">Домой</a></li>
     <li><a href="#null">Каталог</a>
       <ul>
         <li><a href="#null">Вся продукция</a>
           <ul>
             <li><a href="#null">По дате</a></li>
             <li><a href="#null">Производители</a></li>
             <li><a href="#null">Другое</a></li>
           </ul>
         </li>
       </ul>
     </li>
     ...
</ul>

Пусть вас не пугает вложенность списков. Главное — следить за правильностью открытия/закрытия тегов. В частности, каждый вложенный тег <ul> должен содержаться внутри тега <li>.
Теперь мы добавим несколько кусочков CSS в наш код:

Code

#nav, #nav ul {
     list-style: none;
     margin: 0;
     padding: 0;
     border: 1px solid #000;
     background: #515151;
     float: left;
     width: 100%;
}
#nav li {
     float: left;
     position: relative;
     background: #515151;
     back\ground: none;
}
#nav li ul {
     display: none;
}

Этими тремя правилами мы сделали следующие вещи:

Так как все элементы списка <ul id="nav"> теперь «плавающие», то сам список «схлопывается». Это происходит из-за невозможности вычислить реальную высоту элемента, который содержит другие «плавающие» элементы.

Для борьбы с этой напастью существует несколько методов, однако они могут не работать в новом IE 7. Поэтому здесь я решил использовать метод FNE, заключающийся в присвоении свойства float:left самому контейнеру. Это избавляет нас от «схлопывания» списка, но заставляет нижележащие элементы обтекать меню справа. Именно поэтому мы указываем ширину для всего меню 100% — чтобы справа просто не оставалось места.
Добавим немного оформлениянашим ссылкам:

Code

#nav a {
     color: #fff;
     text-decoration: none;
     display: block;
     width: 120px;
     padding: 4px 10px;
     background: url(dot.png) repeat-y right;
}
#nav a:hover {
     color: #000;
     background: #ccc;
}
#nav li:hover {
     background: #333;
}

Первым правилом мы оформили ссылки (чтобы они больше походили на кнопки):

Мы дописываем к уже существующему правилу:

Code

#nav li ul {
display: none;
}

следующие инструкции:

Code

#nav li ul {
     display: none;
     position: absolute;
     background: url(fone-tr.png);
     padding: 8px 0;
     width: 138px;
}

Выражение position:absolute служит для абсолютного позиционирования подменю относительно элемента <li> верхнего уровня.

Code

#nav li li a {
     width: 118px;
     background: none;
}
#nav li:hover ul {
     display: block;
}

Вся магия выпадающего меню заключена в строке display:block для #nav li:hover ul. Именно она заставляет подменю «появиться» при подводе курсора к ссылке, сменяя ранее установленный режим display:none:

Code

#nav li:hover li ul {
     display: none;
     width: 138px;
     top: -9px;
     left: 133px;
}
#nav li:hover li:hover ul {
     display: block;
}

Ширина нашего подменю равна 138 пикселям из-за того, что мы вычитаем 2 пикселя от границ с каждой стороны: 140 – 1 – 1 = 138 пикселей.

Селектор #nav li:hover li ul оказывает влияние на подменю 3-го уровня. Мы его сдвигаем влево на ширину 133 пикселя (величина чисто эмпирическая), а также немного вверх (чтобы оно оказалось на одном уровне с активной ссылкой). Теперь, при наведении мышки, наше подменю будет выскакивать справа от ссылки.

Фактор IE
Жизнь многих веб-разработчиков стала бы проще если бы не было Internet Explorer. Ситуация начинает улучшаться в связи с выходом седьмой версии, но до повсеместного ее распространения еще очень далеко.

В ранних версиях IE псевдокласс hover поддерживается только для элемента <a>. В нашем же случае это требуется для элемента списка <li>. Поэтому мы будем использовать простую функцию JavaScript для нужной нам реакции на подведение мышки:

Code

Это позволяет «прицепить» класс jshover к любому элементу <li>, над которым проходит курсор. Эта функция работает только в Internet Explorer — для других браузеров она просто не нужна.

Теперь, чтобы меню заработало в IE, добавим к четырем уже существующим правилам по дополнительному селектору li.jshover:

Code

#nav li:hover,
#nav li.jshover {
     ...
}
#nav li:hover ul,
#nav li.jshover ul {
     ...
}
#nav li:hover li ul,
#nav li.jshover li ul {
     ...
}
#nav li:hover li:hover ul,
#nav li.jshover li.jshover ul {
     ...
}

---------------------------------------------------
Дополнительная информация

Источник

(RU)

Выпадающее меню на CSS (Меню без использования JavaScript)

Страница 1 из 1
1

Дизайн сайта by Redroom