www.seomark.ru |
Веб-дизайн и поисковая оптимизация |
![]() |
||||||||
Главная | Веб-дизайн и оптимизация сайтов | Фотолаборатория | Радиотехника | Полезные программы | Разработка сайтов | ||||||||||
Создание меню для сайта
Создание горизонтального меню с выпадающим спискомРовно три года назад я написал статью о создании меню с выпадающим списком. Для этого были использованы простейшие приемы HTML и CSS. Как оказалось, статья актуальна до сих пор, но у некоторых начинающих веб-дизайнеров возникают трудности с конструированием своего варианта такого меню. Особенно это касается горизонтального меню, один из примеров которого показан на рисунке (пример рабочий, можно потыкать). Чтобы посетитель сайта не гадал, какой из пунктов меню раскрывается, желательно снабдить его указателем. В нашем примере - стрелка у пункта НАШИ УСЛУГИ (код символа ▼). Это особенно актуально для экранов мобильников и планшетов, где нет курсора.
Рассмотрим подробнее особенности написания кода для этого меню. Для простоты, выпадающий список сделан только для раздела "Наши услуги", но он может быть повторен аналогично и для других пунктов.
Выпадающий список создан при помощи тегов <ul> <li >... </li ></ul>. Полный HTML-код нашего меню следующий:
Главная трудность при создании выпадающего меню - определить размеры и правильно подобрать положение выпадающего списка. Он не должен заходить на основной пункт, но и не отделяться от него пробелом. В последнем случае при движении указателя мыши через этот пробел список может исчезать. Все эти параметры задаются правилами CSS. Их можно включить в страницу сайта, но лучше вынести в отдельный файл или в общую таблицу стилей CSS. Для нашего меню эти правила следующие: <style type="text/css"> Пользуясь комментариями в таблице стилей, вы легко можете сконструировать свой вариант выпадающего меню. При этом обязательно проверяйте работоспособность меню в разных браузерах, так как при ошибках в коде выпадающий список может не появляться. Этим вы лишите посетителя вашего сайта удовольствия просмотреть нужные страницы. Если у вас на странице имеется слайд-шоу или другой слайдер, то обратите внимание на значение z-index:10 для выпадающего списка. Чтобы выпадающее меню было над слайдером, то есть не перекрывалось им, это значение для списка должно быть выше, чем у слайдера. В заключение, все же не рекомендую сильно увлекаться выпадающими списками, так как это усложняет навигацию по сайту, особенно на мобильных устройствах, где курсора просто нет! Иногда трудно догадаться, какие пункты вашего меню с выпадающим списком. Как сказано выше, такие пункты желательно снабжать стрелкой, как в нашем примере - код треугольника ▼ или использовать подходящий рисунок. Далее рассмотрим, как с помощью JavaScript добавить в созданное меню эффекты анимации. Как всегда, это оказывается очень просто и не требует глубоких знаний в программировании. Последнее обычно больше всего пугает начинающих сайтостроителей. 3.03.2013 г., Далее - Создание простого анимированного меню |
||||||||||
|
||||||||||
Главная | Веб-дизайн и оптимизация сайтов | Фотолаборатория | Радиотехника | Полезные программы | Разработка сайтов | ||||||||||
Copyright © 2008 - Марк Розенталь e-mail: ![]() Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru Ключевые слова: разработка сайтов, создание выпадающего меню на HTML и CSS, горизонтальное меню с выпадающим списком, раскрывающееся меню, всплывающее меню |