Многоуровневое раскрывающееся меню с иконками для современного сайта

Создайте уникальное и адаптивное меню с иконками и множеством уровней для вашего сайта.

Простой и стильный способ улучшить навигацию на веб-странице с использованием FontAwesome.

Подходит для мобильных и десктопных версий, идеально подходит для современных веб-дизайнов.

Подключить библиотеку если неподключенно: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> вставив между <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="#" class="menu-header">
                <i class="fa fa-home"></i> Главная
                <i class="fa fa-chevron-down"></i>
            </a>
            <ul class="submenu">
                <li><a href="#">Подраздел 1</a></li>
                <li><a href="#">Подраздел 2</a></li>
            </ul>
        </li>
        <li class="menu-item">
            <a href="#" class="menu-header">
                <i class="fa fa-cogs"></i> Услуги
                <i class="fa fa-chevron-down"></i>
            </a>
            <ul class="submenu">
                <li><a href="#">Веб-разработка</a></li>
                <li><a href="#">Дизайн</a></li>
                <li><a href="#">SEO-оптимизация</a></li>
            </ul>
        </li>
        <li class="menu-item">
            <a href="#" class="menu-header">
                <i class="fa fa-info-circle"></i> О нас
                <i class="fa fa-chevron-down"></i>
            </a>
            <ul class="submenu">
                <li><a href="#">История</a></li>
                <li><a href="#">Команда</a></li>
            </ul>
        </li>
        <li class="menu-item">
            <a href="#" class="menu-header">
                <i class="fa fa-phone"></i> Контакты
                <i class="fa fa-chevron-down"></i>
            </a>
            <ul class="submenu">
                <li><a href="#">Наши контакты</a></li>
                <li><a href="#">Обратная связь</a></li>
            </ul>
        </li>
    </ul>
</div>

        CSS
 
  
  Показать код CSS
  
         
/* Общие стили */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
body {
    font-family: 'Arial', sans-serif;
    background-color: #f5f5f5; /* Светлый фон */
    color: #333; /* Темный текст */
}
 
.menu-container {
    width: 80%;
    max-width: 600px;
    margin: 50px auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
 
.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
 
.menu-item {
    background-color: #fff; /* Белый фон для элементов */
    border-bottom: 1px solid #eee; /* Тонкая линия разделения */
}
 
.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    font-size: 18px;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    background-color: #f9f9f9;
    transition: background-color 0.3s ease, padding 0.3s ease;
}
 
.menu-header:hover {
    background-color: #007bff;
    color: #fff;
    padding-left: 20px;
    padding-right: 20px;
}
 
.menu-header i {
    margin-right: 10px;
    font-size: 20px;
    color: #007bff;
}
 
.submenu {
    display: none;
    list-style-type: none;
    padding-left: 20px;
    background-color: #f2f2f2;
    border-top: 1px solid #eee;
}
 
.submenu li {
    padding: 10px;
    font-size: 16px;
    transition: background-color 0.3s ease;
}
 
.submenu li a {
    color: #333;
    text-decoration: none;
}
 
.submenu li:hover {
    background-color: #e6e6e6;
}
 
.submenu li a:hover {
    color: #007bff;
}
 
/* Адаптивность */
@media screen and (max-width: 768px) {
    .menu-header {
        font-size: 16px;
    }
 
    .submenu li {
        font-size: 14px;
    }
}

        JS
       

  
  Показать код JS
  
    
       // Открытие/закрытие разделов раскрывающегося списка
document.querySelectorAll('.menu-header').forEach(function(header) {
    header.addEventListener('click', function() {
        const submenu = this.nextElementSibling;
 
        // Переключение видимости подменю
        if (submenu.style.display === 'block') {
            submenu.style.display = 'none';
        } else {
            // Закрыть все другие подменю
            document.querySelectorAll('.submenu').forEach(function(item) {
                item.style.display = 'none';
            });
 
            // Открыть текущее подменю
            submenu.style.display = 'block';
        }
    });
});