Toggle element width on click

by Stanly Pokrowsky

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="position-relative">
  <div class="cats-button" id="products-button">
    <i class="fa-solid fa-bars"></i> Products
  </div>
  
  <div class="categories-block">
    <div class="categories-container">
      <a href="#" class="category-item" data-target="brands">Brands <i class="fa-solid fa-chevron-right"></i></a>
      <a href="#" class="category-item" data-target="lighting">Lighting <i class="fa-solid fa-chevron-right"></i></a>
      <a href="#" class="category-item" data-target="audio">Audio <i class="fa-solid fa-chevron-right"></i></a>
    </div>
    
    <!-- Контейнер для подменю -->
    <div class="subcategories-wrapper"></div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

.position-relative {
  position: relative;
  display: inline-block;
}

.cats-button {
  padding: 10px 20px;
  background: #333;
  color: white;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.categories-block {
  position: absolute;
  top: 100%;
  left: 0;
  width: 800px;
  background: white;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  display: none;
  z-index: 1000;
  overflow: hidden;
}

.categories-container {
  width: 250px;
  padding: 15px;
  background: #f8f8f8;
  float: left;
  height: 300px;
}

.category-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  margin: 5px 0;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
}

.category-item:hover {
  background: #e0e0e0;
}

.subcategories-wrapper {
  width: 550px;
  float: left;
  position: relative;
  height: 300px;
  overflow: hidden;
}

.subcategory-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  background: white;
  transform: translateX(-100%);
  transition: transform 0.3s ease-out;
}

.subcategory-content.active {
  transform: translateX(0);
}

.content-columns {
  display: flex;
  gap: 30px;
}

.column {
  flex: 1;
}

.column a {
  display: block;
  padding: 8px 0;
  color: #555;
  text-decoration: none;
}

JavaScript

$(document).ready(function() {
  // Данные подменю
  const submenus = {
    brands: [
      ['Brand 1', 'Brand 2', 'Brand 3', 'Brand 4'],
      ['Brand 5', 'Brand 6', 'Brand 7', 'Brand 8']
    ],
    lighting: [
      ['LED Panels', 'Spotlights', 'Stage Lights', 'Floodlights'],
      ['Laser Systems', 'Moving Heads', 'PAR Cans', 'Strobes']
    ],
    audio: [
      ['Microphones', 'Speakers', 'Amplifiers', 'Mixers'],
      ['Processors', 'Intercoms', 'Accessories', 'Cables']
    ]
  };

  // Инициализация
  function initSubmenu(target) {
    const content = submenus[target];
    let html = '<div class="subcategory-content" id="'+target+'"><div class="content-columns">';
    
    content.forEach(column => {
      html += '<div class="column">';
      column.forEach(item => {
        html += '<a href="#">'+item+'</a>';
      });
      html += '</div>';
    });
    
    html += '</div></div>';
    return html;
  }

  // Открытие главного меню
  $('#products-button').click(function(e) {
    e.stopPropagation();
    $('.categories-block').toggle();
  });

  // Обработка наведения
  $('.category-item').hover(
    function() {
      const target = $(this).data('target');
      const $wrapper = $('.subcategories-wrapper');
      
      // Создаем/обновляем подменю
      if (!$('#'+target).length) {
        $wrapper.html(initSubmenu(target));
      }
      
      // Показываем с анимацией
      $('.subcategory-content').removeClass('active');
      $('#'+target).addClass('active');
      
      // Подсветка категории
      $('.category-item').removeClass('active');
      $(this).addClass('active');
    }
  );

  // Закрытие при клике вне меню
  $(document).click(function() {
    $('.categories-block').hide();
    $('.subcategory-content').removeClass('active');
  });

  $('.categories-block').click(function(e) {
    e.stopPropagation();
  });
});