Поиск...
  1. Журнал
  2. Решения и советы
  3. Верстка сайта
  4. CSS
0 ∞ 17

Как создать меню на CSS: руководство для новичков

Чтобы собрать меню на CSS, оберните список ссылок тегом <nav> и задайте расположение пунктов через flexbox. Вложенный список добавит подменю, а медиазапрос перестроит навигацию для телефона. Примеры помогут собрать разные варианты и проверить управление с клавиатуры. CSS-бургер подойдет для учебного макета, но сложное управление раскрытием потребует JavaScript.

ДШ
Данил ШемякинОбновлено 8 мин чтения ∞ 17
Содержание

Из чего состоит меню: разметка на <nav> и списке

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

Если страница содержит несколько меню, задайте им различимые названия. Например, используйте aria-label="Основная навигация" для шапки и aria-label="Разделы справки" для бокового блока. Название помогает пользователю вспомогательной программы различать навигационные области.

Сохраните пример в файле menu.html с кодировкой UTF-8. Откройте файл в браузере. На странице появятся две ссылки с маркерами списка.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Основа меню</title>
</head>
<body>
  <nav aria-label="Основная навигация">
    <ul>
      <li><a href="#">Главная</a></li>
      <li><a href="#">Статьи</a></li>
    </ul>
  </nav>
</body>
</html>

Значение href="#" служит заглушкой для учебных примеров. Перед публикацией замените его адресом соответствующей страницы. Обычной навигации не нужны роли menu и menuitem: оставьте ссылки ссылками.

Каждый следующий документ можно сохранить отдельно и открыть таким же способом. При переносе в проект копируйте стили и сам <nav>. Теги <html>, <head> и <body> повторно не добавляйте.

Перед заменой существующего меню сохраните копию его разметки и стилей.

Горизонтальное меню на flexbox

Flexbox выстраивает пункты горизонтального меню в строку. Назначьте display: flex списку, поскольку его дочерние элементы должны расположиться рядом. Свойство gap задает промежутки между пунктами без отдельных внешних отступов.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Горизонтальное меню</title>
  <style>
    body { font-family: sans-serif; }
    .horizontal {
      display: flex; /* Располагаем пункты в строку. */
      flex-wrap: wrap; /* Переносим пункты, если ширины не хватает. */
      gap: 8px; /* Оставляем промежутки между пунктами. */
      justify-content: flex-start; /* Прижимаем ряд к началу строки. */
      align-items: center; /* Выравниваем пункты по поперечной оси. */
      margin: 0;
      padding: 0;
      list-style: none; /* Убираем маркеры списка. */
    }
    .horizontal a {
      display: block; /* Делаем всю область ссылки нажимаемой. */
      padding: 12px 16px;
      color: #111;
      background: #eee;
      text-decoration: none;
    }
    .horizontal a:hover { text-decoration: underline; }
    .horizontal a:focus-visible {
      outline: 3px solid #111; /* Показываем положение клавиатурного фокуса. */
      outline-offset: 2px; /* Отделяем рамку от края ссылки. */
    }
  </style>
</head>
<body>
  <nav aria-label="Основная навигация">
    <ul class="horizontal">
      <li><a href="#">Главная</a></li>
      <li><a href="#">Статьи</a></li>
      <li><a href="#">Контакты</a></li>
    </ul>
  </nav>
</body>
</html>
Освойте основы типографики на курсах по типографике и создавайте визуально привлекательные текстовые элементы!

Свойство justify-content распределяет свободное место вдоль основной оси. В этом примере значение flex-start оставляет пункты слева. Для центрирования замените его на center. Значение space-between раздвинет пункты к краям контейнера.

Свойство align-items управляет выравниванием поперек основной оси. Для горизонтальной строки значение center выравнивает пункты по вертикали.

Чтобы сами пункты заняли одинаковую ширину, добавьте правило .horizontal > li { flex: 1; }. Здесь flex: 1 распределяет свободную ширину между пунктами. Правило .horizontal a { text-align: center; } выровняет подписи внутри ссылок.

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

Горизонтальная навигация со ссылками на разделы сайта в один ряд

Иллюстрация показывает расположение горизонтального меню. Цвета и размеры пунктов в примере задают собственные стили.

Вертикальное меню для бокового блока

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

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Вертикальное меню</title>
  <style>
    body { font-family: sans-serif; }
    .sidebar {
      width: 240px; /* Задаем ширину боковой навигации. */
      max-width: 100%; /* Не выходим за ширину родительского блока. */
    }
    .vertical {
      margin: 0;
      padding: 0;
      list-style: none; /* Убираем маркеры списка. */
    }
    .vertical li + li {
      border-top: 1px solid #777; /* Разделяем соседние пункты. */
    }
    .vertical a {
      display: block; /* Растягиваем область ссылки по ширине пункта. */
      padding: 12px 16px;
      color: #111;
      background: #eee;
      text-decoration: none;
    }
    .vertical a[aria-current="page"] {
      font-weight: bold;
      text-decoration: underline; /* Отмечаем текущую страницу не только цветом. */
      background: #ddd;
    }
    .vertical a:hover { text-decoration: underline; }
    .vertical a:focus-visible {
      outline: 3px solid #111; /* Сохраняем видимый клавиатурный фокус. */
      outline-offset: -3px; /* Рисуем рамку внутри ссылки. */
    }
  </style>
</head>
<body>
  <nav class="sidebar" aria-label="Разделы справки">
    <ul class="vertical">
      <li><a href="#" aria-current="page">Начало работы</a></li>
      <li><a href="#">Настройка проекта</a></li>
      <li><a href="#">Публикация</a></li>
    </ul>
  </nav>
</body>
</html>
Как создать горизонтальное меню на HTML и CSS

Атрибут aria-current="page" обозначает ссылку на текущую страницу. Переносите атрибут на соответствующий пункт при смене страницы. CSS только оформляет эту отметку, но не определяет адрес самостоятельно.

Ширина примера составляет 240 пикселей, а отступы ссылок – 12 и 16 пикселей. Значение max-width: 100% ограничивает блок шириной его контейнера. Селектор li + li добавляет линию всем пунктам, кроме первого.

Вертикальная навигация со ссылками на разделы сайта в боковом столбце

Выпадающее подменю

Выпадающее меню на CSS использует вложенный список внутри родительского пункта. Родителю задайте position: relative, а подменю – position: absolute. Тогда координаты подменю будут отсчитываться от родительского элемента.

Для раскрытия используйте одновременно :hover и :focus-within. Первый селектор обрабатывает наведение мыши. Второй сохраняет подменю открытым, пока фокус находится внутри родительского пункта.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Выпадающее меню</title>
  <style>
    body { font-family: sans-serif; }
    .dropdown, .submenu {
      margin: 0;
      padding: 0;
      list-style: none; /* Сбрасываем оформление обоих уровней списка. */
    }
    .dropdown {
      display: flex; /* Собираем верхний уровень в строку. */
      flex-wrap: wrap; /* Разрешаем перенос на узком экране. */
      gap: 8px;
    }
    .has-submenu {
      position: relative; /* Создаем точку отсчета для подменю. */
    }
    .dropdown a, .dropdown button {
      display: block; /* Делаем элемент нажимаемым по всей площади. */
      box-sizing: border-box; /* Включаем отступы в заданную ширину. */
      padding: 12px 16px;
      border: 0;
      font: inherit; /* Уравниваем шрифт кнопки и ссылок. */
      color: #111;
      background: #eee;
      text-decoration: none;
      text-align: left;
    }
    .dropdown button { cursor: pointer; }
    .submenu {
      display: none; /* Убираем закрытые подпункты из раскладки и обхода Tab. */
      position: absolute; /* Размещаем панель поверх следующего содержимого. */
      top: 100%; /* Прижимаем панель к нижнему краю родителя. */
      left: 0;
      width: 220px;
      max-width: 80vw; /* Ограничиваем ширину панели на узком экране. */
      z-index: 10; /* Поднимаем панель в ее контексте наложения. */
    }
    .has-submenu:hover > .submenu,
    .has-submenu:focus-within > .submenu {
      display: block; /* Раскрываем подменю мышью и клавиатурой. */
    }
    .dropdown a:hover { text-decoration: underline; }
    .dropdown a:focus-visible, .dropdown button:focus-visible {
      outline: 3px solid #111; /* Обозначаем текущий элемент клавиатуры. */
      outline-offset: -3px;
    }
    @media (hover: none) {
      .submenu {
        display: block; /* Показываем ссылки при основном вводе без удобного наведения. */
        position: static; /* Возвращаем подменю в обычный поток страницы. */
      }
    }
  </style>
</head>
<body>
  <nav aria-label="Основная навигация">
    <ul class="dropdown">
      <li><a href="#">Главная</a></li>
      <li class="has-submenu">
        <button type="button">Материалы</button>
        <ul class="submenu">
          <li><a href="#">Статьи</a></li>
          <li><a href="#">Уроки</a></li>
        </ul>
      </li>
      <li><a href="#">Контакты</a></li>
    </ul>
  </nav>
</body>
</html>
Как создать адаптивное выпадающее меню на CSS без JavaScript

Нажимайте Tab до кнопки «Материалы». Когда кнопка получит фокус, подменю должно раскрыться. Следующие нажатия переведут фокус на «Статьи» и «Уроки». После перехода к «Контактам» панель закроется, если мышь не удерживает наведение.

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

Этот CSS-вариант раскрывает панель при фокусе, но не реализует переключатель. Повторное нажатие кнопки не закрывает панель; клавиша Escape тоже не обрабатывается. Для управления раскрытием через кнопку используйте JavaScript и обновляйте aria-expanded. Не прописывайте постоянное значение этого атрибута при меняющейся видимости.

Медиазапрос (hover: none) описывает возможности основного механизма ввода. Условие выполняется, если основной ввод не поддерживает удобное наведение либо основного указателя нет. Это не признак любого сенсорного экрана. При выполнении условия CSS примера показывает подпункты в обычном потоке страницы.

Навигация с раскрытым списком дополнительных ссылок под родительским пунктом

Адаптивное меню: медиазапросы и бургер

Адаптивное меню меняет расположение пунктов при уменьшении доступной ширины. В примере точка перелома составляет 700 пикселей. Это настройка макета, которую стоит подобрать под длину собственных подписей.

Самый простой мобильный вариант оставляет навигацию открытой и перестраивает список в колонку.

Если требуется сворачивать ссылки, CSS может связать их видимость с флажком. Селектор :checked выбирает отмеченный input[type="checkbox"].

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Учебный CSS-бургер</title>
  <style>
    body { font-family: sans-serif; }
    .toggle, .toggle-label { display: none; /* Убираем переключатель на широком экране. */ }
    .mobile-menu {
      display: flex; /* Показываем настольную навигацию строкой. */
      flex-wrap: wrap;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .mobile-menu a {
      display: block; /* Расширяем нажимаемую область отступами. */
      padding: 12px 16px;
      color: #111;
      background: #eee;
      text-decoration: none;
    }
    .mobile-menu a:hover { text-decoration: underline; }
    .mobile-menu a:focus-visible, .toggle:focus-visible {
      outline: 3px solid #111; /* Оставляем флажок и ссылки видимыми при Tab. */
      outline-offset: 2px;
    }
    @media (max-width: 700px) {
      .toggle { display: inline-block; /* Показываем настоящий флажок без скрытия фокуса. */ }
      .toggle-label {
        display: inline-block;
        padding: 12px; /* Увеличиваем область нажатия подписи. */
        cursor: pointer;
      }
      .mobile-menu {
        display: none; /* Убираем закрытые ссылки из клавиатурного обхода. */
        flex-direction: column; /* Готовим вертикальное расположение пунктов. */
      }
      .toggle:checked ~ .mobile-menu {
        display: flex; /* Показываем список после включения флажка. */
      }
    }
  </style>
</head>
<body>
  <nav aria-label="Основная навигация">
    <input class="toggle" type="checkbox" id="menu-toggle">
    <label class="toggle-label" for="menu-toggle">Показать меню</label>
    <ul class="mobile-menu">
      <li><a href="#">Главная</a></li>
      <li><a href="#">Статьи</a></li>
      <li><a href="#">Контакты</a></li>
    </ul>
  </nav>
</body>
</html>

Флажок намеренно остается видимым на мобильной ширине. Перейдите к нему клавишей Tab и нажмите пробел. Когда флажок включится, ссылки появятся. Следующее нажатие Tab переведет фокус на первый пункт.

Нажатие подписи также переключит флажок благодаря связи for и id.

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

У CSS-бургера есть ограничения доступности и поведения. Пользователь вспомогательной программы получает флажок, а не кнопку раскрытия. CSS не синхронизирует aria-expanded, не закрывает меню по Escape и не возвращает фокус после программного закрытия. Если проект требует таких действий, используйте кнопку и JavaScript.

Не оставляйте подпункты зависимыми только от наведения. В итоговом примере при ширине до 700 пикселей вложенные ссылки открыты вместе с основным списком независимо от способа ввода. Такая схема позволяет выбрать подпункт без отдельного жеста раскрытия.

20 полезных сниппетов CSS для адаптивного меню

Доступность и состояния

Состояние :focus-visible выделяет элемент при клавиатурной навигации. Не удаляйте рамку фокуса без собственной заметной замены. В примерах рамка имеет толщину 3 пикселя.

Размещайте внутренние отступы на ссылке или кнопке. Тогда нажимаемой станет вся оформленная область, включая пространство вокруг подписи. В итоговом коде минимальная высота элементов составляет 44 пикселя. Это выбранный размер примера, а не универсальная декларация соответствия WCAG.

WCAG задает минимальный контраст обычного текста к фону 4,5:1.

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

Если добавляете переходы, учитывайте настройку prefers-reduced-motion. Итоговый пример отключает переход фона для пользователей, которые предпочитают уменьшенное движение. Анимация не должна задерживать доступ к ссылкам.

  1. Откройте документ и нажимайте Tab. Фокус должен последовательно проходить все видимые ссылки и кнопки.
  2. Доведите фокус до родительской кнопки подменю. Панель должна раскрыться, а следующие нажатия Tab – выбрать вложенные ссылки.
  3. Пройдите меню назад сочетанием Shift+Tab. Фокус должен оставаться заметным, включая переходы между уровнями.
  4. Уменьшите ширину окна до 700 пикселей или меньше. Включите флажок пробелом. Появится колонка ссылок с открытыми подпунктами.
  5. При ширине до 700 пикселей коснитесь подписи «Показать меню» на сенсорном экране. Основной список должен переключать видимость, а его подпункты – оставаться открытыми, пока список виден.

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

Частые ошибки новичков

  • Построение ряда через float. Свойство предназначено для обтекания и усложняет управление навигацией. Для строки пунктов используйте flexbox: он задает выравнивание и промежутки на родительском списке.
  • Цвет #c392b. Пять шестнадцатеричных цифр не образуют допустимую запись цвета. Браузер проигнорирует декларацию с таким значением. Используйте корректную запись, например #cccccc.
  • Отступ padding: 1. Ненулевой длине нужна единица измерения. Напишите padding: 1px или задайте другой осмысленный отступ. Нулевой отступ можно записать без единицы: padding: 0.
  • Повторный открывающий тег <body>. Документ должен содержать одно тело страницы. При вставке примера в готовый шаблон переносите только содержимое навигации и соответствующие стили.
  • Подменю только на :hover. Клавиатура не создает наведение мыши. Добавьте :focus-within, а для управления касаниями предусмотрите открытые подпункты на выбранной ширине или кнопку с JavaScript. Не считайте (hover: none) универсальным условием для всех сенсорных экранов.
  • Скрытый через display: none переключатель на телефоне. Такой флажок нельзя выбрать клавишей Tab. В учебном CSS-бургере оставьте сам флажок видимым.
  • Обрезанная выпадающая панель. Проверьте, нет ли у предка overflow: hidden. Увеличение z-index не отменяет обрезку содержимого этим предком.

Готовый блок меню целиком

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

На ширине до 700 пикселей список превращается в колонку. Вложенные ссылки на этой ширине остаются открытыми после включения меню.

При выполнении условия (hover: none) подменю также остается в потоке страницы. Условие относится к возможностям основного ввода, а наличие сенсорного экрана само по себе его не определяет. На широком экране при невыполнении этого условия панель раскрывают наведение и клавиатурный фокус. Ограничения CSS-переключателей сохраняются: Escape и повторное нажатие родительской кнопки здесь не закрывают подменю.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Адаптивное меню на CSS</title>
  <style>
    body {
      margin: 0;
      padding: 16px;
      font-family: sans-serif;
      color: #111;
      background: #fff;
    }
    .site-nav, .site-nav * {
      box-sizing: border-box; /* Включаем рамки и отступы в размеры элементов. */
    }
    .site-nav {
      max-width: 960px; /* Ограничиваем ширину навигационного блока. */
      margin: 0 auto; /* Центрируем блок на широкой странице. */
    }
    .nav-toggle, .nav-toggle-label {
      display: none; /* На широком экране меню открыто без переключателя. */
    }
    .nav-list, .nav-submenu {
      margin: 0;
      padding: 0;
      list-style: none; /* Убираем маркеры на обоих уровнях. */
    }
    .nav-list {
      display: flex; /* Собираем основные пункты в строку. */
      flex-wrap: wrap; /* Не допускаем переполнения длинным рядом. */
      gap: 8px;
      justify-content: flex-start; /* Располагаем пункты от начала строки. */
      align-items: center; /* Центрируем пункты по поперечной оси. */
    }
    .nav-item {
      position: relative; /* Привязываем выпадающую панель к ее пункту. */
      min-width: 0; /* Разрешаем пункту сжиматься внутри flex-контейнера. */
      max-width: 100%;
    }
    .site-nav a, .nav-parent {
      display: block; /* Делаем всю оформленную площадь нажимаемой. */
      min-height: 44px; /* Задаем выбранную для примера высоту цели. */
      padding: 12px 16px;
      border: 0;
      font: inherit; /* Сохраняем одинаковый шрифт ссылок и кнопки. */
      line-height: 1.4;
      color: #111;
      background: #eee;
      text-align: left;
      text-decoration: none;
      overflow-wrap: anywhere; /* Переносим слишком длинные непрерывные подписи. */
      transition: background-color 150ms ease; /* Плавно меняем только фон. */
    }
    .nav-parent { cursor: pointer; }
    .site-nav a:hover, .nav-parent:hover {
      background: #ddd;
      text-decoration: underline;
    }
    .site-nav a[aria-current="page"] {
      font-weight: bold;
      text-decoration: underline; /* Отмечаем текущую страницу не только цветом. */
    }
    .site-nav a:focus-visible,
    .nav-parent:focus-visible,
    .nav-toggle:focus-visible {
      outline: 3px solid #111; /* Показываем клавиатурный фокус. */
      outline-offset: -3px; /* Держим рамку внутри элемента. */
    }
    .nav-submenu {
      display: none; /* Закрытые ссылки не участвуют в обходе Tab. */
      position: absolute; /* Накладываем панель поверх следующего блока. */
      top: 100%; /* Открываем панель вплотную под родителем. */
      left: 0;
      width: 220px;
      max-width: 80vw; /* Ограничиваем ширину панели шириной окна. */
      z-index: 10; /* Поднимаем панель в текущем контексте наложения. */
      background: #eee;
    }
    .nav-submenu li + li {
      border-top: 1px solid #777; /* Разделяем соседние подпункты. */
    }
    .nav-item:hover > .nav-submenu,
    .nav-item:focus-within > .nav-submenu {
      display: block; /* Раскрываем панель мышью или клавиатурой. */
    }
    @media (hover: none) {
      .nav-submenu {
        display: block; /* Показываем подпункты при основном вводе без удобного наведения. */
        position: static; /* Не перекрываем ими другие пункты. */
        width: auto;
        max-width: none;
        padding-left: 16px; /* Визуально обозначаем вложенность. */
      }
    }
    @media (max-width: 700px) {
      .nav-toggle {
        display: inline-block; /* Оставляем настоящий флажок доступным для Tab. */
      }
      .nav-toggle-label {
        display: inline-block;
        min-height: 44px;
        padding: 12px;
        cursor: pointer;
      }
      .nav-list {
        display: none; /* Сворачиваем основную навигацию до включения флажка. */
        flex-direction: column; /* Перестраиваем пункты в колонку. */
        align-items: stretch; /* Растягиваем пункты по ширине колонки. */
      }
      .nav-toggle:checked ~ .nav-list {
        display: flex; /* Раскрываем основную навигацию. */
      }
      .nav-submenu {
        display: block; /* Показываем вложенные ссылки без второго переключателя. */
        position: static; /* Размещаем подменю внутри колонки. */
        width: auto;
        max-width: none;
        padding-left: 16px;
      }
      .nav-parent { width: 100%; /* Растягиваем кнопку до ширины пункта. */ }
    }
    @media (prefers-reduced-motion: reduce) {
      .site-nav a, .nav-parent {
        transition: none; /* Учитываем предпочтение уменьшенного движения. */
      }
    }
  </style>
</head>
<body>
  <nav class="site-nav" aria-label="Основная навигация">
    <input class="nav-toggle" type="checkbox" id="main-nav-toggle">
    <label class="nav-toggle-label" for="main-nav-toggle">Показать меню</label>
    <ul class="nav-list">
      <li class="nav-item">
        <a href="#" aria-current="page">Главная</a>
      </li>
      <li class="nav-item">
        <button class="nav-parent" type="button">Материалы</button>
        <ul class="nav-submenu">
          <li><a href="#">Статьи</a></li>
          <li><a href="#">Уроки</a></li>
          <li><a href="#">Примеры кода</a></li>
        </ul>
      </li>
      <li class="nav-item"><a href="#">О проекте</a></li>
      <li class="nav-item"><a href="#">Контакты</a></li>
    </ul>
  </nav>
</body>
</html>

Сохраните документ как menu.html и откройте его в браузере. При ширине больше 700 пикселей появится ряд пунктов. При ширине 700 пикселей или меньше появятся флажок и подпись «Показать меню».

Если вставляете несколько таких блоков, задайте каждому флажку уникальный id и измените соответствующий for.

ЗадачаКакой вариант использовать
Разместить основные разделы в шапкеГоризонтальный список на flexbox
Показать разделы справки сбокуВертикальный список с отметкой текущей страницы
Сгруппировать вложенные материалыПодменю с раскрытием через hover и focus-within
Собрать учебный мобильный макет без скриптовCSS-переключатель с видимым флажком и открытыми подпунктами
Закрывать панели по Escape и управлять состоянием кнопкиРаскрытие через JavaScript с обновлением aria-expanded

Совет от нашей редакции: перед публикацией пройдите меню клавишей Tab без мыши. Если до какой-то ссылки нельзя добраться, исправьте раскрытие до подбора цветов и анимации.

ДШ Данил Шемякинавтор

Комментарии

Оставьте свой комментарий
SB
Slavik B.

извините, забыл. Вот ссылка http://дурдыева.рф

Ответить
SB
Slavik B.

здравствуйте, помогите подвинуть меню влево. Заранее спаибо

Ответить
B
BaNru
➞ Slavik B.

Найти класс .logo и уменьшить там width: 40px; и margin: 12px 10px 0 50px; (последний параметр, то что сейчас 50px)

Например так width: 0px; и margin: 12px 10px 0 20px;

Ответить
Н
Никита

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

Ответить
B
BaNru
➞ Никита

Цвет и другие параметры меняется вот тут
#menu li ul li:hover {
background: #c392b;
}

А чтобы оставался после "клацанья" - надо воспользоваться событием onclick на javascript
https://jsfiddle.net/BaNru/ks8mffc9/1/

Ответить
J
John

Спасибо

Ответить
П
Павел

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

Ответить
B
BaNru
➞ Павел

Для самого верхнего элемента (по примерам это #menu или .navigation) добавить margin:0 auto и display:block
Получится типа такого, для первого примера

.navigation {
list-style: none; /* Отключение отображения маркеров. */
margin:0 auto;
display:block;
}

Ответить
П
Павел
➞ BaNru

пропадает фон

Ответить
B
BaNru
➞ BaNru

Какой фон? Я не могу угадать твой код по надписи "пропадает фон". Могу предположить, что ты забыл точку с запятой.

Ответить
П
Павел
➞ BaNru

в третьем примере, если в вашем коде добавить margin:0 auto и display:block и убрать float:left, то фон исчезнет

Ответить
B
BaNru
➞ BaNru

Там надо указать height в #menu, потому что на #menu li тоже применён float:left.

Ответить
П
Павел
➞ BaNru

не помогает. ладно, я разобрался по-другому. спасибо за исходный код!

Ответить
B
BaNru
➞ BaNru

Всё отлично работает
https://jsfiddle.net/BaNru/ks8mffc9/

Ответить
ДУ
Дмитрий У.

Большое спасибо!

Ответить
A
alex89

Доброго времени суток!
Попробовал сделать первое горизонтальное меню, почему то .navigation li a и .navigation li a:hover не работает.
Подскажите что не так сделал? Сайт repair89.ru

Ответить
B
BaNru
➞ alex89

И где оно там? Я не нашел, чтобы подсказать что не так.

Ответить

Популярное за неделю

  1. Как создать сайт самому в 2026: 4 способа + пошаговая инструкция 34 мин чтения
  2. Лучшие конструкторы для создания сайтов — плюсы, минусы и сравнения 22 мин чтения
  3. overflow hidden что это и почему обрезка не работает 6 мин чтения
  4. 50 примеров CSS3‑кнопок с эффектами для сайта 5 мин чтения
  5. 17 эффектных CSS‑анимаций с готовыми примерами 3 мин чтения
  6. 19 CSS‑спиннеров и прелоадеров для загрузки 5 мин чтения

Ещё в рубрике «CSS»

Способы задания шрифтов в CSS
Позиционирование в CSS: шпаргалка для начинающих
Как рассчитывать процентные значения для вертикальных свойств
Анимация перехода между display:block и display:none
12 функций CSS3, которые можно использовать
CSS-анимации: полное руководство для начинающих
Как наложить CSS‑градиент на фоновое изображение
Как сделать анимированное подчеркивание ссылок на CSS
Как стилизовать wrapper в CSS для адаптивного контейнера