Отзывчивая панель навигации в CSS

Здравствуйте, ребята, сегодня я покажу вам, как создать отзывчивую панель навигации с помощью 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 позволяет нам включить padding и border в общую ширину и высоту элемента.
  • Удаление стандартных padding и margin тела.
.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;
}
Вход в полноэкранный режим Выход из полноэкранного режима
  • Стилизация элемента бренда, удаление стандартных margin и padding тега 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%;
    }
}
Вход в полноэкранный режим Выход из полноэкранного режима
  • Использование медиа-запросов для ориентации на экраны размером менее 600px.
  • Сделать кнопку переключения гибкой, если размер экрана меньше 600px.
  • Скрытие ссылок на панели навигации при размере экрана менее 600px.
@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;
    }
}
Вход в полноэкранный режим Выход из полноэкранного режима
  • Выравнивание панели навигации по вертикали с помощью направления flex.
  • Выравнивание ссылок по вертикали с помощью flex-направления и придание элементу ширины 100% для охвата всей строки.
  • Выравнивание ссылок по центру с помощью свойства text-align для элементов li.
@media screen and (max-width:600px) {
.
.
 .navbar-links.active{
        display:flex
   }
}
Вход в полноэкранный режим Выход из полноэкранного режима
  • Создание активного класса для переключения его с помощью 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")
})
Вход в полноэкранный режим Выход из полноэкранного режима
  • Таргетинг кнопки переключения и ссылки navbar с помощью DOM.
  • Затем добавление события click для кнопки переключения и переключение класса «active» с помощью метода toggle().

СПАСИБО, ЧТО ПРОВЕРИЛИ ЭТОТ ПОСТ

Вы можете связаться со мной на —
Instagram — https://www.instagram.com/supremacism__shubh/
LinkedIn — https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email — shubhmtiwri00@gmail.com

Вы можете помочь мне пожертвованием по ссылке ниже Спасибо👇👇👇 ^^
☕ —> 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

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90

Оцените статью
devanswers.ru
Добавить комментарий