Автор оригинала: FreeCodeCamp Community Member.
Чарли Оште
Во время недавнего проекта моя команда должна была удалить все следы Bootstrap. Это означало, что чрезвычайно полезная отзывчивая навбар должен быть создан с нуля. Я относительно новичок в CSS и всегда полагался на загрузку на Navbars для их простоты, поэтому я вызвался взять на себя эту задачу. Вот что я узнал и сделал на протяжении всего процесса.
В этой статье я предполагаю, что у вас есть базовые знания HTML, CSS и JavaScript – вы знаете, как связать таблицу styleshet к вашему HTML или применить стили в
У меня были оборонительные элиты критикуют мой способ делать вещи, особенно с меню Toggle Должность: абсолют – Если у вас есть лучшие способы сделать это, пожалуйста, ответьте ниже, и мы можем сделать это лучше для тысяч людей, читающих его!
Начиная
Во-первых, я начал с некоторых основных HTML для макета:
Вы можете использовать любую конвенцию именования для классов.
Теперь это еще не дает нам много. Это просто простой список предметов. Но с одной линейкой CSS мы видим мощность Flexbox.
.Navbar {
display: flex;
}Одна строка кода, и у нас уже есть наши навигационные элементы, выровненные горизонтально через верхнюю часть страницы.
Теперь давайте добавим два NAV Элементы для нашего HTML, поэтому мы можем иметь некоторые предметы слева и справа от Navbar:
И какой-то основной стайлинг на нашем Навкар Класс, который обернут все остальные элементы:
.Navbar {
background-color: #46ACC2;
display: flex;
padding: 16px;
font-family: sans-serif;
color: white;
}Конечно, вы можете выбрать собственную цветовую схему, шрифт и прокладки.
Теперь наша навка выглядит так:
WHOOP, теперь это выглядит немного лучше, но мы не можем иметь наши навигационные элементы, отображаемые вертикально. Прежде чем читать, попробуйте догадаться до того, что мы собираемся делать дальше …
Теперь наш Дисплей: Flex В .Navbar Класс больше не несет ответственности за эти предметы. Теперь он несет ответственность за их
Итак, мы меняем .Navbar__tems класс тоже:
.Navbar__Items {
display:flex;
}Теперь давайте добавим немного прокладки на наши ссылки, чтобы сделать это немного красивее:
.Navbar__Link {
padding-right: 8px;
}Теперь наш Nav Bar выглядит так:
Мы добираемся туда. Но мы также хотим второй Эконд < NAV> Tag .navbar__ Предметы - право.
Давайте просто добавим Маржа-левый: Авто к этому классу:
.Navbar__Items--right {
margin-left:auto;
}Как видите, это сейчас намного лучше. У нас уже есть полностью отзывчивый навар. Но…
Что если каждый навигационный элемент был длиннее текста? Что если бы было больше предметов?
Как видите, это не то, что мы хотим. Мы либо хотим сделать все предметы навигации на одну строку для согласованности, либо мы хотели бы, чтобы они спрятались в меню, который пользователь может переключиться.
Мы пойдем с последним, так как это намного очиститель, и нам не придется беспокоиться о том, что пользователь пытается прочитать текст на каждом предмете навигации.
гибкий направление
С помощью элемента, дисплей которого сгибается, есть также правило для направления, которое мы хотим, чтобы элементы были сгибаться. Это по умолчанию для строки, что аккуратно выравнивает все элементы по оси X.
В нашем случае мы хотели бы небольшое вертикальное меню в верхней части нашей страницы. Попробуем изменение Flex-направление на обоих .Navbar и .Navbar__tems Для столбца – это совпадает со всеми пунктами меню на оси Y – при ширине экрана 768px или ниже.
И давайте удалим это Маржа-левый со второго
@media only screen and (max-width: 768px) {
.Navbar__Items,
.Navbar {
flex-direction: column;
}
.Navbar__Items--right {
margin-left: 0;
}
}Но теперь предметы навигации всегда видны, что занимает значительное количество экрана недвижимости.
В наших медиа-запросе позволяет добавить второе правило для .Navbar__tems Так что они не видны:
@media only screen and (max-width: 768px) {
.Navbar__Items,
.Navbar {
flex-direction: column;
}
.Navbar__Items {
display:none;
}
.Navbar__Items--right {
margin-left:0;
}
}Кнопка Toggle.
Для кнопки Trggle я собираюсь использовать значок, предоставляемый Шрифт потрясающий Отказ Если вы решаете следовать исходу, просто следуйте инструкциям на их сайте, чтобы иконки интегрированы в ваш проект. Вы можете использовать любой значок, который вы хотите, или вы можете использовать простой текст, если хотите.
Теперь давайте добавим этот значок в свой HTML:
Я смело нового дополнения. Вы заметите, что этот переключатель не идет в ни один из NAV Теги, но сидит на улице с названием сайта. Имеет смысл.
Конечно, это не там, где мы хотим, чтобы это было. И еще хуже, это видно на настольных резолюциях.
Давайте исправим это. Давайте сделаем то, что мы сделали с .Navbar__tems На мобильном телефоне значок меню на рабочем столе:
.Navbar__Link-toggle {
display: none;
}Теперь давайте добавим некоторые правила в тот же класс в наших медиа-запросе:
.Navbar__Link-toggle {
align-self: flex-end;
display: initial;
position: absolute;
cursor: pointer;
}Теперь мы в значительной степени сделаны здесь. У нас наш желаемый взгляд. Но нам нужно добавить функциональность переключения в значок меню.
В вашем JavaScript добавьте:
function classToggle() {
const navs = document.querySelectorAll('.Navbar__Items')
navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
}
document.querySelector('.Navbar__Link-toggle')
.addEventListener('click', classToggle);Теперь, наконец, добавьте Navbar__Toggleshow С правилом Дисплей: Flex к вашему медиа-запросу.
Теперь у нас есть полностью отзывчивый Navbar с меню Toggle. С Flexbox это действительно так просто!
Последний код
HTML:
CSS:
.Navbar {
background-color: #46ACC2;
display: flex;
padding: 16px;
font-family: sans-serif;
color: white;
}
.Navbar__Link {
padding-right: 8px;
}
.Navbar__Items {
display: flex;
}
.Navbar__Items--right {
margin-left:auto;
}
.Navbar__Link-toggle {
display: none;
}
@media only screen and (max-width: 768px) {
.Navbar__Items,
.Navbar {
flex-direction: column;
}
.Navbar__Items {
display:none;
}
.Navbar__Items--right {
margin-left:0;
}
.Navbar__ToggleShow {
display: flex;
}
.Navbar__Link-toggle {
align-self: flex-end;
display: initial;
position: absolute;
cursor: pointer;
}
}JS:
function classToggle() {
const navs = document.querySelectorAll('.Navbar__Items')
navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
}
document.querySelector('.Navbar__Link-toggle')
.addEventListener('click', classToggle);Узнайте больше о Flexbox по адресу:
Основные понятия Flexbox Гибкий модуль коробки, обычно называемый Flexbox, был разработан в виде одномерной модели макета, а также как …
А где я узнал основы Flexbox сами:
Я только что запустил бесплатный полноценный курс Flexbox, в котором вы можете строить проекты Interactivyifiverible Projects Interactivy Bucky The CSS Course Course, который я запустил с FreeCodeCamp в декабре (более 14 000 студентов до сих пор!) Я …