Разное

Меню css примеры: Горизонтальное меню на CSS

29.07.1981

Содержание

35 меню CSS и HTML для мобильных устройств, блогов, электронной коммерции и др.

В этой серии статей с lИзбранные представления кода CSS, HTML и JavaScript, мы обычно используем текстовые эффекты, стрелки, Заголовки или ползунки, с помощью которых можно подчеркнуть дизайн нашего веб-сайта, сделав его более элегантным или способным повысить ценность контента, который мы представляем посетителю.

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

Индекс

  • 1 Слайд-меню аккордеона
  • 2 Выпадающий список Swanky на чистом CSS
  • 3 Аккордеонное меню
  • 4 Вертикальное меню с jQuery и CSS3
  • 5 Круговое меню
  • 6 Круговое меню
  • 7 Круговое меню CSS HTML
  • 8 Концепция кольцевого меню
  • 9 Всплывающее меню цветов
  • 10 Рекурсивная навигация при наведении
  • 11 Раскрывающаяся навигация
  • 12 Выпадающее меню на чистом CSS
  • 13 Адаптивное и простое меню
  • 14 Полноэкранное меню в SVG
  • 15 Мега меню CSS
  • 16 Другая концепция меню
  • 17 Меню дизайна материалов
  • 18 Мобильное меню Burger
  • 19 Полноэкранный Flexbox Velocity. js
  • 20 Полная страница вне холста
  • 21 Эффект строки меню при наведении
  • 22 Концепция меню CSS clip-path
  • 23 Зачеркнутый наведение
  • 24 Меню CSS Lavalamp
  • 25 Слайдер навигации
  • 26 Навигация по мобильному меню
  • 27 Концепция мобильного меню iPhone X
  • 28 Развернуть подменю для мобильных
  • 29 Анимированная мобильная навигация
  • 30 Меню с эффектами прокрутки и наведения
  • 31 Меню мобильных фильтров
  • 32 Off-canvas навигация
  • 33 CSS скрытое боковое меню
  • 34 Фиксированная боковая панель навигации
  • 35 Вкладка «Морфинг»

Слайд-меню аккордеона

Un слайд-меню или боковое меню гамбургера состоит из изящных анимаций с минималистичным оттенком для большого эффекта.

Теме статьи:

9 CSS-меню боковой панели, которые нельзя пропустить

Подпишитесь на наш Youtube-канал

Выпадающий список Swanky на чистом CSS

Роскошный Lil Drop Down Manu V2. 0 es меню ну полный чистый CSS что имеет дополнительную ценность в том, что в пользовательском интерфейсе нет кода JavaScript. Просто отличное сочетание, чтобы открыть для себя большую элегантность.

Аккордеонное меню

Este аккордеонное меню es очень просто если мы сравним его с двумя предыдущими с HTML, JS и CSS.

Теме статьи:

16 каскадных меню на CSS для обновления вашего сайта

Вертикальное меню с jQuery и CSS3

Un вертикальное меню с jQuery и CSS3 de отличный штрих для приложения или веб-сайт. Всевозможные переходы и градиенты с минималистичными тенями.

Круговое меню

Un круговое меню de экспериментальная навигация который идеально подходит для технического сайта. Произведено в SVG и GreenSock Animation Platform, без сомнения, разные.

Круговое меню

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

Круговое меню CSS HTML

Un круговое меню CSS HTML разместить его сбоку и что открывается по кругу с отличным пользовательским интерфейсом.

Концепция кольцевого меню

В этом кольцо меню лос связи позиционируются в верхней части каждой для создания разных колец.

Всплывающее меню цветов

Другой конкретный всплывающее меню с очень хорошо примененной анимацией, дающей отличный эффект.

Рекурсивная навигация при наведении

Рекурсивная навигация при наведении является выпадающее меню высокого качества для тех анимаций, которые идеально отражают структуру содержимого сети.

Раскрывающаяся навигация

Un меню выпадающая навигация аналогичен предыдущему, но с другими оттенками в дизайне интерфейса.

Выпадающее меню на чистом CSS

Другой выпадающее меню качества в CSS который соответствует текущим стандартам дизайна пользовательского интерфейса.

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

полный экран, это отзывчивое и простое меню в HTML5 и CSS3 он совместим с Internet Explorer 11.

Полноэкранное меню в SVG

Un полноэкранное меню в SVG кладут сбоку в гамбургер, и это очень привлекает внимание.

Мега меню CSS

Un Мега меню в CSS и HTML отличается от того, что видно, в современном и минималистском стиле.

Другая концепция меню

Другая концепция меню идеальный вариант, если вы ищете другое и оригинальное менюОн просто великолепен благодаря настраиваемому меню на значке и тщательно проработанной анимации.

Меню дизайна материалов

Меню дизайна материалов está на основе языка дизайна Google. 

Мобильное меню Burger

Un гамбургер-меню оптимизирован для мобильных устройств и что это сделано в HTML, CSS и JavaScript.

Полноэкранный Flexbox Velocity.

js

Полноэкранный Flexbox Velocity.js это меню огромное качество достигнутого эффекта и за его почти уникальный пользовательский опыт. Полноэкранный флексбокс с velocity.js.

Полная страница вне холста

Полная страница вне холста это высококачественное полноэкранное меню, которое идеально подходит для отображения Как создать вебсайт с этими значениями.

Эффект строки меню при наведении

Un всплывающее меню простой эффект линии и очень красиво.

Концепция меню CSS clip-path

Еще одна концепция меню с clip-path состоящий из очень любопытного наведения и нескольких анимированных категорий.

Зачеркнутый наведение

Зачеркнутый наведение это другое меню наведите указатель мыши на любопытные ссылки Результат.

Меню CSS Lavalamp

Меню CSS Lavalamp содержит один анимация наведения для каждой ссылки это поддается динамизму.

Слайдер навигации

Un ползунок навигации который прокручивает каждую ссылку отличаться красным оттенком и хорошо ухоженной анимацией, дающей отличные результаты.

Навигация по мобильному меню

Un навигация по меню бургеров большой эффект, нацеленный на мобильные устройства.

Концепция мобильного меню iPhone X

 

Un меню предназначено для iPhone X которые могут придать вашему веб-сайту нотку качества, чтобы он соответствовал дизайну телефона Apple.

Развернуть подменю для мобильных

Развернуть подменю для мобильных предназначен для нижний колонтитул с изящной анимацией и очень подходящий объем двигателя. Элегантность на всех уровнях для мобильного интерфейса вашего приложения или веб-сайта.

Анимированная мобильная навигация

Другой анимированное меню для мобильного с круговым анимированным фоном с отличными визуальными результатами.

Меню с эффектами прокрутки и наведения

Другой отличный эффект для другого меню и причудливый. Восток меню с эффектами прокрутки и наведения он идеально подходит для ресторанов, обзоров и т. д.

Меню мобильных фильтров

Un фильтр меню мобильный преобразован в веб-версию и предназначен для мобильных устройств.

Off-canvas навигация

Off-canvas навигация Это меню, которое экспериментируйте с переходами и навигацией быть очень актуальным. Если вы ищете что-то новое, чтобы удивить, его уровень — лучший в этом списке.

CSS скрытое боковое меню

Un боковое меню в CSS что скрыто и так появляется со значком гамбургера.

Фиксированная боковая панель навигации

использование bootstrap вместо flexbox для поддержки IE9 / 10. Еще одно отличное меню для своих Фиксированная боковая панель навигации в своей концепции.

Вкладка «Морфинг»

Вкладка «Морфинг» это меню раскрывающийся список, который появляется при нажатии на главной кнопке вкладки.


Горизонтальное меню для сайта на HTML и CSS — подробная верстка

Главная » HTML-CSS-JQUERY

HTML-CSS-JQUERY

На чтение 4 мин Просмотров 1.5к. Опубликовано Обновлено

03.06.2020

В этой статье мы расскажем как сделать горизонтальное меню для сайта с помощью HTML и CSS.

HTML код горизонтального меню

Общепринятым считается создание меню с помощью стандартного списка. И так, создадим файл index.html и запишем в него следующий код:

 
<nav>
    <ul>
      <li><a href="">Страница-1</a></li>
      <li><a href="">Страница-2</a></li>
      <li><a href="">Страница-3</a></li>
      <li><a href="">Страница-4</a></li>
      <li><a href="">Страница-5</a></li>
      <li><a href="">Страница-6</a></li>
      <li><a href="">Страница-7</a></li>
    </ul>
 </nav>

Тег <nav> (от англ. Navigation перевод: Навигация), который обрамляет наш список и в HTML верстке указывает на блок с навигационным меню сайта.

Сохранив и открыв файл index.html в браузере мы увидим следующую картину:

Элементы меню стандартно расположились вертикально и у каждого элемента <li> появилась точка слева (так называемая маркером). Давайте оформим меню согласно нашим условиям.

Стилизация меню с помощью CSS

Для того чтобы начать оформлять наше меню создадим файл style.css, куда мы будем вписывать код CSS. А в index.html пропишем путь до созданного файла style.css. Полный код HTML будет выглядеть следующим образом:


<!DOCTYPE html>
<html lang="ru">
<head>
  <title>Sample</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css"> <!-- Путь до нашего файла style.css -->
</head>
<body>
  <nav>
    <ul>
      <li><a href="">Страница-1</a></li>
      <li><a href="">Страница-2</a></li>
      <li><a href="">Страница-3</a></li>
      <li><a href="">Страница-4</a></li>
      <li><a href="">Страница-5</a></li>
      <li><a href="">Страница-6</a></li>
      <li><a href="">Страница-7</a></li>
    </ul>
  </nav>
</body>
</html>

Для начала нам необходимо добавить голубой фон нашему меню и сделать внутренние отступы по вертикали и горизонтали, чтобы текст ссылок не прилипал к краям нашего блока с меню.

Открываем файл style.css и записываем следующий код:

 
nav {
  padding: 16px 0;
  background-color: #199BCA;
}

В результате фон нашего меню стал голубым и появились внутренние отступы сверху, слева, справа и снизу.


Далее убираем маркеры в виде точек у тега <ul>, а также сбрасываем на ноль значения padding и margin, чтобы убрать лишние отступы у меню. И центрируем наш список по центру горизонтали.



nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: center;
}


Ну и наконец выравниваем список меню по горизонтали с помощью display: inline-block. Делаем отступы слева для каждого элемента <li> с помощью margin-left: 10px. Для первого элемента <li> используем псевдокласс :first-child со значением margin-left 0px. Для более четкого восприятия ссылок сделаем все буквы и цифры строчными с помощью text-transform со значением uppercase.



nav ul li {
display: inline-block;
  margin-left: 10px;
  text-transform: uppercase;
}
nav ul li:first-child {
  margin-left: 0px;
}


А теперь немого приведем в порядок визуальное оформление горизонтального меню убрав нижнее подчеркивание и окрасим текст в белый цвет. Для этого тегу <a> применим следующие CSS свойства:



a {
  color: #fff;
  text-decoration: none;
}


В результате получим окончательный пример меню:

Итог: в этой статье мы рассмотрели как сделать меню горизонтально с помощью CSS.

В следующей статье мы рассмотрим как сделать мобильное меню с помощью CSS и JQUERY

— HTML | MDN

Experimental: Это экспериментальная технология


Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

HTML-элемент <menu> представляет группу команд, которые пользователь может выполнить или активировать. Он включает как меню-списки, которые могут отображаться в верхней части экрана, так и контекстные меню, например, такие, что могут появиться под кнопкой после нажатия.

К этому элементу применимы глобальные атрибуты.

label Deprecated

The name of the menu as shown to the user. Used within nested menus, to provide a label through which the submenu can be accessed. Must only be specified when the parent element is a <menu> in the context menu state.

type

This attribute indicates the kind of menu being declared, and can be one of two values. * context

Deprecated : Indicates the popup menu state, which represents a group of commands activated through another element. This might be as a button menu referenced by a menu attribute of a <button> element, or as context menu for an element with a contextmenu (en-US) attribute. This value is the default if the attribute is missing and the parent element is also a <menu> element.

  • toolbar: Indicates the toolbar state, which represents a toolbar consisting of a series of commands for user interaction. This might be in the form of an unordered list of <li> elements, or, if the element has no <li> element children, flow content (en-US) describing available commands. This value is the default if the attribute is missing.

The <menu> and <ul> elements both represent an unordered list of items. The key difference is that <ul> primarily contains items for display, whilst <menu> is intended for interactive items, to act on.

An HTML menu can be used to create context menus (typically activated by right-clicking another element) or toolbars.

Context menus consist of a <menu> element which contains <menuitem> (en-US) elements for each selectable option in the menu, <menu> elements for submenus within the menu, and <hr> elements for separator lines to break up the menu’s content into sections. Context menus are then attached to the element they’re activated from using either the associated element’s contextmenu attribute or, for button-activated menus attached to <button> elements, the menu attribute.

Toolbar menus consist of a <menu> element whose content is described in one of two ways: either as an unordered list of items represented by <li> elements (each representing a command or option the user can utilize), or (if there are no <li> elements), flow content (en-US) describing the available commands and options.

This element was deprecated in HTML4, but reintroduced in HTML5.1 and the HTML living standard. This document describes the current Firefox implementation. Type ‘list’ is likely to change to ‘toolbar’ according to HTML5.1.

Устарело: Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.

HTML
<!-- A <div> element with a context menu -->
<div contextmenu="popup-menu">
  Right-click to see the adjusted context menu
</div>
<menu type="context">
  <menuitem>Action</menuitem>
  <menuitem>Another action</menuitem>
  <hr/>
  <menuitem>Separated action</menuitem>
</menu>
CSS
div {
  width: 300px;
  height: 80px;
  background-color: lightgreen;
}
Result

Предупреждение: Menu buttons haven’t been implemented in any known browsers yet. The type attribute on the <menu> element is now obsolete.

Предупреждение: <menuitem> (en-US) element is obsolete.

HTML
<!-- A button, which displays a menu when clicked. -->
<button type="menu" menu="popup-menu">
  Dropdown
</button>
<menu type="context">
  <menuitem>Action</menuitem>
  <menuitem>Another action</menuitem>
  <hr/>
  <menuitem>Separated action</menuitem>
</menu>
Result

Toolbar

Предупреждение: Toolbar menus haven’t been implemented in any known browsers yet.

HTML
<!-- A context menu for a simple editor,
   - containing two menu buttons. -->
<menu type="toolbar">
  <li>
    <button type="menu" menu="file-menu">File</button>
    <menu type="context">
      <menuitem label="New...">
      <menuitem label="Save. ..">
    </menu>
  </li>
  <li>
    <button type="menu" menu="edit-menu">Edit</button>
    <menu type="context">
      <menuitem label="Cut...">
      <menuitem label="Copy...">
      <menuitem label="Paste...">
    </menu>
  </li>
</menu>
Result

Specification Status Comment
HTML Living Standard
Определение ‘<menu>’ в этой спецификации.
Живой стандарт No change from latest snapshot, Unknown
HTML 5.1
Определение ‘<menu>’ в этой спецификации.
Рекомендация

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

  • Other list-related HTML Elements: <ol>, <ul>, <li>, <hr>, and the obsolete <dir> (en-US).
  • The contextmenu global attribute can be used on an element to refer to the id of a menu with type="context".

Last modified: , by MDN contributors

CSS меню. Простое меню для сайта. Горизонтальное CSS меню.

  • 04.12.2012
  • CSS, Верстка сайтов

Мы рассмотрели то, как можно сделать горизонтальное выпадающее CSS меню и вертикальное выпадающее CSS меню. Сегодня мы поговорим о том, как создать горизонтальное CSS меню для сайта. Но в этот раз меню не будет выпадающим, то есть мы планируем, что не потребуются подразделы.

Как и в прошлой публикации, меню сайта будет создано при помощи маркированного HTML списка (при помощи тегов <li> и <ul>). Оформлять горизонтальное меню для сайта мы будем при помощи таблицы стилей (CSS), мы не будем использовать JavaScript для создания горизонтального CSS меню. Как и в прошлый раз, мы не будем использовать изображений для создания горизонтального CSS меню.

Создание меню для сайта. Горизонтальное CSS меню. Шаг 1 -создание HTML макета меню.

Содержание статьи:

  • Создание меню для сайта. Горизонтальное CSS меню. Шаг 1 -создание HTML макета меню.
  • Создание меню для сайта. Горизонтальное CSS меню. Шаг 2 — Задаем стили для меню сайта.

И так, начнем мы с создания HTML макета меню сайта. Для этого мы воспользуемся HTML списком, ненумерованным списком:

</p> <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Создание CSS меню</title> <link rel=»stylesheet» href=»style.css» type=»text/css» > </head> <body> <div> <ul> <li><a href=»#»>Home</a></li> <li><a href=»#»>Ссылка1</a></li> <li><a href=»#»>Ссылка2</a></li> <li><a href=»#»>Ссылка3</a></li> <li><a href=»#»>Ссылка4</a></li> </ul> <span><span><br></span></span> </div> </body> </html> <p>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

</p>

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4. 01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<title>Создание CSS меню</title>

<link rel=»stylesheet» href=»style.css» type=»text/css» >

</head>

<body>

<div>

<ul>

<li><a href=»#»>Home</a></li>

<li><a href=»#»>Ссылка1</a></li>

<li><a href=»#»>Ссылка2</a></li>

<li><a href=»#»>Ссылка3</a></li>

<li><a href=»#»>Ссылка4</a></li>

</ul>

<span><span><br></span></span>

</div>

</body>

</html>

<p>

Сразу подключаем файл таблиц стилей, который называется style.css. При помощи тегов <ul> и <li> создаем HTML макет меню для сайта. Поскольку, пункты нашего горизонтального CSS меню должны куда-нибудь вести, делаем их ссылками при помощи тега <a>, в качестве значения атрибута href устанавливаем #(хэш), ссылки с таким атрибутом никуда не ведут. HTML список меню помещаем в контейнер <div> с идентификатором hmenu, поскольку внутри элемента <body> могут находиться только блочные HTML элементы и элементы <ins> и <del>. После созданного списка стоит тег <br> — перевод строки, он нужен для того, чтобы растянуть меню сайта по горизонтали на всю ширину окна браузера.

Создание меню для сайта. Горизонтальное CSS меню. Шаг 2 — Задаем стили для меню сайта.

Первое, что нужно сделать — это задать цвет фона и ширину контейнера <div> в CSS, хотя вы знаете, что блочные HTML элементы занимают всю доступную ширину, в отличие от строчных HTML элементов:

#menu{ width: 100%; background-color: #333; }

#menu{

width: 100%;

background-color: #333;

}

Затем нам нужно задать общий стиль для горизонтального CSS меню:

#menu ul{ margin: 0; padding: 0; float: left;}

1

2

3

4

5

6

7

#menu ul{

 

margin: 0;

 

padding: 0;

 

float: left;}

Здесь мы убираем внутренние и внешние отступы, а также «прижимаем» меню сайта к левой границе окна браузера.

Теперь можно задать стиль отображения для всех пунктов меню сайта:

#menu ul li{ display: inline;}

#menu ul li{

display: inline;}

Мы знаем, что элемент <li> относится к блочным, то есть занимает всю область, в которой он стоит, из-за этого наше меню было вертикальным, добавив CSS свойство display: inline, мы сделали элементы <li> строчными, а наше меню стало горизонтальным.

Теперь мы можем задать CSS стили для содержимого контейнеров <li>, то есть стили для навигации горизонтального меню(для тега <a>):

#menu ul li a{ float: left; text-decoration: none; color: white; padding: 10.5px 11px; background-color: #333; }

1

2

3

4

5

6

#menu ul li a{

float: left;

text-decoration: none;

color: white;

padding: 10. 5px 11px;

background-color: #333; }

CSS свойство float:left выравнивает горизонтальное меню и контейнер <div> по верхней границе. Все ссылки по умолчанию подчеркиваются браузером, чтобы избавиться от этого недоразумения мы используем свойство text-decoration:none. Далее мы задаем цвет ссылок, то есть цвет текста меню сайта. Внутренними отступами мы расширяем наше горизонтальное меню.

Задаем стили для посещенных пунктов меню и то, как будут отображаться пункты меню, при наведение на них курсора мыши:

</p> #menu ul li a:visited{ color: white;} #menu ul li a:hover{ color: #fff; background-color:#0b75b2;} <p>

1

2

3

4

5

6

7

8

</p>

#menu ul li a:visited{

color: white;}

 

#menu ul li a:hover{

color: #fff;

background-color:#0b75b2;}

<p>

Ну тут все понятно: мы задаем цвет текста и цвет фона для горизонтального CSS меню.

Осталось задать стиль для тега <br>, чтобы выровнять по высоте горизонтальное меню и элемент <div>:

</p> <p>br{clear:left;}</p> <p>

</p>

<p>br{clear:left;}</p>

<p>

Это горизонтальное CSS меню будет растягиваться на всю ширину окна браузера и при это данное меню корректно отображается во всех браузерах.

Исходные коды примеров вы можете скачать на публичных страницах вконтакте: раз и два.

На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru. Не забываем комментировать и делиться с друзьями;)

Возможно, эти записи вам покажутся интересными


Типовые решения в вёрстке. Как сверстать простую шапку страницы с меню

Типовые решения в вёрстке

  • Вёрстка простой шапки

  • Подключение шрифтов

  • Обёртка для страницы

  • Почему не стоит использовать float

  • Простой рецепт колоночной раскладки

Типовые решения в вёрстке

  • Вёрстка простой шапки

  • Подключение шрифтов

  • Обёртка для страницы

  • Почему не стоит использовать float

  • Простой рецепт колоночной раскладки

Я решил выпустить цикл советов по мотивам работ студентов Школ бюро. Мы рассмотрим решение типовых задач в вёрстке и найдём ответы на самые простые вопросы, возникающие у новичков.

В сегодняшнем совете сверстаем простую шапку «в линию», которая встречается на огромном количестве сайтов, в том числе на сайте бюро.

Макет шапки в Фигме:

Мы будем постепенно разбирать шапку на общие блоки и идти вглубь, к отдельным элементам.

На самом верхнем уровне у нас есть три сущности: логотип, меню и телефон. Логотип всегда лучше делать картинкой, даже если это просто какая‑нибудь надпись. Это нужно, чтобы избежать проблем, например с незагрузившимися шрифтами логотипа.

Накидаем каркас будущей шапки в ХТМЛ:

<header>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
</header>

Идём вглубь. Ставим изображение в СВГ с логотипом и делаем его ссылкой на главную страницу:

<header>
  <div>
    <a href="/">
      <img src="logo.svg" />
    </a>
  </div>
  <div>
  </div>
  <div>
  </div>
</header>

Меню по смыслу — вытянутый в линию список. Поэтому сверстаем его списком:

<header>
  <div>
    <a href="/">
      <img src="logo.svg" />
    </a>
  </div>
  <div>
    <ul>
      <li><a href="/products">Продукция</a></li>
      <li><a href="/services">Услуги</a></li>
      <li><a href="/blog">Блог</a></li>
      <li><a href="/contacts">Контакты</a></li>
    </ul>
  </div>
  <div>
  </div>
</header>

Номер телефона — тоже ссылка, по которой можно позвонить:

<header>
  <div>
    <a href="/">
      <img src="logo.svg" />
    </a>
  </div>
  <div>
    <ul>
      <li><a href="/products">Продукция</a></li>
      <li><a href="/services">Услуги</a></li>
      <li><a href="/blog">Блог</a></li>
      <li><a href="/contacts">Контакты</a></li>
    </ul>
  </div>
  <div>
    <a href="tel:88004000500">8 800 4000 500</a>
  </div>
</header>

Располагаем все три основных блока шапки в линию с помощью флекса:

header {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}

Теперь разберёмся с меню. Чтобы привести его в порядок, нужно:

  • обнулить левый отступ у списка (по умолчанию он всегда задан встроенными стилями браузера),

  • вытянуть пункты меню в линию,

  • задать отступы между пунктами меню,

  • предусмотреть красную плашку под активным пунктом,

  • убрать стандартные точки перед пунктами списка,

  • стилизовать ссылки.

Ещё нужно заставить меню занимать всё свободное место и прижимать номер телефона к правому краю страницы.

Изучим макет. Отступы между пунктами меню — 40 пикселей:

Ширина отступов от краёв плашки активного пункта меню до текста внутри неё — 10 пикселей по бокам и по 8 пикселей сверху и снизу. Плашку я специально сделал полупрозрачной, чтобы разглядеть красные цифры разметки:

Расстояние от логотипа до меню — 40 пикселей:

Вытягиваем пункты меню в линию, убираем точки, обнуляем отступы со всех сторон — они нам не нужны. Само меню должно занимать всё доступное место — добавляем flex-grow:

. menu {
  flex-grow: 1;
}
.menu ul {
  display: flex;
  flex-flow: row nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

В примере мы добавляем плашку с помощью padding со всех сторон — это увеличивает область нажатия ссылки. Если такой эффект не нужен, можно использовать margin у ссылок, а у активного элемента padding

Задаём отступы между пунктами меню. Ставим 20 пикселей, а не 40, потому что по 10 с каждой стороны отъедает плашка каждого пункта меню. Нам нужно это учесть, чтобы ничего не дёргалось при переключении. У последнего пункта нужно убрать отступ справа, чтобы он не мешался. Саму плашку будем делать у ссылки:

В примере мы добавляем плашку с помощью padding со всех сторон — это увеличивает область нажатия ссылки. Если такой эффект не нужен, можно использовать margin у ссылок, а у активного элемента padding

.menu li {
  margin-right: 20px;
}
.menu li:last-child {
  margin-right: 0;
}
. menu a {
  padding: 8px 10px;
}

Добавляем отступ справа от логотипа в 30 пикселей. В сумме с левым padding в 10 пикселей, который задан у невидимой плашки пункта меню, будет 40:

.logo {
  margin-right: 30px;
}

Добавляем стили плашки активного пункта меню. Тут можно пойти разными путями: поставить класс active у li или у самого элемента с плашкой. Мы пойдём вторым путём. Подразумеваем, что внутри li находится либо ссылка, либо какой‑нибудь элемент с классом active:

.menu a,
.menu .active {  
  display: block;
  padding: 8px 10px;
}
.menu .active {
  color: #fff;
  background-color: #ff3d00;
  border-radius: 8px;
}

Стилизуем ссылки:

.menu ul {
  display: flex;
  flex-flow: row nowrap;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 18px;
  list-style: none;
}
.menu a,
.menu .active {
  display: block;
  padding: 8px 10px;
  text-transform: uppercase;
  letter-spacing: . 27em;
}
.menu a {
  color: #000;
  text-decoration: none;
}

Теперь приведём в порядок номер телефона:

.tel {
  font-size: 20px;
  line-height: 24px;
}
.tel a {
  color: #000;
  text-decoration: none;
}

Всё отлично, кроме одной вещи —  базовые линии текста меню и номера телефона не совпадают из‑за разной высоты блоков:

Опустим меню на пару пикселей, чтобы совпадали:

.menu ul {
  display: flex;
  flex-flow: row nowrap;
  margin: 2px 0 0;
  padding: 0;
  font-size: 16px;
  line-height: 18px;
  list-style: none;
}

В блоке menu у нас нет ничего, кроме самого списка ul. Можно избавиться от лишнего div и дать класс menu сразу списку. Но мне больше нравится вариант заменить div.menu на nav.menu, так будет семантичнее.

С логотипом и телефоном примерно та же история, но ссылки — строчные элементы и ставить их рядом с блочными не стоит. Поэтому оставим обёртки логотипа и телефона как есть.

Мы пока не выбрали и никак не настроили шрифты. В следующем совете разберём разные варианты подключения своих шрифтов к странице.

Что ещё почитать

  • Block‑level elements

  • Inline elements

  • HTML5 Semantic Elements

  • <nav>: The Navigation Section element

  • The current state of telephone links

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка

Отправить

Поделиться

Поделиться

Запинить

Твитнуть

Свежак

102 Меню CSS

Коллекция бесплатных HTML и CSS навигационных меню примеров кода. Обновление майской коллекции 2020 года. 27 новых предметов.

  1. Мегаменю
  1. Меню-аккордеон CSS
  2. Круглые меню CSS
  3. Выпадающие меню CSS
  4. Мобильные меню CSS
  5. Меню боковой панели CSS
  6. Горизонтальные меню CSS
  7. Полноэкранные меню CSS
  8. Скользящие меню CSS
  9. Переключаемые меню CSS
  10. CSS Off-Canvas меню