Бургерное меню

Вопрос к знатокам, либо я тупой, либо лыжи не едут

html

   <div class="hp-store"> 
   <!-- ============== HEADER ============== --> 
   <header class="hp-store__header"> 
     <div class="hp-store__header-inner"> 
       <!-- Mobile burger --> 
       <button class="hp-store__burger" aria-label="Меню" type="button"> 
         <span></span><span></span><span></span> 
       </button> 
  
       <!-- Logo on the LEFT --> 
       <a class="hp-store__logo" href="#"><span class="hp-store__logo-mark">F</span> 
 <span class="hp-store__logo-text">AJR</span></a> 
  
       <!-- Categories --> 
       <nav class="hp-store__nav" aria-label="Категории"> 
         <a href="#catalog" class="hp-store__link">Каталог товаров</a> 
         <a href="#" class="hp-store__link">О нас</a> 
         <a href="#" class="hp-store__link">Контакты</a> 
         <a href="#" class="hp-store__link">Индивидуальный заказ</a> 
       </nav> 
  
       <!-- Cart module --> 
       <a class="hp-store__cart" href="#opencart" aria-label="Корзина"> 
         <svg class="hp-store__cart-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"> 
           <path d="M6 7h12l-1.4 11.2a2 2 0 0 1-2 1.8H9.4a2 2 0 0 1-2-1.8L6 7Z"></path> 
           <path d="M9 7V5a3 3 0 0 1 6 0v2"></path> 
         </svg> 
         <span class="hp-store__cart-label">Корзина</span> 
         <span class="hp-store__cart-count">3</span> 
       </a> 
     </div> 
   </header>

Делаю бургерное меню (для мобильной версии), при нажатии должны выпадать так сказать «Категории», а сейчас при нажатии нихрена не выпадает😁

Попробуй

bur.zip 2.9 Kb ⬇ 13

Или пришли полный файл чтоб было понятней

Html , спасибо, уже завтра вечером буду смотреть все варианты, а то у меня уже 3 часа ночи, а с утра на работу переться

Delete
________
посл. ред. 22.07.2026 в 20:28; всего 1 раз(а); by Сталин

html

   <div class="hp-store"> 
   <!-- ============== HEADER ============== --> 
   <header class="hp-store__header"> 
     <div class="hp-store__header-inner"> 
       <!-- Mobile burger --> 
       <button class="hp-store__burger" aria-label="Меню" type="button"> 
         <span></span> 
         <span></span> 
         <span></span> 
       </button> 
  
       <!-- Logo on the LEFT --> 
       <a class="hp-store__logo" href="#"> 
         <span class="hp-store__logo-mark">F</span> 
         <span class="hp-store__logo-text">AJR</span> 
       </a> 
  
       <!-- Categories --> 
       <nav class="hp-store__nav" aria-label="Категории"> 
         <a href="#catalog" class="hp-store__link">Каталог товаров</a> 
         <a href="#" class="hp-store__link">О нас</a> 
         <a href="#" class="hp-store__link">Контакты</a> 
         <a href="#" class="hp-store__link">Индивидуальный заказ</a> 
       </nav> 
  
       <!-- Cart module --> 
       <a class="hp-store__cart" href="#opencart" aria-label="Корзина"> 
         <svg class="hp-store__cart-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 
           <!-- Пример простой иконки корзины --> 
           <path d="M3 3h2l2 12h12l2-12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> 
           <circle cx="7" cy="18" r="3" stroke="currentColor" stroke-width="2"/> 
           <circle cx="17" cy="18" r="3" stroke="currentColor" stroke-width="2"/> 
         </svg> 
       </a> 
     </div> 
   </header> 
 </div>

Сталин , Попробовал, не работает

У Вас сейчас есть кнопка-бургер, но нет JS который будет открывать меню. И скорее всего CSS для мобилки тоже не прячет `.hp-store__nav` по дефолту.

Делаем за 2 шага:

1. CSS: прячем меню на мобилке и показываем когда есть класс `is-open`

Добавь в конец своего CSS:
/* Мобильное меню */
@media (max-width: 768px) {
.hp-store__nav {
position: absolute;
top: 60px; /* высота твоего хедера */
left: 0;
right: 0;
background: #fff;
display: flex;
flex-direction: column;
padding: 16px;
gap: 12px;
border-top: 1px solid #eee;
box-shadow: 0 4px 12px rgba(0,0,0,.1);

/* вот это главное - скрываем */
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all .3s ease;
}

/* когда открыто */
.hp-store__nav.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

/* бургер показываем только на мобилке */
.hp-store__burger {
display: flex;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
}
.hp-store__burger span {
width: 24px;
height: 2px;
background: #000;
transition: .3s;
}
}

/* На десктопе бургер не нужен */
@media (min-width: 769px) {
.hp-store__burger { display: none; }
.hp-store__nav { display: flex; gap: 20px; }
}
2. JS: вешаем клик на кнопку

Вставь перед `</body>` или в свой `script.js`:

document.addEventListener('DOMContentLoaded', () => {
const burger = document.querySelector('.hp-store__burger');
const nav = document.querySelector('.hp-store__nav');

burger.addEventListener('click', () => {
nav.classList.toggle('is-open');

// опционально: анимация крестика
burger.classList.toggle('is-active');
});

// закрыть меню при клике на ссылку
nav.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
nav.classList.remove('is-open');
});
});
});
Почему у тебя "нихрена не выпадает":
1. Нет JS - кнопка просто декорация
2. Нет CSS для `.is-open` - даже если класс добавится, меню не увидит

Вставь это и должно поехать. Проверь что у тебя в хедере `position: relative` стоит, чтобы `absolute` меню правильно позиционировалось.