Как создать центрированное горизонтальное навигационное меню с помощью простого CSS
В этом простом уроке CSS мы создадим центрированное горизонтальное меню навигации.
Центрирование навигации — фиксированная ширина по сравнению с изменяемой шириной
Использование CSS может быть сложным, если вы сначала не определите фиксированную ширину для контейнера элементов вашего списка… дело в том, что никто не хочет объявлять элемент фиксированной ширины, если в этом нет необходимости.
В мире отзывчивого веб-дизайна обычно рекомендуется избегать установки фиксированной ширины для элемента, когда это возможно.
Как правило, элементы с изменяемой шириной обладают большей гибкостью при отображении на устройствах всех размеров и будут более удобными для пользователя, если веб-мастер использует CMS.
Начнем
Для начала, вот наша стандартная разметка меню:
<навигация> <ул>
Теперь базовый CSS для получения нашего горизонтального навигационного меню:
нав ул {
тип стиля списка: нет;
маржа: 0;
заполнение: 0;
}
нав ли {
дисплей: встроенный;
}
нав ли а {
отступ: 5px 10px;
}
Как вы можете видеть ниже, у нас есть очень простое (и очень ванильное) меню горизонтальной навигации.
Поскольку элементы списка отображаются как встроенные, теперь они расположены горизонтально и выровнены по левому краю
Теперь нам нужно всего лишь добавить 2 дополнительных свойства CSS, чтобы элементы меню привязывались к центру контейнера (выделены жирным шрифтом).
нав ул {
тип стиля списка: нет;
маржа: 0;
заполнение: 0;
выравнивание текста: по центру;
}
нав ли {
дисплей: встроенный;
}
нав ли а {
отступ: 5px 10px;
дисплей : встроенный блок;
}
Результат:
Как видите, с двумя небольшими изменениями в CSS легко создать удобную центрированную горизонтальную навигацию без необходимости устанавливать какую-либо фиксированную ширину, а полностью совместим с IE8 и выше.
Если вы хотите увидеть приведенный выше код в действии, посетите JSFiddle здесь.
Зачем использовать эту технику?
Мне нравится эта техника тем, что лично я нахожу симметрию и баланс визуально привлекательными в веб-дизайне.
Работая в своем бизнесе по дизайну и разработке веб-сайтов на Голд-Косте, я часто прибегаю к равномерному расположению пунктов меню по центру, если это помогает создать симметрию, дополняет общий макет и отвечает потребностям клиента.
Горизонтальное навигационное меню CSS — Блог Джесина
Горизонтальное навигационное меню CSS — это основное меню, которое отображается на большинстве веб-сайтов сразу под логотипом . Создать такой тип меню очень просто, используя неупорядоченные списки HTML и CSS. Он удобен для поисковых систем и использует дизайн без таблиц. Горизонтальное меню CSS будет создано с эффектом наведения, чтобы оживить ситуацию. Это изменит цвет и стиль пункта меню при наведении на него указателя мыши. Давайте начнем шаг за шагом создавать горизонтальное меню CSS
С помощью HTML-тега
- создайте неупорядоченный список пунктов меню. Все элементы должны быть гиперссылками, указывающими на соответствующие страницы.
<ул>
html">ГлавнаяАтрибут ID добавлен в тег ul, чтобы можно было использовать селектор CSS ID для применения стилей. Когда этот файл HTML открывается в веб-браузере, вы увидите маркеры перед каждым пунктом меню. Следующий шаг — удалить его с помощью CSS. Наша цель — убрать пули, удалить отступы и сделать их горизонтальными. Добавьте следующий код внутрь тега head.