Здравствуйте, разработчики! В этой статье мы рассмотрим, как можно создать простую адаптивную панель навигации с помощью jQuery.
Использование jQuery для создания панели навигации для устройств с меньшим разрешением помогает сделать код небольшим и чистым.
Мы можно просто использовать функцию jQuery click() и метод css() для создания панели навигации для устройств с меньшим разрешением.

Конечный результат :

Вам нужно будет создать 2 панели навигации: одну для устройств с большим разрешением и другую для устройств с малым разрешением. Убедитесь, что они оба находятся в разных div.

Мы будем использовать обычные вкладки навигации для больших разрешений и добавим панели для небольших устройств, вы можете добавить значок панели из: https://fontawesome.com/icons/bars?f=classic&s=solid”

При стилизации маленькой второй панели навигации используйте «transform: translateX(150%);» Используйте это свойство, чтобы переместить панель навигации за пределы экрана, чтобы она не была видна. и добавьте «переход: преобразование 0,3 с облегчения входа-выхода»; для перехода.

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

Мы будем использовать функцию jQuery «.click()», чтобы изменить css второй панели навигации на «transform: translateX(0);» с методом «.css()», который вернет панель навигации на экран с эффектом перехода.

Вы можете обратиться к коду ниже:

HTML:

<html>
<head>
    <title>Navbar</title>
    <link rel="stylesheet" href="style.css">
    <script src="app.js"></script>
    <script src="https://kit.fontawesome.com/ebbc1aa60f.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
    <script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
</head>
<body>
    <header>
        <div class="logo">GURURAJ.</div>
        <ul class="navigation">
            <li><a href="#banner">HOME</a></li>
            <li><a href="#shop">SHOP</a></li>
            <li><a href="#about">ABOUT</a></li>
            <li><a href="#review">REVIEWS</a></li>
            <li><a href="#contact">CONTACT</a></li>
        </ul>
        <div class="hamburger">
            <i class="fa-solid fa-bars on" id="on"></i>
        </div>
        <div class="alert">
            <ul class="navigation1">
                <i class='bx bxs-x-circle close'></i>
                <li><a href="#banner" class="out">HOME</a></li>
                <li><a href="#shop" class="out">SHOP</a></li>
                <li><a href="#about" class="out">ABOUT</a></li>
                <li><a href="#review" class="out">REVIEWS</a></li>
                <li><a href="#contact" class="out">CONTACT</a></li>
            </ul>
            </i>
        </div>
    </header>
</body>
</html>

CSS:

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

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

.alert {
    position: fixed;
    top: 5%;
    right: 2%;
    background: #111;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    padding: 20px;
    width: 300px;
    height: 100vh;
    border-radius: 10px;
    transform: translateX(150%);
    transition: transform 0.3s ease-in-out;
}

.alert .navigation1 {
    display: flex;
    flex-direction: column;
    list-style: none;
    text-align: center;
}

.alert .navigation1 li a {
    text-decoration: none;
    color: #fff;
}

.alert .navigation li a {
    text-decoration: none;
    color: #fff;
}

.alert p {
    margin: 30px;
    letter-spacing: 1px;
}

.alert i {
    display: flex;
    justify-content: flex-end;
    font-size: 30px;
    cursor: pointer;
    color: #fff;
}

body {
    background: #fff;
}

header {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 20px 60px;
    background: #111;
    position: fixed;
    border-bottom: 1px solid #aaa;
}

header .logo {
    color: #fff;
    font-weight: bold;
    font-size: 2.5em;
    text-decoration: none;
}

header ul {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    gap: 60px;
    list-style: none;
}

header .navigation li a {
    text-decoration: none;
    color: #fff;
}

header .navigation li a:hover {
    border-bottom: 1px solid #fff;
}

header .hamburger {
    display: none;
    color: #fff;
    cursor: pointer;
}

@media(max-width:991px) {
    header .navigation {
        display: none;
    }

    header .hamburger {
        display: block;
    }
}

jQuery:

        $(document).ready(function () {
            $(".on").click(function () {
                $('.alert').css({
                    'transform': 'translateX(0)',
                });
            });

            $(".close").click(function () {
                $('.alert').css({
                    'transform': 'translateX(150%)',
                });
            });

            $(".out").click(function () {
                $('.alert').css({
                    'transform': 'translateX(150%)',
                });
            })
        })

Или вы можете обратиться к следующей ссылке на исходный код:

«“https://codepen.io/gururajmath/pen/BaGjYGv””

Выход :



Безымянный дизайн.mp4
Панель навигации с использованием jQuery