Как сделать html меню: Меню для сайта html и css горизонтальное — 11 вариантов меню

alexxlab

Содержание

Меню | HTML | CodeBasics

Вернёмся к примеру из прошлых уроков:

<header>
  <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
  <div> <!-- Меню -->
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/about">О нас</a></li>
      <li><a href="/contacts">Контакты</a></li>
    </ul>
  </div>
</header>

В нём меню сайта размечено с помощью обычного тега <div> с идентификатором menu. Как известно, такое обозначение работает для разработчиков, но не для браузеров. Они не понимают, что это меню, а не просто обёртка для списка.

Для создания полноценного меню используется парный тег <nav>, задача которого — разметить область страницы с основным меню. Также различные устройства для чтения с экрана, которыми пользуются люди со слабым зрением, используют этот тег, чтобы определить, стоит ли его отображать на странице.

Заменим <div></div> на изученный тег <nav>:

<header>
  <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
  <nav> <!-- Меню -->
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/about">О нас</a></li>
      <li><a href="/contacts">Контакты</a></li>
    </ul>
  </nav>
</header>

Элемент nav, как и header не является уникальным для страницы. Его можно использовать для любого меню на странице, но есть несколько рекомендаций:

  1. Нет необходимости оборачивать каждое меню в элемент nav. В основном такой областью указываются только основные меню. Дополнительные, такие как меню в футере, не оборачивают в тег <nav>, хотя это не запрещено.
  2. Хороший пример дополнительного использования
    nav     — навигация по текущей странице.
  3. nav может содержать не только ссылки, но также и текст, в котором есть ссылки. Ориентируйтесь на здравый смысл. Если навигация является основной для страницы или всего сайта, то оберните её в тег <nav>.

Задание

Создайте разметку «шапки» сайта. Расположите внутри картинку и меню из двух элементов. Используйте тег <nav> и маркированный список

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

  • Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

Полезное

  • Оборачивайте в элемент навигации только основные меню сайта или отдельной страницы. Дополнительные меню не нуждаются в обёртке в тег <nav>

  • Навигация может быть в любой области страницы, а не только в шапке сайте

←Предыдущий

Следующий→

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

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

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

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

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

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

  • Почему не стоит использовать 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

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

Отправить

Поделиться

Поделиться

Запинить

Твитнуть

Свежак

Как создать вертикальное меню

❮ Назад Далее ❯

Узнайте, как создать вертикальное меню с помощью CSS.

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

Главная страница Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4

Попробуйте сами »

Как создать вертикальную группу кнопок

Шаг 1) Добавьте HTML:

Пример

Шаг 2) Добавьте CSS:

Пример

. vertical-menu {
  ширина: 200 пикселей; /* Установите ширину, если хотите */
}

.vertical-menu a {
  background-color: #eee; /* Серый цвет фона */
  color: black; /* Черный текст цвет */
  отображение: блок; /* Сделать так, чтобы ссылки отображались ниже друг друга */
  padding: 12px; /* Добавляем отступы */
  украшение текста: нет; /* Удалить подчеркивание из ссылок */
}

.vertical-menu a:hover {
 фоновый цвет: #ccc; /* Темно-серый фон при наведении мыши */
}

.vertical-menu a.active {
  background-color: #04AA6D; /* Добавляем зеленый цвет к ссылке «активный/текущий» */
  цвет: белый;
}

Попробуйте сами »

Меню вертикальной прокрутки

Главная Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4 Ссылка 5 Ссылка 6 Ссылка 7 Ссылка 8 Ссылка 9Ссылка 10

Задайте конкретную высоту и добавьте свойство overflow , если хотите меню с вертикальной прокруткой:

Пример

. vertical-menu {
  width: 200px;
 высота: 150 пикселей;
переполнение-у: авто;
}

Попробуйте сами »

Совет: Ознакомьтесь с нашим учебным пособием How To-Side Navigation, чтобы узнать, как создать фиксированную боковую навигацию во всю высоту.

❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

800 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Как создать адаптивную HTML-панель навигации?

HTML не нуждается в представлении. HTML расширяется как язык гипертекстовой разметки. Это самый популярный и широко используемый язык для разработки веб-приложений. Созданный в 1991 году Бернерсом-Ли, но впервые опубликованный в 1995 году, язык программирования HTML претерпел множество изменений и версий за эти годы. Выпущен в 1999, HTML 4 был популярной прорывной версией, которая привлекла большое внимание и была довольно быстро принята во всем мире, вскоре став для многих языком выбора для разработки веб-приложений. В очередной раз обновлен язык — HTML5; и был опубликован в 2012 году.

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

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

Предпосылки

  • Мы рекомендуем вам иметь базовые знания HTML и CSS, прежде чем переходить к руководству. Несмотря на то, что это простое руководство, оно поможет, если вы уже знаете самые основные понятия. У нас есть статья Что такое HTML?; Вы можете пойти проверить это.
  • Мы используем Visual Studio Code в качестве текстового редактора для этого руководства. Это простой и мощный текстовый редактор, поддерживающий множество языков, включая HTML, CSS и JavaScript.

Каталог проектов

В конце каталог проекта должен выглядеть так.

Рис.: Каталог проектов

Код

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

index.html

Это домашняя (целевая) страница сайта. Давайте продолжим и лучше поймем код в этом файле.

  <заголовок>

    <метакодировка="UTF-8" />

     0″ />

    <ссылка

      href=»https://fonts.googleapis.com/css2?family=Montserrat&display=swap»

      rel=»таблица стилей»

    />

    

    Главная

  

  <тело>

    <навигация>

      <дел>

        

Панель навигации

      

      

    

    

Это домашняя страница!

  

  • Тег отмечает начало HTML-документа.
  • Внутри тега находится тег. Этот тег используется для описания документа и импорта дополнительных файлов, которые могут потребоваться веб-приложению.
  • Импортируйте файл CSS и шрифт Google с помощью тега внутри тега.
  • Дайте заголовок этой веб-странице, используя тег внутри тега<head>.</li><li> Закройте тег<head> и запустите тег<body>. Все, что видно на веб-странице, определяется этим тегом.</li><li> Тег<nav> определяет набор навигационных ссылок, которые мы будем использовать для перехода между страницами.</li><li> Добавьте тег<div>, чтобы применить стили CSS к содержимому HTML. HTML-элементам, которые должны быть стилизованы, назначаются имена классов, которые будут связаны с определенными стилями CSS.</li><li> Используйте тег<h5><span class="ez-toc-section" id="i-23">, чтобы добавить заголовок панели навигации. </span></h5></li><li> Используйте тег<ul> для определения неупорядоченных (ненумерованных) списков.</li><li> Используйте теги<li> внутри тега<ul> для добавления элементов списка в неупорядоченный список.</li><li> Используйте тег <a>, чтобы добавить гиперссылку на любой контент на веб-странице. Мы используем это, чтобы сделать текст кликабельным и иметь возможность перемещаться между страницами на веб-сайте.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/tehnikaarenda.ru/wp-content/uploads/5/5/4/5540386714d624b9a7b05e4eb5056cc2.jpeg' /><noscript><img loading='lazy' src='/800/600/http/tehnikaarenda.ru/wp-content/uploads/5/5/4/5540386714d624b9a7b05e4eb5056cc2.jpeg' /></noscript></li><li> Используйте тег<h2><span class="ez-toc-section" id="i-24"> для добавления текста большого размера и заключите его в тег </span></h2><div>, чтобы отцентрировать его на веб-странице.</li></ul><p> Это весь код, который нам нужен для этой веб-страницы. В дальнейшем нам нужно создать еще три страницы, чтобы правильно проиллюстрировать концепцию навигации в HTML. Код в основном одинаков, поэтому давайте укажем на различия в коде между страницами.</p><h3><span class="ez-toc-section" id="html"> об.html </span></h3><p> Это вторая страница сайта с очень похожим кодом на первую. Давайте продолжим и посмотрим на различия в коде.</p><p> <!DOCTYPE HTML></p><p><html lang="ru"></p><p>   <заголовок></p><p>     <метакодировка="UTF-8" /></p><p>     <meta name="viewport" content="width=device-width, initial-scale=1.0" /></p><p>     <ссылка</p><p>       href=»https://fonts.googleapis.com/css2?family=Montserrat&display=swap»</p><p>       rel=»таблица стилей»</p><p>     /></p><p>     <link rel="stylesheet" href="../style.css" /></p><p>     <title>О нас

      

      <тело>

        <навигация>

          <дел>

            

    Панель навигации