如何对齐左侧和全高侧导航菜单

Question

我正在尝试为我网站的平板电脑/移动设备部分构建侧边导航菜单。我不能做的是让屏幕左对齐、覆盖和全高。我是新手，想学习，有人可以帮助我吗？感谢您的回复，谢谢。

这是我想要达到的大致结果：https://codepen.io/bousahla-mounir/pen/jOypjed我对美学不感兴趣，但我想获得包含元素的全屏侧容器。

这就是我为 sidenav 所做的：在下面的示例中它是左对齐的，但在我的网站中不是因为它在列内。然后它对齐到该列的左侧而不是屏幕的最远部分。

var menu = document.querySelector(".mob_menu_button");
function mobile_menu() {
  var x = document.getElementById("mts_mobile_menu");
  if (!x.classList.contains("side_show")) {
    x.classList.add ("side_show");
    menu.innerHTML = '<span>Menu Open</span>';
 
    
  } else { 
    x.classList.add("side_hide");
    menu.innerHTML = '<span>Menu Closed</span>';

    setTimeout(function(){
     x.classList.remove("side_show");
     x.classList.remove("side_hide");  
    },500)
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/*Items menu*/

.user_menu {
  display: flex;
  flex-direction: column;
}


/*Menu header info*/

.display.name {
  font-size: 15px;
  font-weight: 500;
  color: #303238;
}

.display.mail {
  font-size: 13px;
  color: #3d5afe;
}

hr.solid {
  border-top: 1px solid #e0e0e0;
  margin: 10px 0px 10px 0px;
}


/*Text Link css*/

.user_menu.item>a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 8px 0;
  font-size: 13px;
  color: #75777D;
}

.user_menu.item:hover>a {
  color: #2E323A;
}


/*Icon Button Toggle Menu*/

.mob_menu_button {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  width: 100px;
  position: absolute;
  top: 10px;
  right: 10px;
  background: #fbfbfb !important;
  font-weight: 500 !important;
}

.icn_button {
  margin: 0;
  font-size: 14px;
}

.icn_button:before {
  margin: 0;
}

.icn_button:after {
  margin: 0;
}


/*Icon Items Menu*/
.icn_menu:before,
.icon_menu:after {
  margin: 0px;
  padding: 0px;
  font-size: 16px
}

.icn_menu {
  margin-right: 10px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}


/* User Menu For header website */
.mts_menu_container {
  display: flex;
  position: fixed;
  top: 0;
  left: 0; 
}

.mts_sidenav_box {
  position: absolute;
  margin-top: 0px;
  display: flex;
  height: 100vh;
}

.mts_sidenav_content {
  display: none;
  padding: 20px;
  background-color: #fff;
  min-width: 260px;
  border-radius: 3px;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 999;
  position: relative;
  animation: animateFromLeft .6s
}

@keyframes animateFromLeft {
  from {
    left: -500px;
    opacity: 0
  }
  to {
    left: 0;
    opacity: 1
  }
}

@keyframes animateToLeft {
  from {
    left: 0;
    opacity: 1
  }
  to {
    left: -500px;
    opacity: 0
  }
}

.side_show {
  display: block !important;
  height: 100vh;
  overflow: hidden;
}

.mts_sidenav_content.side_hide {
  animation: animateToLeft .6s
}

<button onclick="mobile_menu()" class="mob_menu_button">
     Menu
</button>

<div class="mts_mob_container">
  <div class="mts_sidenav_box">
      
   <div id="mts_mobile_menu" class="mts_sidenav_content">
       
    <div class="user_menu header">
        <span class="display name">Ciao [display_name]</span>
        <span class="display mail">[display_email]</span>
    </div>   
      
     <hr class="solid">  
     
    <div class="user_menu item">
        <a href="/account">
         <i class="icn_menu fa-regular fa-user"></i>
         <span class="link_text">Dashboard</span>
        </a>
    </div>
    
     <div class="user_menu item">
        <a href="ordini">
         <i class="icn_menu fa-regular fa-basket-shopping"></i>
         <span class="link_text">I miei ordini</span>
        </a>
    </div>
    
    <div class="user_menu item">
        <a href="libreria">
         <i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
         <span class="link_text">Downloads</span>
        </a>
    </div>
    
    <div class="user_menu item">
        <a href="impostazioni">
         <i class="icn_menu fa-regular fa-gear"></i>
         <span class="link_text">Impostazioni</span>
        </a>
    </div>
    
    <div class="user_menu item">
        <a href="wp-login.php?action=logout">
         <i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
         <span class="link_text">Logout</span>
        </a>
    </div>
   </div>
    
  </div>
</div>

Answer 1

您已经完成了大部分内容，但您在尝试过程中遗漏了一些内容：

您有一些类您没有使用并且是空白的并且导致布局问题，所以我将它们删除了。如果您需要它们，您可以将它们重新添加进去，但是当我运行您的代码时它们什么也没做，除了导致问题。

您可以将样式全局设置为没有边距、填充和 box-sizing: border-box 从 get-go 然后根据需要向下调整 CSS 但通过在开始时声明它，您不会让浏览器为您做出决定（您也不应该；您是程序员！;））。

按钮只需要绝对调整大小和位置，就像您提供的示例一样。要让菜单占据整个视口高度，请使用 100vh 单位。参见：https://www.sitepoint.com/css-viewport-units-quick-start/

看看这是否能让您到达您想去的地方，我们可以根据需要进一步排除故障。 :)

var menu = document.querySelector(".mob_menu_button");

function mobile_menu() {
  var x = document.getElementById("mts_mobile_menu");
  if (!x.classList.contains("side_show")) {
    x.classList.add("side_show");
    menu.innerHTML = '<span>Icon</span>';


  } else {
    x.classList.add("side_hide");
    menu.innerHTML = '<span>Icon</span>';

    setTimeout(function() {
      x.classList.remove("side_show");
      x.classList.remove("side_hide");
    }, 500)
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/*Items menu*/

.user_menu {
  display: flex;
  flex-direction: column;
}


/*Menu header info*/

.display.name {
  font-size: 15px;
  font-weight: 500;
  color: #303238;
}

.display.mail {
  font-size: 13px;
  color: #3d5afe;
}

hr.solid {
  border-top: 1px solid #e0e0e0;
  margin: 10px 0px 10px 0px;
}


/*Text Link css*/

.user_menu.item>a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 8px 0;
  font-size: 13px;
  color: #75777D;
}

.user_menu.item:hover>a {
  color: #2E323A;
}


/*Icon Button Toggle Menu*/

.mob_menu_button {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  width: 50px;
  position: absolute;
  top: 10px;
  right: 10px;
  background: #fbfbfb !important;
  font-weight: 500 !important;
}

.icn_button {
  margin: 0;
  font-size: 14px;
}

.icn_button:before {
  margin: 0;
}

.icn_button:after {
  margin: 0;
}


/*Icon Items Menu*/

.icn_menu:before,
.icon_menu:after {
  margin: 0px;
  padding: 0px;
  font-size: 16px
}

.icn_menu {
  margin-right: 10px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}


/* User Menu For header website */

.mts_menu_container {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  align-items: flex-start;
}

.mts_sidenav_box {
  position: absolute;
  margin-top: 17px;
  display: flex;
  height: 100vh;
}

.mts_sidenav_content {
  display: none;
  padding: 20px;
  background-color: #fff;
  min-width: 160px;
  width: 280px;
  border-radius: 3px;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 999;
  position: relative;
  animation: animateFromLeft .6s
}

@keyframes animateFromLeft {
  from {
    left: -500px;
    opacity: 0
  }
  to {
    left: 0;
    opacity: 1
  }
}

@keyframes animateToLeft {
  from {
    left: 0;
    opacity: 1
  }
  to {
    left: -500px;
    opacity: 0
  }
}

.side_show {
  display: block !important;
  height: 100vh;
  overflow: hidden;
}

.mts_sidenav_content.side_hide {
  animation: animateToLeft .6s
}

<button onclick="mobile_menu()" class="mob_menu_button">
     <span>Icon</span>
</button>

<div class="mts_menu_container">
  <div id="mts_mobile_menu" class="mts_sidenav_content">

    <div class="user_menu header">
      <span class="display name">Ciao [display_name]</span>
      <span class="display mail">[display_email]</span>
    </div>

    <hr class="solid">

    <div class="user_menu item">
      <a href="/account">
        <i class="icn_menu fa-regular fa-user">1</i>
        <span class="link_text">Dashboard</span>
      </a>
    </div>

    <div class="user_menu item">
      <a href="ordini">
        <i class="icn_menu fa-regular fa-basket-shopping">2</i>
        <span class="link_text">I miei ordini</span>
      </a>
    </div>

    <div class="user_menu item">
      <a href="libreria">
        <i class="icn_menu fa-regular fa-cloud-arrow-down">3</i>
        <span class="link_text">Downloads</span>
      </a>
    </div>

    <div class="user_menu item">
      <a href="impostazioni">
        <i class="icn_menu fa-regular fa-gear">4</i>
        <span class="link_text">Impostazioni</span>
      </a>
    </div>

    <div class="user_menu item">
      <a href="wp-login.php?action=logout">
        <i class="icn_menu fa-regular fa-arrow-right-from-bracket">5</i>
        <span class="link_text">Logout</span>
      </a>
    </div>
  </div>

</div>
</div>

如何对齐左侧和全高侧导航菜单

How to align left and full-height side nav menu

html

javascript

css

jquery

menu