滑动我们的菜单 - 使子菜单与父菜单处于同一级别

Question

我正在创建滑出式多级菜单，但我不知道如何使子菜单滑块与父菜单处于同一级别。 当父项位于第二、第三和其他级别并且我打开子菜单时 - 子菜单出现在与父项相同的级别上。但我想要子菜单全高并从最顶部开始。 我现在有这个：

想要这个：

这是我的代码：

document.addEventListener("DOMContentLoaded", function() {
  const hamburgerMenu = document.querySelector('.hamburger-menu');
  const mainMenu = document.querySelector('.main-menu');
  const menuContainer = document.querySelector('.menu-container'); // Add this line

  hamburgerMenu.addEventListener('click', () => {
    mainMenu.style.left = mainMenu.style.left === '0px' ? '-250px' : '0px';
  });

  const submenuItems = document.querySelectorAll('.has-submenu');

  submenuItems.forEach(item => {
    item.addEventListener('click', (event) => {
      event.stopPropagation();
      if (!item.classList.contains('open')) {
        closeSubmenus();
      }
      item.classList.toggle('open');
    });
  });

  function closeSubmenus() {
    submenuItems.forEach(item => {
      item.classList.remove('open');
    });
  }

  // Close submenu when clicking outside
  document.addEventListener('click', (event) => {
    if (!menuContainer.contains(event.target) && mainMenu.style.left === '0px') {
      closeSubmenus();
      mainMenu.style.left = '-250px'; // Close the menu
    }
  });
});

/* Your CSS styles here */

/* Hamburger menu icon styling */
.hamburger-menu {
  cursor: pointer;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background-color: #333;
}

/* Main menu styling */
.menu-container {
  position: relative;
}

.main-menu {
  list-style: none;
  padding: 0;
  position: absolute;
  top: 50px; /* Adjust this according to your layout */
  left: -250px; /* Initial position outside the viewport */
  width: 250px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: left 0.3s ease;
    height: 100vh;
}

.main-menu li {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  position: relative;
}

/* Submenu styling */
.submenu {
  display: none;
  position: absolute;
  top: 0;
  left: 100%; /* Position next to the parent menu */
  width: 250px;
  background-color: #f9f9f9;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s ease;
}

/* Display submenu on click */
.has-submenu.open .submenu {
  display: block;
  opacity: 1;
}

<div class="menu-container">
  <div class="hamburger-menu">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </div>
  <ul class="main-menu">
    <li><a href="#">Home</a></li>
    <li class="has-submenu">
      <a href="#">Services</a>
      <ul class="submenu">
        <li><a href="#">Service 1</a></li>
        <li><a href="#">Service 2</a></li>
      </ul>
    </li>
    <li class="has-submenu">
      <a href="#">About</a>
      <ul class="submenu">
        <li><a href="#">About 1</a></li>
        <li><a href="#">About 2</a></li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

更新此：

.main-menu li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    /* remove the position relative on this element */
}

Answer 2

子菜单与父项显示在同一级别。

这就是您在使用以下 css 属性时所问的问题：

.main-menu li {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  position: relative;
}

但我想要子菜单全高并从最顶部开始。

去掉这部分：

position: relative;

来自网络文档：

relative：元素按照文档的正常流程定位，然后根据top、right、bottom、left的值相对自身进行偏移。偏移量不会影响任何其他元素的位置；因此，页面布局中为元素指定的空间与位置是静态的相同。

document.addEventListener("DOMContentLoaded", function() {
  const hamburgerMenu = document.querySelector('.hamburger-menu');
  const mainMenu = document.querySelector('.main-menu');
  const menuContainer = document.querySelector('.menu-container'); // Add this line

  hamburgerMenu.addEventListener('click', () => {
    mainMenu.style.left = mainMenu.style.left === '0px' ? '-250px' : '0px';
  });

  const submenuItems = document.querySelectorAll('.has-submenu');

  submenuItems.forEach(item => {
    item.addEventListener('click', (event) => {
      event.stopPropagation();
      if (!item.classList.contains('open')) {
        closeSubmenus();
      }
      item.classList.toggle('open');
    });
  });

  function closeSubmenus() {
    submenuItems.forEach(item => {
      item.classList.remove('open');
    });
  }

  // Close submenu when clicking outside
  document.addEventListener('click', (event) => {
    if (!menuContainer.contains(event.target) && mainMenu.style.left === '0px') {
      closeSubmenus();
      mainMenu.style.left = '-250px'; // Close the menu
    }
  });
});

/* Your CSS styles here */

/* Hamburger menu icon styling */
.hamburger-menu {
  cursor: pointer;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background-color: #333;
}

/* Main menu styling */
.menu-container {
  position: relative;
}

.main-menu {
  list-style: none;
  padding: 0;
  position: absolute;
  top: 50px; /* Adjust this according to your layout */
  left: -250px; /* Initial position outside the viewport */
  width: 250px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: left 0.3s ease;
    height: 100vh;
}

.main-menu li {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

/* Submenu styling */
.submenu {
  display: none;
  position: absolute;
  top: 0;
  left: 100%; /* Position next to the parent menu */
  width: 250px;
  background-color: #f9f9f9;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s ease;
}

/* Display submenu on click */
.has-submenu.open .submenu {
  display: block;
  opacity: 1;
}

<div class="menu-container">
  <div class="hamburger-menu">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </div>
  <ul class="main-menu">
    <li><a href="#">Home</a></li>
    <li class="has-submenu">
      <a href="#">Services</a>
      <ul class="submenu">
        <li><a href="#">Service 1</a></li>
        <li><a href="#">Service 2</a></li>
      </ul>
    </li>
    <li class="has-submenu">
      <a href="#">About</a>
      <ul class="submenu">
        <li><a href="#">About 1</a></li>
        <li><a href="#">About 2</a></li>
      </ul>
    </li>
  </ul>
</div>