<MyRusakov.ru />

Профессия Web-разработчик

Профессия Web-разработчик

Этот комплект за 8 месяцев превратит Вас в Web-разработчика с нуля. Учиться достаточно 1 час в день.

Начнёте Вы с HTML, CSS и вёрстки сайтов. Потом перейдёте к программированию и JavaScript. Затем изучите PHP, MySQL, SQL, Python. Изучите Web-фреймворки Laravel и Django. Создадите 5 своих сайтов для портфолио.

Комплект содержит:

- 540 видеоуроков

- 110 часов видео

- 1205 заданий для закрепления материала из уроков

- 5 финальных тестов

- 7 сертификатов

- 12 Бонусных курсов

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Создаем выпадающее боковое меню на HTML, CSS и JavaScript

Создаем выпадающее боковое меню на HTML, CSS и JavaScript

Доброго времени суток! В данной статье мы рассмотрим с Вами как сделать боковое меню с выпадающим подменю, причем состояние меню будет сохраняться при перезагрузке страницы. Реализация будет на чистом CSS и немного JavaScript.

Итак, код:


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autoclose menu</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">

    <style>
        *,
        *::after,
        *::before {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            min-height: 100vh;
        }

        .container {
            display: flex;
            background-color: bisque;
            min-height: 100vh;
        }

        .sidebar-menu {
            padding: 5px 0;
            background-color: rgb(214, 214, 214);
            min-width: 180px;
        }

        .content {
            padding: 5px;
            background-color: burlywood;
            flex-grow: 1;
        }

        ul {
            list-style-type: none;
            padding-left: 0;
        }

        .menu {
            margin: 0;
        }

        .menu-item {}

        .submenu-item {
            padding: 5px 8px;
        }

        .menu-item__header {
            padding: 5px 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .menu-item__header:hover,
        .submenu-item:hover {
            background-color: beige;
        }

        .menu-item__header::after {
            font-family: "Bootstrap-icons";
            content: "\F282";
            transition: transform 0.3s linear;
        }


        .menu-item__header-open::after {
            font-family: "Bootstrap-icons";
            content: "\F282";
            transform: rotate(180deg);
        }

        .submenu {
            padding-left: 0;
            transition: max-height 0.3s ease-in-out;
            max-height: 0;
            overflow: hidden;
        }

        .menu-item__header-open+.submenu {
            max-height: 500px;
        }

        .submenu-item {}
    </style>



</head>

<body>
    <div class="container">
        <aside class="sidebar-menu" id="sidebarmenu">
            <ul class="menu">
                <li class="menu-item">
                    <div class="menu-item__header">Входящие</div>
                    <ul class="submenu">
                        <li class="submenu-item">
                            <a href="">Ссылка номер №1</a>
                        </li>
                        <li class="submenu-item">item 2</li>
                        <li class="submenu-item">item 3</li>
                        <li class="submenu-item">item 4</li>
                        <li class="submenu-item">item 5</li>
                    </ul>
                </li>
                <li class="menu-item">
                    <div class="menu-item__header">Исходящие</div>
                    <ul class="submenu">
                        <li class="submenu-item">item 1</li>
                        <li class="submenu-item">item 2</li>
                        <li class="submenu-item">item 3</li>
                        <li class="submenu-item">item 4</li>
                        <li class="submenu-item">item 5</li>
                    </ul>
                </li>
                <li class="menu-item">
                    <div class="menu-item__header">Другие</div>
                    <ul class="submenu">
                        <li class="submenu-item">item 1</li>
                        <li class="submenu-item">item 2</li>
                        <li class="submenu-item">item 3</li>
                        <li class="submenu-item">item 4</li>
                        <li class="submenu-item">item 5</li>
                    </ul>

                </li>
            </ul>
        </aside>
        <main class="content">
            Some content goes here
        </main>
    </div>

    <script>

    // Функция для обработки событий в боковом меню
    function initSidebarMenu(
        settingsKey = '__sidebarMenu_',   // Ключ для сохранения состояния в локальном хранилище
        menu_id = 'sidebarmenu',          // ID корневого элемента бокового меню
        menu_item_header_class = 'menu-item__header', // Класс заголовков элементов меню
        menu_item_header_open_class = 'menu-item__header-open' // Класс для открытых подменю
    ) 
    {
        // Вспомогательная функция для преобразования строки в хэш
        const toHex = (string) => string.substring(0, 16).split('').map(char => char.charCodeAt(0)).join('');
        // Функция для генерации уникального ключа на основе текста элемента меню
        const keyHash = (key) => settingsKey + toHex(key);

        // Получение элемента бокового меню и заголовков элементов
        const menu = document.getElementById(menu_id);
        const menuItemHeaders = menu.getElementsByClassName(menu_item_header_class);

        // Перебор заголовков и установка состояния открытия/закрытия для каждого
        for (const itemHeader of menuItemHeaders) {
            const state = JSON.parse(localStorage.getItem(keyHash(itemHeader.innerText)));

            if (state) {
                itemHeader.classList.add(menu_item_header_open_class);
            }
        }

        // Добавление обработчика события для бокового меню
        menu.addEventListener('click', function (e) {
            const element = e.target;
            // Проверка, является ли элемент заголовком элемента меню
            if (element.classList.contains(menu_item_header_class)) {
                // Переключение класса для изменения стиля и сохранение состояния в локальном хранилище
                const state = element.classList.toggle(menu_item_header_open_class);
                localStorage.setItem(keyHash(element.innerText), state);
            }
        });
    }

    // Вызов функции инициализации бокового меню при загрузке страницы
    initSidebarMenu();


    </script>
</body>

</html>

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

Теперь рассмотрим код по частям:

HTML-разметка

  • Есть боковое меню с тремя категориями: "Входящие", "Исходящие", "Другие".
  • В каждой категории есть подменю с пятью элементами.
  • Главное содержимое находится в блоке .

CSS-стили

  • Определены стили для бокового меню, заголовков и подменю.
  • Используются иконы Bootstrap для стрелок, обозначающих состояние открытия/закрытия подменю.
  • Применены стили для анимации изменения цвета при наведении и анимации открытия/закрытия подменю.

JavaScript-скрипт

  • Функция initSidebarMenu инициализирует боковое меню.
  • Используется локальное хранилище браузера для сохранения состояния открытия/закрытия подменю. Ключи для хранения состояния генерируются на основе текста заголовков элементов меню.
  • При загрузке страницы функция проверяет сохраненное состояние и автоматически открывает подменю для соответствующих элементов.

Когда пользователь кликает на заголовок элемента меню, скрипт переключает класс menu-item__header-open, изменяя таким образом стиль элемента и запоминая его состояние в локальном хранилище.

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

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

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.