Это руководство поможет вам создать гибкую раскрывающуюся панель навигации, используя только CSS, с помощью CSS flexbox и checkbox hack”. Для этого необходимы базовые знания HTML и CSS.

Верхняя панель навигации необходима для любого веб-сайта. Большинство сайтов имеют аналогичную структуру для выпадающего меню навигации, но различаются стилями и реализацией. Вот одна из реализаций, которую можно использовать повсеместно — так как, она адаптивна и не требует JavaScript для переключения раскрывающегося списка на мобильных устройствах. Кроме того, для этого мы используем подход «сначала мобильные». Вот что вы научитесь создавать к концу этого урока.



Начнем.

Сначала мобильные

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

Настройка

Создайте пустой HTML-документ и назовите его index.html. Добавьте базовый скелет HTML. Если вы используете Visual Studio Code, все, что вам нужно сделать, это ввести «!» и нажмите Enter. Вы получите это.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   
</body>
</html>

Я использовал «Font Awesome» для значка меню гамбургера в правом верхнем углу. Поэтому добавьте следующую строку под тегом заголовка, чтобы иметь возможность использовать этот шрифт.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">

Создайте свою таблицу стилей и назовите ее styles.css. Свяжите таблицу стилей с вашим HTML-документом под ссылкой Font Awesome CDN, используя

<link rel="stylesheet" href="styles.css">


Я использовал это изображение ниже в качестве логотипа. Вы можете сохранить то же самое как logo.png или добавить свой собственный.



HTML
Добавьте следующий HTML-код в body

<header class="menu">
   <div class="menu-wrap">
       <img src="logo.png" class="logo-img" alt="Logo">
       <nav>
           <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">About</a></li>
               <li><a href="#">Services</a></li>
               <li><a href="#">Contact</a></li>
           </ul>
       </nav>
       <i class="fa fa-bars menu-icon"></i>
   </div>
</header>


У нас есть header элемент, который будет формировать темную панель навигации, содержащую все остальное.

Существует menu-wrapdiv, который служит контейнером для логотипа, навигационных ссылок и значка меню. Вы не увидите ничего интересного, если откроете этот файл в браузере. Итак, давайте добавим немного CSS

CSS

В вашем styles.css начнем с некоторых общих стилей для всех элементов:

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: sans-serif;
}

Добавьте эти стили в элемент заголовка.

header {
   height: 70px;
   background-color: #22292F;
   padding: 10px 0;
}

Теперь вы увидите темную панель навигации, занимающую всю ширину браузера.

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

Теперь добавьте эти styles в class menu-wrap:

.menu-wrap {
   display: flex;
   justify-content: space-between;
   padding: 0 15px;
}

Мы используем, display:flex чтобы все дочерние элементы занимали свободное пространство по горизонтали. Свойство justify-content настроено так, чтобы space-between эти элементы растягивались как можно дальше друг от друга.

Давайте стилизуем каждый из этих дочерних элементов один за другим.

.logo-img {
   height: 50px;
}
.menu-icon {
   font-size: 2.4em;
   color: #ffffff;
   line-height: 50px;
}

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

Сначала добавьте:

nav {
   position: absolute;
   background-color: #3D4852;
   top:70px;
   left:0;
   width: 100%;
}

Теперь стилизуйте список и ссылки:

nav ul {
   list-style-type: none;
}
nav ul li {
   padding: 0 15px;
}
nav ul li a {
   display: inline-block;
   padding: 12px;
   /* Add your custom styles below to change appearance of links */
   color: #DAE1E7;
   text-decoration: none;
   letter-spacing: 0.05em;
}

Также добавьте стили наведения и фокуса для ссылок:

nav ul li a:hover, nav ul li a:focus {
   color: #eb6f4a;
}

Теперь вы должны увидеть это:

Это меню сначала должно быть скрыто и появляться при щелчке значка. Так что добавьте эти дополнительные стили max-height, overflowа transition также к nav ul элементу:

nav ul li a:hover, nav ul li a:focus {
   color: #eb6f4a;
}

Это скроет все меню, потому что max-height 0 и overflow hidden. Причина, по которой мы не используем display:none скрытие меню, заключается в том, что нам нужен эффект анимации сползания меню вниз (эффект раскрывающегося списка), который может быть достигнут только с помощью max-height свойства.

Checkbox hack”

Что это за checkbox hack”? Это самая важная часть этого урока. Читайте внимательно.

Теперь нам нужно переключить отображение меню, используя только CSS - без JavaScript. Лучший способ сделать это — использовать скрытый элемент checkbox. Мы используем значок гамбургера в качестве метки для этого элемента checkbox.

После того, как метка нажата, флажок будет установлен, и, следовательно, мы можем использовать селектор псевдокласса «: checked» для отображения меню!

Прочитав это, можно было сказать «Ага!» момент для вас, или это могло запутать еще больше. В любом случае, давайте посмотрим на реализацию.

HTML

В index.html добавьте checkbox элемент перед nav элементом:

<input type="checkbox" id="checkbox">

ПРИМЕЧАНИЕ: действительно важно добавить его до nav, а не после. Потому что в CSS есть селектор для следующего брата, но не для предыдущего. Вы скоро это поймете.

Кроме того, окружать menu-iconсlabel

<label for="checkbox">
   <i class="fa fa-bars menu-icon"></i>
</label>

Здесь for=”checkbox” проверяется, что флажок устанавливается / снимается всякий раз, когда нажимается эта метка.

CSS

Нам нужно сначала скрыть флажок. В styles.css, добавьте это:

#checkbox {
   display: none;
}

Вот суть кода:

#checkbox:checked ~ nav ul {
   max-height: 200px;
   padding: 15px 0;
   transition: all 0.5s;
}

Этот ~ символ является общим родственным селектором, который разделяет два селектора ( #checkbox:checkedи nav ul) и соответствует второму элементу, только если он следует за первым элементом. Разберитесь с общим родственным селектором лучше на нескольких примерах. Это означает, что когда флажок установлен, меню скользит вниз, потому что max-height идет от 0 до большого числа.

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

Для больших экранов

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

Давайте добавим несколько медиа-запросов для размера планшета и выше, чтобы отображать ссылки напрямую вместо значка меню. В styles.css добавьте этот медиа-запрос:

@media (min-width: 768px) {
}

В этом сначала скройте значок меню

@media (min-width: 768px) {
  .menu-icon {
     display: none;
  }
}

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

Теперь добавьте стили, чтобы расположить nav элемент относительно друг друга и изменить цвет его фона. Затем добавить display:inline-flex для nav ul li размещать ссылки рядом друг с другом.

@media (min-width: 768px) {
  nav {
    position: relative;
    top:-10px;
    background-color: transparent;
  }
  nav ul {
    max-height: 70px;
    padding: 15px 0;
    text-align: right;
  }
  nav ul li {
    display: inline-flex;
    padding-left: 20px;
  }
}


Поздравляю!

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

Ваш недавно изученный checkbox hack” можно использовать и в других местах!

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

Скачать исходный код

Комментарии ()

    Написать комментарий