www.seomark.ru |
Веб-дизайн и поисковая оптимизация |
![]() |
||||||
Главная | Веб-дизайн и оптимизация сайтов | Фотолаборатория | Радиотехника | Полезные программы | Разработка сайтов | ||||||||
Создание меню для сайта
Выпадающее меню. Создание с помощью HTML и CSSПри разработке навигации для сайтов широко применяют выпадающие меню (Drop-Down Menus). При этом частенько наблюдается некорректный их вывод в браузерах: искажения, произвольное изменение положения или мерцание меню. Иногда за нужной строчкой приходится гоняться, как за убегающим тараканом. Между тем, классический вариант выпадающего меню, выполненный простыми средствами HTML и CSS, практически лишен этих недостатков. Создание такого выпадающего меню, как горизонтального, так и вертикального, не составляет большого труда. Рассмотрим последовательность действий по созданию выпадающего меню. Сначала напишем простое меню в виде ненумерованного списка из трех пунктов:
С помощью правил CSS удалим отступы и маркеры в созданном ненумерованном списке и зададим ширину пунктов меню 150px.
Будьте внимательны при вставке правил CSS, чтобы они не повлияли на все ненумерованные списки на вашем сайте. Можно, конечно, вставить их в текущую страницу перед тегом </head> внутрь контейнера<style type="text/css">...
</style>, но лучше оформить отдельным стилевым файлом, используя классы и идентификаторы. Для этого достаточно, например, заключить выпадающее меню в тег <div class="dropmenu" >....</div>, где класс "dropmenu" задается созданными нами правилами CSS: Далее задаём положение элементов списка. По умолчанию, они уже расположены вертикально друг под другом, так как заданы тегом <ul>. Выпадающее меню позиционируем относительно основного списка с помощью атрибутов "left" и "top". Можно сделать выпадающее меню справа, слева, сверху или снизу от блоков основного списка, установив соответствующие абсолютные значения отступов в пикселях. Для скрытия выпадающего меню используем правило display: none; а чтобы меню появлялось при наведении курсора - li:hover ul { display: block; }. Как всегда, ложку дегтя нам добавляет Internet Explorer версий 7 и ниже. Чтобы он корректно выводил наше выпадающее меню требуются "химические" добавки в правила CSS (с помощью, так называемых, "хаков"), которые игнорируются другими браузерами. Для IE7 они вводятся, например, с помощью комбинации *+html и др. Более подробно об этой "химии", а также о том, как обеспечить работоспособность выпадающего меню в совсем старых браузерах, можете посмотреть, например, в статьях "Как написать свойства css, работающие только в IE" (автор Крис Койер) и "Выпадающие меню с помощью CSS" (автор Ник Ригби). Кроме того, нежелательно прописывать для гиперссылок в выпадающем меню атрибут Окончательно мы имеем следующий набор правил CSS для выпадающего меню (для наглядности введены границы блоков):
Для простоты описания создания выпадающего меню я не стал вводить декоративное оформление ячеек. Уверен, что вы сможете это сделать самостоятельно. Тем более, что все эти фенечки - фон, размер шрифта, цвет ссылок, границы блоков и т.п. должны соответствовать дизайну конкретного сайта. Обратите внимание, что отступ для выпадающего меню должен быть меньше ширины основного меню, чтобы не было просвета между ними. Если этого не сделать, то при попадании курсора на этот просвет выпадающее меню исчезает. В данном случае установлен отступ 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: ![]() Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru Ключевые слова: разработка сайтов, создание выпадающего меню на HTML и CSS, всплывающие окна, раскрывающееся меню, вертикальное и горизонтальное выпадающее меню, всплывающее меню |