Выпадающие меню с помощью CSS
Вот пример действующего меню.
Создаем меню
Первым и самым важным этапом создания нашего меню является построение его структуры. Лучше всего делать это, используя ненумерованный список, в котором размещены подменю, выступающие как списки в рамках пунктов родительского списка. Звучит заумно? Фактически это очень просто:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li>
<a href="#">History</a>
</li> <li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
Вот так: простой HTML код, доступный и легко редактируемый.
Наводим красоту
Взгляните на приведённый выше пример. Вы увидите довольно скучный список элементов. А я обещал вам, что он будет симпатичным! Давайте-ка добавим немного стилей.
Первым делом удалим отступы и маркеры в ненумерованном списке, а затем зададим ширину пунктов меню. ul { margin: 0; padding: 0; list-style: none; width: 150px; }
Теперь нам надо задать положение элементов списка. К счастью, они по умолчанию будут расположены вертикально, что нам и нужно. Однако, нам необходимо задать значение для position как relative, и всё потому, что нам нужно будет относительно их абсолютно позиционировать подменю.
ul li { position: relative; }
Берёмся за подменю. Мы хотим, чтобы каждое подменю появлялось справа от пункта родительского меню в тот момент, когда над этим пунктом находится курсор.
li ul { position: absolute; left: 149px; top: 0; display: none; }
Используя атрибуты "left" и "top", мы можем абсолютно позиционировать каждое субменю в рамках пункта меню предка. Вы заметите, что я задал атрибуту "left" значение в 149px (одним пикселем меньше, чем ширина родительского пункта), это позволяет субменю перекрывать главное меню, не создавая при этом двойной границы. (Поймёте, о чём я, чуть позже.)
Нам надо также присвоить атрибуту "display" значение "none", так как мы не хотим видеть подменю при открытии страницы.
Что ж, у нас теперь есть каркас, но он всё ещё выглядит невзрачно. Давайте зададим стили для ссылок.
ul li a { display: block; text-decoration: none; color: #777; background: #fff; padding: 5px; border: 1px solid #ccc; border-bottom: 0; }
Я применил к ссылкам стили по своему вкусу, но их можно легко поменять на те, что вам нравятся. Важно присвоить атрибуту "display" значение "block", ведь мы хотим, чтобы каждая ссылка занимала всё отведённое для неё место внутри содержащего её элемента списка.
Итак, выглядит уже получше, хотя пользователи Internet Explorer для Windows могут с вами и не согласиться. К несчастью, IE Win понимает разрывы строк между ссылками в нашем красиво оформленном HTML коде как незаполненное пространство. Из-за этого в IE вы видите, что ссылки не прилегают тесно одна к другой. Однако этот баг IE можно обойти.
/* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; } * html ul li a { height: 1%; } /* End */
Выше мы применили трюк Holly Hack, которые прячет эти правила от всех браузеров, кроме IE Win. Отлично. Обратите внимание, что было добавлено правило height: 1%. К сожалению (опять!), борясь с одной ошибкой, мы выткнулись на другую, для борьбы с которой требуется задать значение для атрибута "height", чтобы ссылки отображались как блочные элементы.
Также обратите внимание, что мы забыли "закрыть" блок меню. Добавим дополнительно нижнюю границу к каждому элементу списка. Итак, вот полный список стилей для ul:
ul { margin: 0; padding: 0; list-style: none; width: 150px; border-bottom: 1px solid #ccc; }
Все сложилось удачно, и теперь все могут увидеть красивое, но нефункционирующее меню.
Заставим его работать
Продолжение
Данная статья разрешена для публикации только на http://visavi.net/