Ürün Menüsü

by Stanly Pokrowsky

HTML

<link rel="stylesheet" href="style.css">

  <div class="top-bar">
    <button class="menu-button" onclick="toggleMenu()">Ürünler</button>
  </div>

  <div class="menu-container" id="productMenu">
    <div class="main-categories">
      <ul>
        <li onmouseover="showSubMenu('rack')">19'' Rack Aksesuarları</li>
        <li onmouseover="showSubMenu('lighting')">Aydınlatma Ekipmanları</li>
        <li onmouseover="showSubMenu('audio')">PA & Ses Ekipmanları</li>
        <li onmouseover="showSubMenu('tripods')">Standlar & Tripodlar</li>
        <li onmouseover="showSubMenu('cables')">Kablolar & Konektörler</li>
        <li onmouseover="showSubMenu('stage')">Sahne Ekipmanları</li>
      </ul>
    </div>

    <div class="sub-menu" id="rack">
      <strong>Rack Aksesuarları</strong>
      <ul>
        <li>Teleskobik Rack Rayı</li>
        <li>Rack Çekmecesi Kilidi</li>
        <li>Panel Etiket Çerçevesi</li>
        <li>Soğutma Fan Kitleri</li>
        <li>Rack Tepsileri</li>
        <li>Güç Dağıtım Üniteleri</li>
        <li>Rack Tutucular</li>
        <li>19" Patch Panel</li>
      </ul>
    </div>

    <div class="sub-menu" id="lighting">
      <strong>Aydınlatma Ekipmanları</strong>
      <ul>
        <li>LED PAR Işıklar</li>
        <li>Moving Head</li>
        <li>DMX Kontrol Cihazları</li>
        <li>Strobe Işıklar</li>
        <li>Fresnel Spotlar</li>
        <li>Truss Aksesuarları</li>
        <li>Jel Filtreler</li>
      </ul>
    </div>

    <div class="sub-menu" id="audio">
      <strong>PA & Ses Ekipmanları</strong>
      <ul>
        <li>Hoparlörler</li>
        <li>Amfiler</li>
        <li>Mikrofonlar</li>
        <li>DJ Mixerleri</li>
        <li>Bluetooth PA Sistemleri</li>
        <li>Sinyal Dağıtıcılar</li>
      </ul>
    </div>

    <div class="sub-menu" id="tripods">
      <strong>Stantlar & Tripodlar</strong>
      <ul>
        <li>Hoparlör Standları</li>
        <li>Işık...

CSS

body {
  font-family: Arial, sans-serif;
  margin: 0;
}

.top-bar {
  background-color: #f5f5f5;
  padding: 10px;
}

.menu-button {
  background-color: #0078bc;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.menu-button:hover {
  background-color: #005f8a;
}

.menu-container {
  display: none;
  position: absolute;
  top: 50px;
  left: 0;
  background-color: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  display: flex;
  z-index: 1000;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.menu-container.show {
  opacity: 1;
  transform: translateY(0);
}

.main-categories {
  width: 250px;
  background-color: #f9f9f9;
  border-right: 1px solid #ccc;
}

.main-categories ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-categories li {
  padding: 14px 20px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  transition: background-color 0.3s;
}

.main-categories li:hover {
  background-color: #e6e6e6;
}

.sub-menu {
  display: none;
  padding: 20px;
  min-width: 300px;
  background-color: #fff;
  transform: translateX(-30px);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.sub-menu.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
}

.sub-menu strong {
  font-size: 18px;
  display: block;
  margin-bottom: 10px;
}

.sub-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sub-menu li {
  padding: 6px 0;
  cursor: pointer;
  transition: color 0.2s;
}

.sub-menu li:hover {
  color: #0078bc;
  text-decoration: underline;
}

JavaScript

function toggleMenu() {
  const menu = document.getElementById('productMenu');
  if (menu.classList.contains('show')) {
    closeMenu();
  } else {
    menu.style.display = 'flex';
    setTimeout(() => menu.classList.add('show'), 10);
  }
}

function showSubMenu(id) {
  document.querySelectorAll('.sub-menu').forEach(menu => {
    menu.classList.remove('active');
  });
  const submenu = document.getElementById(id);
  if (submenu) {
    submenu.classList.add('active');
  }
}

function closeMenu() {
  const menu = document.getElementById('productMenu');
  menu.classList.remove('show');
  setTimeout(() => {
    menu.style.display = 'none';
    document.querySelectorAll('.sub-menu').forEach(menu => {
      menu.classList.remove('active');
    });
  }, 300);
}

// Sayfa dışı tıklama algıla
document.addEventListener('click', function (event) {
  const menu = document.getElementById('productMenu');
  const button = document.querySelector('.menu-button');

  // Tıklanan yer ne menü ne de butonsa menüyü kapat
  if (!menu.contains(event.target) && !button.contains(event.target)) {
    closeMenu();
  }
});