Динамическое раскрывающееся меню с иконками: стиль и функциональность для вашего сайта

Создайте на своем сайте стильное и адаптивное раскрывающееся меню с иконками, которое добавит функциональности и улучшит пользовательский интерфейс. Легко настраиваемое и поддерживающее мобильную версию, идеально для современных сайтов.

Вставить:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Между <head>...</head>

See the Pen Динамическое раскрывающееся меню с иконками: стиль и функциональность для вашего сайта by SATAMAX.RU (@lvpzgyft-the-typescripter) on CodePen.

        HTML

  
  Показать код HTML
  
    
  <div class="menu-container">
        <ul class="menu">
            <li class="menu-item">
                <a href="jаvascript:void(0);" class="menu-link">
                    <i class="fa fa-cogs"></i> Настройки
                </a>
                <ul class="submenu">
                    <li><a href="#">Основные настройки</a></li>
                    <li><a href="#">Системные настройки</a></li>
                    <li><a href="#">Управление пользователями</a></li>
                </ul>
            </li>
            <li class="menu-item">
                <a href="jаvascript:void(0);" class="menu-link">
                    <i class="fa fa-users"></i> Пользователи
                </a>
                <ul class="submenu">
                    <li><a href="#">Добавить пользователя</a></li>
                    <li><a href="#">Список пользователей</a></li>
                    <li><a href="#">Роли пользователей</a></li>
                </ul>
            </li>
            <li class="menu-item">
                <a href="jаvascript:void(0);" class="menu-link">
                    <i class="fa fa-file-text"></i> Документы
                </a>
                <ul class="submenu">
                    <li><a href="#">Создать новый документ</a></li>
                    <li><a href="#">Мои документы</a></li>
                    <li><a href="#">Общие документы</a></li>
                </ul>
            </li>
        </ul>
    </div>
 
<!-- Автор кода SATAMAX.RU [https://satamax.ru] -->

        CSS
 
  
  Показать код CSS
  
         
.menu-container {
    max-width: 300px;
    margin: 50px auto;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
 
.menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
 
.menu-item {
    border-bottom: 1px solid #ddd;
}
 
.menu-item a {
    display: block;
    padding: 15px;
    font-size: 16px;
    color: #333;
    text-decoration: none;
    background-color: #f1f1f1;
    transition: background-color 0.3s;
}
 
.menu-item a:hover {
    background-color: #007bff;
    color: white;
}
 
.submenu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #f9f9f9;
}
 
.submenu li a {
    padding: 12px 30px;
    font-size: 14px;
    color: #666;
    text-decoration: none;
    background-color: #f9f9f9;
    transition: background-color 0.3s;
}
 
.submenu li a:hover {
    background-color: #ddd;
}
 
.fa {
    margin-right: 10px;
}
 
.menu-item.open .submenu {
    display: block;
}
 
/* Автор кода SATAMAX.RU [https://satamax.ru] */

        JS
       

  
  Показать код JS
  
    
       document.addEventListener("DOMContentLoaded", function () {
    const menuItems = document.querySelectorAll('.menu-item');
 
    menuItems.forEach(item => {
        const link = item.querySelector('.menu-link');
        link.addEventListener('click', function () {
            item.classList.toggle('open');
        });
    });
});