Меню навигации

Многоуровневое меню навигации позволяет быстро переходить по разделам и категориям. Данное меню используется и в нашей документации(слева).

HTML

Для добавления подуровней, необходимо добавить к триггеру .nav-menu-link класс .nav-menu-toggle и после этого элемента добавьте список меню, так же как и родительский, только вместо класса .nav-menu используйте класс .nav-sub-menu для всех последующих уровней. Пример можно посмотреть ниже

HTML

<ul class="nav-menu"> <li class="nav-menu-item active"><a href="#" class="nav-menu-link">Menu #1</a></li> <li class="nav-menu-item"><a href="#" class="nav-menu-link">Menu #2</a></li> <li class="nav-menu-item"> <a href="#" class="nav-menu-link nav-menu-toggle">Menu #3 <i class="fa-solid fa-caret-down"></i></a> <ul class="nav-sub-menu"> <li class="nav-menu-item"><a href="#" class="nav-menu-link">Submenu #1</a></li> <li class="nav-menu-item"><a href="#" class="nav-menu-link">Submenu #2</a></li> <li class="nav-menu-item"><a href="#" class="nav-menu-link">Submenu #3</a></li> </ul> </li> </ul>

Класс .active совместно с элементом с классом .nav-menu-item делает входящий в него элемент активированным

Если есть необходимость добавить иконки, Вы можете добавить блок .link-icon внутрь блока .nav-menu-link с вашей иконкой или текстом. Результат будет как показано ниже

HTML

Для реализации адаптивности, используйте класс .nav-menu-responsive вместе с классом .nav-menu и поместите текст из .nav-menu-link внутрь блока .link-text (без .link-icon). Результат показан ниже

HTML