Новости  Акты  Бланки  Договор  Документы  Правила сайта  Контакты
 Топ 10 сегодня Топ 10 сегодня 
  
27.10.2015

Как сделать простое меню

Классическим средством навигации по сайту является горизонтальное меню в шапке сайта. Посмотрим, как сделать простое горизонтальное меню на HTML и CSS. По смыслу меню является списком разделов сайта, поэтому логично для меню использовать тег ul — маркированный список. Кроме того, в HTML5 появился новый тег, который следует использовать для обозначения области навигации по сайту — nav. Использование этих двух тегов позволит поисковой системе точнее разобраться в структуре нашего сайта.

В качестве примера возьмём меню из 4-х пунктов: Главная, Статьи, Услуги и Контакты. Таким образом код HTML нашего меню будет выглядеть так:. Если у вас nav используется только для главного горизонтального меню, можно обойтись без указания класса и все стили описать с использованием nav в качестве опорного селектора.

Но я буду показывать несколько вариантов меню, поэтому добавил класс hmenuA , чтобы можно было применить разные стили к разным вариантам меню.

Простое меню на CSS

Буква A на конце класса потому, что будут еще варианты B и С. Внутри же они будут по-прежнему блочными элементами. Получается горизонтальная строка меню:. Видите пробелы между элементами меню? Это не отступы, а реальные текстовые пробелы. Эту особенность надо учитывать при использовании режима inline-block.

В принципе, эти пробелы нам не очень мешают. Но если вам при вёрстке меню потребуется задать точные расстояния отступов между пунктами меню или прижать пункты меню друг к другу вообще без отступов, пробелы нам помешают. Поэтому при вёрстке горизонтальных панелей inline-block -ом принято все ненужные пробелы убирать. Я исправил HTML код меню так, чтобы между тегами не было лишних пробелов.

Чтобы код оставался нормально читаемым, я поместил переводы строк внутрь тегов, перед закрывающей угловой скобкой. Вот такой код получился:. Не бойтесь, что пункты меню сливаются. Сейчас мы добавим немного оформления, и всё станет намного симпатичнее:. Та как мы указали, что пункты меню следует воспринимать как строчные элемениты, они выравниваются при помощи text-align. Высоту меню я задал, указав line-height.

Этот приём позволяет одновременно указать высоту блока и выровнять текст по центру блока в вертикальном направлении. Для тега a я также задал режим display: Как поведёт себя наше меню при уменьшении ширины страницы? Уменьшите окно браузера по ширине так, чтобы меню перестало в него помещаться. Меню из однострочного становистя двустрочным. Или даже трёх- и четырёхстрочным, если сделать окно браузера совсем узким.

Если вы не хотите, чтобы меню становилось многострочным, вам придётся ограничить минимальную ширину страницы, подобрав подходящее значение min-width для тега body. Давайте добавим немного анимации. Самый простой вариант — подчёркивание пунктов меню при наведении мыши. Но так как простое подчёркивание — это совсем скучно, давайте сделаем, чтобы оно появлялось и исчезало плавно. Посмотрим еще несколько вариантов, как можно оформить меню. Всё ограничивается лишь вашей фантазией.

Манипулируя цветом границ на стыке пунктов меню, можно добиться появления псевдо-рельефной линии. Похожее меню используется в шапке этого сайта. Главная страница Категории Полезные программы онлайн Вёрстка Blogger Блогеру в помощь Архив статей Популярные статьи.

Calendar Widget Хочешь такой же календарь?

Карта сайта

142 143 144 145 146 147 148 149 150
  Комментарии к новости 
 Главная новость дня Главная новость дня 
Образец торг12 без ндс
Образец заявления на внеурочную деятельность от родителей
Береты ажурные связанные спицами
Скачать яндекс на компьютер виндовс 7
Инструкция по применению sql инъекций
Статьи на тему сельское хозяйство
Маринованная рыба рецепт в уксусе
Где находится колдун тормозной системы рено логан
Лукойл клуб регистрация карты личный
 
 Эксклюзив Эксклюзив 
Прихватка клубничка схема
Зубков григорий вячеславович пермь последние новости
Вязание квадратных мотивов крючком схемы
Лечение астмы народными методами
Дымчатый топаз камень свойства и знаки
Административно правовой статус это