Документация
Инсталляция
Скачайте архив или используйте
<script src="https://cdn.jsdelivr.net/gh/FranzZZz1/DynamicHeaderCDN@eighteenth/dynamicHeader.js"></script>Начало работы
HTML-разметка
Данная разметка является примером.
Классы, порядок расположения и количество элементов могут быть изменены в зависимости от требований Вашего проекта.
<header class="header">
<div class="header__container">
<a href="#" class="header__logo">
<img src="" alt="" />
</a>
<div class="header__menu-wrapper">
<nav class="header__menu">
<ul class="header__menu-list">
<li class="header__menu-item">
<a href="#" class="header__menu-link">
Menu-item
</a>
</li>
<li class="header__menu-item">
<a href="#" class="header__menu-link">
Menu-item
</a>
</li>
</ul>
</nav>
</div>
<button class="header__burger">
<span></span>
</button>
</div>
</header>
JavaScript инициализация
Все параметры, указанные в объекте, являются обязательными. Значения данных параметров установлены в качестве значений по умолчанию.
const dh = new DynamicHeader(".header", {
menuIcon: ".header__burger",
menuBody: ".header__menu-wrapper",
menuItem: ".header__menu-item",
menuLink: ".header__menu-link"
});