меню с табом + перемещение меню

    This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

    • меню с табом + перемещение меню

      Мало ли кому пригодится меню вертикальное у себя я разбил на две части.. переключая пользователь на то что нужно фиксирует то что открыто и даже перезагрузив браузер пишем все в cookies то есть запоминает последнюю позицию,
      так же можно перетащить куда вам удобно его и позиция так же запомнится - используется drag and drop API (это базовый вариант - мой оформлен и добавлены спецэффекты , тут сами доделывайте, если что нужно спрашивайте доработаю под вас ), если не отрабатывают функции смотрите свои библиотеки.. ну , или пишите попробую помощь , мой проект делается весь в таком стиле даю возможность юзеру конфигурировать положение меню где ему удобно .. тут пример который можно адаптировать под себя, или использовать в табах

      CSS

      Source Code

      1. .draggable {
      2. position: absolute;
      3. width: 2.5vw; /* 2vw + margin */
      4. background: #f0f0f0;
      5. border: 1px solid #ccc;
      6. cursor: move;
      7. z-index: 1000;
      8. user-select: none;
      9. }
      11. .switcher {
      12. text-align: center;
      13. font-size: 1.5vw;
      14. padding: 0.5vw 0;
      15. background: #ddd;
      16. cursor: pointer;
      17. }
      19. .menu {
      20. display: none;
      21. padding: 0.3vw;
      22. }
      24. .menu.active {
      25. display: flex;
      26. flex-direction: column;
      27. gap: 0.3vw;
      28. }
      30. .square {
      31. width: 2vw;
      32. height: 2vw;
      33. background: #bbb;
      34. }
      Display All


      HTML

      Source Code

      1. <div id="menu-container" class="draggable">
      2. <div id="arrow" class="switcher">»</div>
      3. <div id="menu1" class="menu active">
      4. <!-- 9 квадратов -->
      5. <div class="square"></div><div class="square"></div><div class="square"></div>
      6. <div class="square"></div><div class="square"></div><div class="square"></div>
      7. <div class="square"></div><div class="square"></div><div class="square"></div>
      8. </div>
      10. <div id="menu2" class="menu">
      11. <!-- 9 квадратов -->
      12. <div class="square"></div><div class="square"></div><div class="square"></div>
      13. <div class="square"></div><div class="square"></div><div class="square"></div>
      14. <div class="square"></div><div class="square"></div><div class="square"></div>
      15. </div>
      16. </div>
      Display All

      JS

      Source Code

      1. <script>
      2. }
      4. // --- Переключение меню ---
      5. function switchMenu() {
      6. const isActiveMenu1 = menu1.classList.contains('active');
      7. menu1.classList.toggle('active');
      8. menu2.classList.toggle('active');
      9. arrow.textContent = isActiveMenu1 ? '«' : '»';
      10. setCookie('activeMenu', isActiveMenu1 ? 'menu2' : 'menu1');
      11. }
      13. arrow.addEventListener('click', switchMenu);
      15. // --- Загрузка активного меню из cookie ---
      16. const savedMenu = getCookie('activeMenu');
      17. if (savedMenu === 'menu2') {
      18. menu1.classList.remove('active');
      19. menu2.classList.add('active');
      20. arrow.textContent = '«';
      21. }
      23. // --- Перетаскивание ---
      24. let isDragging = false;
      25. let offsetX, offsetY;
      27. menuContainer.addEventListener('mousedown', (e) => {
      28. isDragging = true;
      29. offsetX = e.clientX - menuContainer.offsetLeft;
      30. offsetY = e.clientY - menuContainer.offsetTop;
      31. menuContainer.style.zIndex = '1001';
      32. });
      34. document.addEventListener('mousemove', (e) => {
      35. if (isDragging) {
      36. const x = e.clientX - offsetX;
      37. const y = e.clientY - offsetY;
      38. menuContainer.style.left = `${x}px`;
      39. menuContainer.style.top = `${y}px`;
      40. }
      41. });
      43. document.addEventListener('mouseup', () => {
      44. isDragging = false;
      45. menuContainer.style.zIndex = '1000';
      46. // Сохраняем позицию в cookie
      47. setCookie('menuPosition', `${menuContainer.offsetLeft},${menuContainer.offsetTop}`);
      48. });
      50. // --- Восстановление позиции из cookie ---
      51. const savedPosition = getCookie('menuPosition');
      52. if (savedPosition) {
      53. const [left, top] = savedPosition.split(',').map(Number);
      54. menuContainer.style.left = `${left}px`;
      55. menuContainer.style.top = `${top}px`;
      56. } else {
      57. // По умолчанию в центре
      58. menuContainer.style.left = `${window.innerWidth / 2 - 100}px`;
      59. menuContainer.style.top = `${window.innerHeight / 2 - 100}px`;
      60. }
      61. });
      62. </script>
      Display All

      The post was edited 1 time, last by DenPUBG ().