Привет, ребята, сегодня я покажу вам, как создать адаптивную панель навигации с помощью HTML, CSS и Javascript.

Давайте начнем…

HTML -

<nav class="navbar">
      <div class="brand-title">Brand Name</div>
      <a href="#" class="toggle-button">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </a>
      <div class="navbar-links">
        <ul>
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
        </ul>
      </div>
    </nav>
  • Мы обернули все в тег nav и предоставили ему класс navbar.
  • Затем мы создали 1 div для логотипа или названия бренда, 1 тег привязки, чтобы использовать его в качестве кнопки-переключателя для небольших экранов или мобильного представления, и внутри него мы создали 3 тега span для создания полос для значков гамбургеров, 1 div для навигационные ссылки, которые содержат ссылки панели навигации.

CSS-

* {
    box-sizing:border-box;
}
body {
    margin: 0;
    padding: 0;
}
  • Свойство box-sizing позволяет нам включать отступы и границы в общую ширину и высоту элемента.
  • Удаление отступов и полей по умолчанию для тела.
.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background-color:#333;
    color:white;
}
  • Сделайте панель навигации гибкой и обеспечьте пространство между ними, чтобы название бренда было слева на одном конце, а ссылки были справа на другом конце.
  • Выровнять элементы выравнивает элементы по вертикали.
.brand-title{
    font-size: 1.5rem;
    margin:.5rem
}
.navbar-links ul{
    margin:0;
    padding: 0;
    display:flex;
}
.navbar-links li{
    list-style: none;
}
.navbar-links li a{
    text-decoration: none;
    color: white;
    padding:1rem;
    display:block
}
.navbar-links li:hover{
    background-color:#555;
}
  • Стилизация элемента бренда и удаление полей и отступов по умолчанию для тега ul и создание гибкого отображения.
  • Стилизация ссылок и тегов привязки и удаление поведения по умолчанию.
.toggle-button{
    position:absolute;
    top:.75rem;
    right: 1rem;
    display:none;
    flex-direction:column;
    justify-content: space-between;
    width:30px;
    height:21px;
}
.toggle-button .bar{
    height:3px;
    width:100%;
    background-color:white;
    border-radius:10px;
}
  • Стилизовать кнопку-переключатель, сделав ее вертикальной, чтобы полосы внутри нее были выровнены по вертикали.
  • Абсолютное положение, чтобы оно придерживалось правого верхнего края.
  • display: none, чтобы скрыть его на больших экранах.
  • Стилизация полос внутри кнопки-переключателя.
@media screen and (max-width:600px) {
    .toggle-button{
        display:flex;
    }
    .navbar-links{
        display:none;
        width: 100%;
    }
}
  • Использование медиа-запросов для таргетинга на экраны размером менее 600 пикселей.
  • Делаем кнопку-переключатель гибкой, когда размер экрана меньше 600 пикселей.
  • Скрытие ссылок панели навигации, когда размер экрана меньше 600 пикселей.
@media screen and (max-width:600px) {
.
.
.navbar{
        flex-direction:column;
        align-items: flex-start;
    }
    .navbar-links ul { 
        flex-direction:column;
        width: 100%;
    }
    .navbar-links ul li {
        text-align:center;
    }
    .navbar-links li a {
        padding: .7rem 1rem;
    }
}
  • Выравнивание панели навигации по вертикали с использованием направления гибкости.
  • Выровняйте ссылки по вертикали, используя направление гибкости, и установите ширину элемента на 100 %, чтобы покрыть всю строку.
  • Делаем ссылки центрированными, используя свойство text-align для элементов li.
@media screen and (max-width:600px) {
.
.
 .navbar-links.active{
        display:flex
   }
}d
  • Создание этого стиля активного класса для его переключения с помощью javascript, когда этот класс переключается, панель навигации на небольших экранах будет иметь эффект раскрывающегося списка.

Полный код CSS -

* {
    box-sizing:border-box;
}
body {
    margin: 0;
    padding: 0;
}
.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background-color:#333;
    color:white;
}
.brand-title{
    font-size: 1.5rem;
    margin:.5rem
}
.navbar-links ul{
    margin:0;
    padding: 0;
    display:flex;
}
.navbar-links li{
    list-style: none;
}
.navbar-links li a{
    text-decoration: none;
    color: white;
    padding:1rem;
    display:block
}
.navbar-links li:hover{
    background-color:#555;
}
.toggle-button{
    position:absolute;
    top:.75rem;
    right: 1rem;
    display:none;
    flex-direction:column;
    justify-content: space-between;
    width:30px;
    height:21px;
}
.toggle-button .bar{
    height:3px;
    width:100%;
    background-color:white;
    border-radius:10px;
}
@media screen and (max-width:600px) {
    .toggle-button{
        display:flex;
    }
    .navbar-links{
        display:none;
        width: 100%;
    }
    .navbar{
        flex-direction:column;
        align-items: flex-start;
    }
    .navbar-links ul { 
        flex-direction:column;
        width: 100%;
    }
    .navbar-links ul li {
        text-align:center;
    }
    .navbar-links li a {
        padding: .7rem 1rem;
    }
    .navbar-links.active{
        display:flex
    }
}

Javascript -

const toggleButton = document.getElementsByClassName("toggle-button")[0];
const navbarLinks = document.getElementsByClassName("navbar-links")[0];
toggleButton.addEventListener("click",() => {
    navbarLinks.classList.toggle("active")
})
  • Ориентация на кнопку-переключатель и навигационную панель с помощью DOM.
  • Затем добавьте событие click для кнопки переключения и переключение «активного» класса с помощью метода toggle().

СПАСИБО ЗА ПРОВЕРКУ ЭТОГО ПОСТА

Вы можете связаться со мной в -
Instagram — https://www.instagram.com/supremacism__shubh/
LinkedIn — https://www.linkedin.com/in/shubham-tiwari-b7544b193 /
Электронная почта — [email protected]

^^Вы можете помочь мне пожертвованием по ссылке ниже Спасибо👇👇 ^^
☕ → https://www.buymeacoffee.com/waaduheck ←

Также проверьте эти сообщения
https://dev.to/shubhamtiwari909/js-push-and-pop-with-arrays-33a2/edit

https://dev.to/shubhamtiwari909/tostring-in-js-27b

https://dev.to/shubhamtiwari909/join-in-javascript-4050



Методы массивов в JS — sort()
Здравствуйте, ребята, сегодня я буду обсуждать метод Javascript Array sort(). Сортировка — это процесс в... С тегом…dev.to



Если этот пост был полезен, пожалуйста, несколько раз нажмите кнопку аплодисментов 👏, чтобы выразить свою поддержку автору 👇

🚀Разработчики: учитесь и развивайтесь, не отставая от того, что важно, ПРИСОЕДИНЯЙТЕСЬ К FAUN.