www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.

Веб-дизайн и поисковая оптимизация

Логотип Софт

Создание меню для сайта

Выпадающее меню. Создание с помощью HTML и CSS

При разработке навигации для сайтов широко применяют выпадающие меню (Drop-Down Menus). При этом частенько наблюдается некорректный их вывод в браузерах: искажения, произвольное изменение положения или мерцание меню. Иногда за нужной строчкой приходится гоняться, как за убегающим тараканом. Между тем, классический вариант выпадающего меню, выполненный простыми средствами HTML и CSS, практически лишен этих недостатков. Создание такого выпадающего меню, как горизонтального, так и вертикального, не составляет большого труда.

Рассмотрим последовательность действий по созданию выпадающего меню. Сначала напишем простое меню в виде ненумерованного списка из трех пунктов:
1) обычная ссылка,
2) строка текста - при наведении курсора на неё должно выпадать меню из 2 ссылок,
3) картинка, при наведении на которую должно выпадать меню из 3 ссылок.
Ниже показан HTML-код такого списка, справа от которого - результат его вывода в браузере. Слово Указатель заключено в тег <label> </label>, чтобы курсор при наведении на него сохранял вид стрелки, а не менялся в некоторых браузерах на вертикальную черту с засечками (стиль курсора - "cursor:text", см. статью "Курсор как элемент веб-дизайна").

<ul>
<li><a href="#">Ссылка</a></li>
<li> <strong><label>Указатель</label></strong>
<ul><li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
</ul></li>
<li><img src="images/avto.png" alt="Автомобиль" width="82" height="22" vspace="2" border="0" />
<ul><li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
</ul></li>
</ul>

Ссылка

      • Ссылка 1
      • Ссылка 2

Автомобиль
      • Ссылка 3
      • Ссылка 4
      • Ссылка 5

С помощью правил CSS удалим отступы и маркеры в созданном ненумерованном списке и зададим ширину пунктов меню 150px.

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}

Ссылка

Ссылка 1
Ссылка 2
Автомобиль
Ссылка 3
Ссылка 4
Ссылка 5

Будьте внимательны при вставке правил CSS, чтобы они не повлияли на все ненумерованные списки на вашем сайте. Можно, конечно, вставить их в текущую страницу перед тегом </head> внутрь контейнера<style type="text/css">... </style>, но лучше оформить отдельным стилевым файлом, используя классы и идентификаторы. Для этого достаточно, например, заключить выпадающее меню в тег <div class="dropmenu" >....</div>, где класс "dropmenu" задается созданными нами правилами CSS:
.dropmenu ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
...и так далее.

Далее задаём положение элементов списка. По умолчанию, они уже расположены вертикально друг под другом, так как заданы тегом <ul>. Выпадающее меню позиционируем относительно основного списка с помощью атрибутов "left" и "top". Можно сделать выпадающее меню справа, слева, сверху или снизу от блоков основного списка, установив соответствующие абсолютные значения отступов в пикселях.

Для скрытия выпадающего меню используем правило display: none; а чтобы меню появлялось при наведении курсора - li:hover ul { display: block; }. Как всегда, ложку дегтя нам добавляет Internet Explorer версий 7 и ниже. Чтобы он корректно выводил наше выпадающее меню требуются "химические" добавки в правила CSS (с помощью, так называемых, "хаков"), которые игнорируются другими браузерами. Для IE7 они вводятся, например, с помощью комбинации *+html и др. Более подробно об этой "химии", а также о том, как обеспечить работоспособность выпадающего меню в совсем старых браузерах, можете посмотреть, например, в статьях "Как написать свойства css, работающие только в IE" (автор Крис Койер) и "Выпадающие меню с помощью CSS" (автор Ник Ригби).

Кроме того, нежелательно прописывать для гиперссылок в выпадающем меню атрибут title, так как, во-первых, эти подсказки часто закрывают строчки, а во-вторых, в некоторых браузерах (Firefox3.5) при попадании указателя мыши на такую подсказку выпадающее меню пропадает.

Окончательно мы имеем следующий набор правил CSS для выпадающего меню (для наглядности введены границы блоков):

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
ul li {
position: relative;
border: 1px solid ;
padding:10px;
}
*+html ul li { float: left; }
*+html ul li { width: 100%; }
li ul {
position: absolute;
left: 149px;
top: 0px;
display: none;
width: 100px;
}
ul li a {
display: block;

}
ul li a:hover {
display: block;

}
li:hover ul {
display: block;
}

Для простоты описания создания выпадающего меню я не стал вводить декоративное оформление ячеек. Уверен, что вы сможете это сделать самостоятельно. Тем более, что все эти фенечки - фон, размер шрифта, цвет ссылок, границы блоков и т.п. должны соответствовать дизайну конкретного сайта. Обратите внимание, что отступ для выпадающего меню должен быть меньше ширины основного меню, чтобы не было просвета между ними. Если этого не сделать, то при попадании курсора на этот просвет выпадающее меню исчезает. В данном случае установлен отступ left: 149px;. при ширине основного меню 150рх.

Описанный "классический" вариант выпадающего меню работает быстро и четко в отличие от вариантов, построенных на скриптах. Дополнительную привлекательность имеет и использование только средств HTML и CSS. Проще некуда!

Напоследок, ещё один булыжник в огород IE. Не забывайте, что этот бразер не любит документы, написанные в HTML 4.01 Transitional и его поведение абсолютно непредсказуемо. Старайтесь оформлять ваши страницы хотя бы в XHTML 1.0 Transitional, а Internet Explorer must die!

В следующей статье рассмотрим конкретный пример создания горизонтального меню с выпадающим списком с помощью средств HTML и CSS.

21.03.2010 г.

Ещё статьи по теме "Полезные мелочи веб-дизайна":
Создание формы обратной связи на сайте
Создание фотогалереи на сайте
Создание иконки для сайта
Курсор как элемент веб-дизайна
Создание гостевой книги на сайте
Фон для сайта
Вывод текущей даты на сайте
Создание бегущей строки на сайте
Создание "схемы проезда" на сайте
Ключевые слова и продвижение сайта
Веб-дизайн, поисковая оптимизация и продвижение сайтов в интернете
Сжатие фотографий для интернета и электронной почты

Задать вопрос автору





Яндекс.Метрика

Copyright © 2008 - Марк Розенталь e-mail: Мой e-mail
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru
Ключевые слова: разработка сайтов, создание выпадающего меню на HTML и CSS, всплывающие окна, раскрывающееся меню, вертикальное и горизонтальное выпадающее меню, всплывающее меню