Sefirut.ru Каталог статей Уроки по html/css Разное

Как сверстать выпадающее меню на CSS

Итак, в этой статье я расскажу об общих сведениях при построении выпадающих меню на CSS и приведу 3 примера построения таких меню. Основная идея выпадающего меню на CSS крутиться вокруг написания CSS-кода с наследованием тегов, псевдо-класса :hover и некоторых CSS-селекторов.
В Internet Explorer версиях ниже 7-й очень ущербная поддержка CSS (не полная поддержка CSS 2.1), и псевдо-класс :hover работает только для ссылок. Поэтому для построения выпадающего меню в IE 6 есть два простых выхода.
Первый — это использовать специальное расширение файлов *.htc, которое майкрософт, видимо, и разработала в своё время чтобы скрыть недостатки своего браузера. Файлы *.htc — это практически чистый Javascript, и поэтому если в браузере он не будет включен, код не будет выполнен.
Второй выход — использовать ссылку (HTML-тег <A>), как родительский контейнер для субменю. Этот способ конечно же не пройдет валидацию W3C, и чтобы можно было размещать «ссылки внутри ссылки» с нормальным отображением в браузерах, нужно каждое субменю «оборачивать» в пустую таблицу.
Стоит также отметить, для устранения всяких глюков для IE 6, нам может пригодиться выражение expression, внутри которого заключается JS-код. Еще, также, все приведенные ниже способы выпадающего меню тестировались с включенным «доктайпом» XHTML 1.0 Transitional и возможно могут не работать без него.

Рассмотрим ниже способ выпадающего одноуровневого меню, который не требует подключения никаких HTC-файлов, работает в IE 6, но не проходит W3C-валидацию:

<style type="text/css">

 .menu1 { position:relative; z-index:100; margin:10px; text-align:left; }

 .menu1 a { padding-bottom:20px; line-height:25px; }

 .menu1 a:hover { cursor:pointer; color:white; }

 .menu1 span { position:relative; display:block; float:left; height:25px; line-height:25px; padding:3px 10px;
background:#e1e1e1; border-left:5px solid white; }

 .menu1 span table { position:absolute; left:0; top:30px; background:#eee; border:1px solid #ccc; border-top:0;
z-index:10; display:none; -display:expression('none'); /* IE 6 fucking bug */ }

 .menu1 span table a { display:block; text-indent:10px; padding:5px 0; margin:2px; background:#aaa; text-decoration:none;
color:white; width:200px; border:0; line-height:120%; }

 .menu1 span table a:hover { background:#000; font-weight:bold; color:white; }

 .menu1 a:hover table /* Opera, IE, Safari */, 

 .menu1 span:hover table { display:block; } /* FF */

 .menu1 .sub { text-decoration:none; }

</style>



<div class="menu1">

 <span><a href="#1">представляюсь</a> </span>

 <span>

 <a href="#2" class="sub">фотографирую ↓

 <table><tr><td>

 <a href="#2-1">люди</a>

 <a href="#2-2">животные</a>

 <a href="#2-3">природа</a>

 <a href="#2-4">техника</a>

 <a href="#2-5">макросъемка</a>

 </td></tr></table>

 </a>

 </span>

 <span><a href="#3">слушаю</a> </span>

 <span><a href="#4">хочу</a> </span>

 <span title="Активный раздел">думаю</span>

</div>

Из-за того что IE 6 не может не глючно убирать или вообще может не убирать подменю для стиля ".menu1 span table" пришлось воспользоваться «хаком» для IE 6 и через выражение expression устанавливать свойство display в none. Дело в том что выражение JS или, как в данном случае, строка, внутри expression, не кэшируется и выполняется постоянно. Поэтому после добавления этого экспрешна, IE 6 стал нормально скрывать выпадающее подменю. Способ хорошо подойдет для несложных одноуровневых меню, если вас не забодит валидация HTML-кода на странице.

Следующий пример выпадающего меню приведен с использованием файла csshover.htc, который написал Peter Nederlof. Он необходим для того, чтобы все HTML-элементы в DOM-дереве документа, после загрузки страницы, обретали также возможность (обрабатывали события onmouseover и onmouseout) использования псевдо-класса :hover для IE 6. Файл этот весит всего-лишь 4.3 Кб и подключается на страницу в CSS файле при помощи вставки body { behavior:url(csshover2.htc); }
Общий CSS и HTML код такого одноуровневого CSS-меню приведен ниже:

<style type="text/css">

 body { behavior:url(csshover2.htc); }

 .menu2 { position:relative; width:204px; padding:15px 0; margin-top:15px; background:#e1e1e1; }

 .menu2 span { position:relative; zoom:1; display:block; margin:5px 0; }

 .menu2 span a { position:relative; display:block; padding-left:40px; font-size:18px; text-decoration:none; width:160px;
overflow:hidden; letter-spacing:-1px; }

 .menu2 span span { position:absolute; top:0; right:-212px; width:200px; overflow:hidden; padding:10px; display:none; }

 .menu2 span span a { color:black !important; padding:0; background:none; position:relative; z-index:10; padding:2px 0; }

 .menu2 span span a:hover { text-decoration:none; }

 .menu2 span span i { background:silver; position:absolute; left:0; top:0; width:100%; height:100%; -moz-opacity:.8; opacity:.8;
-webkit-opacity:.8; filter:alpha(opacity=80); -height:expression(this.parentNode.offsetHeight); /* IE 6 height by parent block */ }

 .menu2 span:hover span { display:block; }

 .menu2 span:hover a { color:#7D272F; text-decoration:underline; }

</style>



<div class="menu2">

 <span><a href="#1">Главная</a></span>

 <span><a href="#2">On-line заказ</a></span>

 <span>

 <a href="#3" class="sub">Портфолио →</a>

 <span>

 <a href="#3-1">Шторы для гостиной</a>

 <a href="#3-2">Шторы для детской</a>

 <a href="#3-3">Корпоративный пошив</a>

 <a href="#3-4">Аксессуары</a>

 <a href="#3-5">Другое</a>

 <i class="alpha-bgc"></i>

 </span>

 </span>

 <span><a href="#4">Стили</a></span>

 <span><a href="#5">Сотрудники</a></span>

 <span><a href="#6">Сотрудничество</a></span>

 <span><a href="#7">Адреса салонов</a></span>

</div>

Но и тут, конечно-же, не обошлось без «выкрутасов» всеми любимого Internet Explorer 6. Но впринципе, как такового меню, это не касается. Я просто решил сделать полупрозрачную подложку для выпадающего субменю, и IE6 не захотел растягивать абсолютный блок с полупрозрачностью по всей высоте родительского блока.
Пришлось ~~засунуть ему кочергу в задницу~~ ему немного помочь, и опять воспользоваться услугами выражения expression, для получения высоты родительского блока. Приведенный выше HTML-код меню отлично проходит валидацию, если что. А если ничего, то пользуйте первый способ.

В третьем способе, будет реализовано многоуровневое выпадающее CSS-меню, без попыток реанимации его работы в IE 6. Кому это надо может заняться его доработкой.
В этом примере используется селектор CSS ">", что в примере: "A > B", означает установку стилей для "B", если он является непосредственным потомком "A".
Как и для всех приведенных выше меню, нетрудными манипуляциями с CSS-кодом, можно привести меню к нужному визуальному отображению. А вот и сам код третьего варианта меню:

<style type="text/css">

 .menu3 { position:relative; display:block; width:800px; height:30px; color:black; margin:20px; margin-left:0; }

 

 .menu3 .submenu, .menu3 div { position:relative; width:200px; background:#eee; float:left; margin-right:1px;
text-indent:20px; display:block; }

 .menu3 .submenu div { position:absolute; left:0; -display:none; }

 .menu3 .submenu div div { left:auto; right:-201px; margin-top:-31px; }

 .menu3 .submenu a { display:block; height:100%; color:black; text-decoration:none; padding:5px; clear:both; }

 .menu3 .submenu a:hover { background:#666; font-weight:bold; color:white; }

 

 .menu3 .submenu .submenu, .menu3 .submenu .submenu > div { background:#ddd; }

 .menu3 .submenu .submenu .submenu, .menu3 .submenu .submenu .submenu > div { background:#ccc; }



 .menu3 .submenu > a:after { content: " >>"; }

 .menu3 .submenu > div { display:none; }

 .menu3 .submenu:hover > div { display:block; }

</style>



<div class="menu3">

 

 <!-- первый элемент меню -->

 <span class="submenu">

 <a href="#1_outer">Test item 1</a>

 <div>

 <a href="#11_inner">Test item 1-1</a>

 <a href="#12_inner">Test item 1-2</a>

 <span class="submenu">

 <a href="#13_inner">Test item 1-3</a>

 <div>

 <a href="#131_inner">Test item 1-3-1</a>

 <a href="#132_inner">Test item 1-3-2</a>

 <a href="#133_inner">Test item 1-3-3</a>

 <span class="submenu">

 <a href="#134_inner">Test item 1-3-4</a>

 <div>

 <a href="#1341_inner">Test item 1-3-4-1</a>

 <a href="#1342_inner">Test item 1-3-4-2</a>

 </div>

 </span>

 <a href="#135_inner">Test item 1-3-5</a>

 </div>

 </span>

 <a href="#14_inner">Test item 1-4</a>

 <a href="#15_inner">Test item 1-5</a>

 </div>

 </span>

 

 <!-- второй элемент меню -->

 <span class="submenu">

 <a href="#2_outer">Test item 2</a>

 <div>

 <a href="#21_inner">Test item 2-1</a>

 <span class="submenu">

 <a href="#22_inner">Test item 2-2</a>

 <div>

 <a href="#221_inner">Test item 2-2-1</a>

 <a href="#222_inner">Test item 2-2-2</a>

 <a href="#223_inner">Test item 2-2-3</a>

 </div>

 </span>

 <a href="#23_inner">Test item 2-3</a>

 <a href="#24_inner">Test item 2-4</a>

 </div>

 </span>

</div>

Если возникли вопросы при прочтении этой статьи, или в общем и в целом, как обычно, велкам в комменты.
Также посоветую один интересный сайт, посвященный самым разным CSS-меню: http://www.cssplay.co.uk/

Категория: Разное | Добавил: Admin (10.10.2010)

Просмотров: 4019 | Рейтинг: 0.0/0

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

А вы знаете что

Для комфортного отображения сайта:
1) Лучше пользоваться браузерами Opera 9+, Mozilla Firefox 3+ или Internet Explorer 8+.
2) Лучше монитор с разрешением не меньше 1024x768 (ширина x высота) пикселей.
3) Если пользоваться программой Adguard вы можете сэкономить на трафике и перестанете видеть не нужную рекламу !
Отличная программа для блокировки всякой рекламы на сайтах !
Ссылка на сайт программы
Ссылка на установочный пакет программы

Свежие новости:

Переезд сайта (0)

[02.04.2011]

Акция! Добавлен новый вариант С... (0)

[15.01.2011]

Обновление нашего портфолио (0)

[13.01.2011]

Новые темы форума: