fluart-studio.ru

Как сделать меню в html и css

Как сделать меню в html и css 16
Как сделать меню в html и css 10
Как сделать меню в html и css 64

Классическим средством навигации по сайту является горизонтальное меню в шапке сайта. Посмотрим, как сделать простое горизонтальное меню на HTML и CSS.

Простое HTML меню

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

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

<nav class='hmenuA'> <ul> <li><a href="#">Главная</a></li> <li><a href="#">Статьи</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">Контакты</a></li> </ul> </nav>

Если у вас nav используется только для главного горизонтального меню, можно обойтись без указания класса и все стили описать с использованием nav в качестве опорного селектора. Но я буду показывать несколько вариантов меню, поэтому добавил класс hmenuA, чтобы можно было применить разные стили к разным вариантам меню. Буква A на конце класса потому, что будут еще варианты B и С

Пока что наше меню совсем не похоже на горизонтальное. Выглядит оно вот так:

В первую очередь необходимо убрать маркеры списка и лишние отступы:

.hmenuA > ul { list-style: none; margin: 0px; padding: 0px; }

К элементам списка мы применяем режим inline-block:

.hmenuA > ul > li { display: inline-block; }

Этот режим означает, что «снаружи» элементы списка будут обрабатываться как строчные элементы, т.е. они вытянутся в одну строку. Внутри же они будут по-прежнему блочными элементами. Получается горизонтальная строка меню:

Видите пробелы между элементами меню? Это не отступы, а реальные текстовые пробелы. Они возникли из-за того, что HTML-код был разбит на несколько строк, и «пустые» символы между пунктами меню браузер интерпретировал как пробелы между «словами». Эту особенность надо учитывать при использовании режима inline-block.

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

<nav class='hmenuA'> <ul> <li><a href="#">Главная</a></li ><li><a href="#">Статьи</a></li ><li><a href="#">Услуги</a></li ><li><a href="#">Контакты</a></li> </ul> </nav>

Теперь пробелы исчезли:

Не бойтесь, что пункты меню сливаются. Сейчас мы добавим немного оформления, и всё станет намного симпатичнее:

.hmenuA > ul { list-style: none; margin: 0px; padding: 0px; background-color: #d0e0ff; text-align: center; } .hmenuA > ul > li { display: inline-block; } .hmenuA > ul > li > a { display: block; padding: 0 30px; text-decoration: none; color: #088; line-height: 50px; font-family: "Verdana", "Arial"; font-size: 18px; }

text-align: center используется, чтобы выровнять меню по центру страницы. Та как мы указали, что пункты меню следует воспринимать как строчные элемениты, они выравниваются при помощи text-align.

Высоту меню я задал, указав line-height. Этот приём позволяет одновременно указать высоту блока и выровнять текст по центру блока в вертикальном направлении.

Для тега a я также задал режим display: block, это делает ссылкой, на которую можно надать, весь прямоугольник пункта меню, а не только небольшую область текста.

Результат:

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

Если вы не хотите, чтобы меню становилось многострочным, вам придётся ограничить минимальную ширину страницы, подобрав подходящее значение min-width для тега body.

Давайте добавим немного анимации. Самый простой вариант — подчёркивание пунктов меню при наведении мыши. Но так как простое подчёркивание — это совсем скучно, давайте сделаем, чтобы оно появлялось и исчезало плавно.

Добавим к стилям следующее:

.hmenuA > ul > li > a { position: relative; } .hmenuA > ul > li > a:after { content: ' '; position: absolute; height: 2px; background-color: transparent; bottom: 10px; left: 30px; right: 30px; transition: background-color 0.6s ease; } .hmenuA > ul > li > a:hover:after { background-color: #088; }

Результат:

Другой вариант анимации:

.hmenuA > ul > li > a { position: relative; } .hmenuA > ul > li > a:after { content: ' '; position: absolute; height: 2px; background-color: #088; bottom: 10px; left: 30px; right: 100%; transition: right 0.7s ease; } .hmenuA > ul > li > a:hover:after { right: 30px; }

Посмотрим еще несколько вариантов, как можно оформить меню. Всё ограничивается лишь вашей фантазией.

Меню с плоскими кнопками

Вариант меню с плоскими кнопками и появлением окантовки при наведении:

<style> .hmenuB > ul { list-style: none; margin: 0px; padding: 0px; text-align: center; } .hmenuB > ul > li { display: inline-block; padding: 3px; } .hmenuB > ul > li > a { display: block; padding: 0 15px; text-decoration: none; background-color: #349; color: #fff; line-height: 36px; font-family: "Verdana", "Arial"; font-size: 16px; transition: background-color 0.7s ease; position: relative; } .hmenuB > ul > li > a:hover { background-color: #119; } .hmenuB > ul > li > a:after { content: ' '; position: absolute; background-color: transparent; border: 1px solid transparent; transition: border-color 0.7s ease; top: 2px; bottom: 2px; left: 2px; right: 2px; } .hmenuB > ul > li > a:hover:after { border-color: #fff; } </style> <nav class='hmenuB'> <ul> <li><a href="#">Главная</a></li ><li><a href="#">Статьи</a></li ><li><a href="#">Услуги</a></li ><li><a href="#">Контакты</a></li> </ul> </nav>

Меню с рельефными разделителями

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

<style> .hmenuC > ul { list-style: none; margin: 0px; padding: 0px; text-align: center; background-color: #322; } .hmenuC > ul > li { display: inline-block; border-left: 1px solid rgba(255, 255, 255, 0.1); border-right: 1px solid rgba(0, 0, 0, 0.5); } .hmenuC > ul > li:first-child { border-left-color: transparent; } .hmenuC > ul > li:last-child { border-right-color: transparent; } .hmenuC > ul > li > a { display: block; padding: 0 15px; text-decoration: none; color: #fff; line-height: 36px; font-family: "Verdana", "Arial"; font-size: 16px; transition: all 0.7s ease; } .hmenuC > ul > li > a:hover { text-decoration: underline; } </style> <nav class='hmenuC'> <ul> <li><a href="#">Главная</a></li ><li><a href="#">Статьи</a></li ><li><a href="#">Услуги</a></li ><li><a href="#">Контакты</a></li> </ul> </nav>

Анимированное меню с подписями

Красивое меню с подписями, которые появляются при наведении мыши:

  • Главная

    О нас

  • Статьи

    Уроки CSS

  • Услуги

    Вёрстка, дизайн

  • Контакты

    Свяжитесь с нами

<style> .hmenuD > ul { list-style: none; margin: 0px auto; padding: 0px; text-align: center; width: 640px; height: 50px; background-color: #349; border: 2px solid rgba(0, 0, 0, 0.5); } .hmenuD > ul > li { display: inline-block; width: 25%; height: 100%; box-sizing: border-box; border-right: 1px solid rgba(0, 0, 0, 0.5); position: relative; overflow: hidden; } .hmenuD > ul > li:last-child { border-right-color: transparent; } .hmenuD > ul > li > a { display: block; padding: 0 15px; text-decoration: none; color: #fff; font-family: "Verdana", "Arial"; position: absolute; left: 0px; right: 0px; top: 0px; } .hmenuD > ul > li > a > div { padding-top: 0px; line-height: 45px; font-size: 16px; transition: all 0.7s ease; } .hmenuD > ul > li > a:hover > div { padding-top: 4px; line-height: 20px; } .hmenuD > ul > li > a > div + div { font-size: 12px; } </style> <nav class='hmenuD'> <ul> <li><a href="#"> <div>Главная</div> <div>О нас</div> </a></li ><li><a href="#"> <div>Статьи</div> <div>Уроки CSS</div> </a></li ><li><a href="#"> <div>Услуги</div> <div>Вёрстка, дизайн</div> </a></li ><li><a href="#"> <div>Контакты</div> <div>Свяжитесь с нами</div> </a></li> </ul> </nav>
Как сделать меню в html и css 157
Как сделать меню в html и css 519
Как сделать меню в html и css 86
Как сделать меню в html и css 269
Как сделать меню в html и css 766
Как сделать меню в html и css 349
Как сделать меню в html и css 305
Как сделать меню в html и css 475
Как сделать меню в html и css 146
Как сделать меню в html и css 920
Как сделать меню в html и css 711
Как сделать меню в html и css 749
Как сделать меню в html и css 313
Как сделать меню в html и css 238
Как сделать меню в html и css 946
Как сделать меню в html и css 778

Советуем почитать

  • Журналы по вязанию крючком на испанском
  • Красивые кудри на средние волосы в домашних условиях плойкой
  • Ураза байрам у мусульман открытки
  • Как сделать тыквенную луну
  • Как сделать вазу из стеклянной