我正试图为我网站的平板电脑/手机部分构建一个侧导航菜单.我不能做的是让屏幕左对齐，覆盖和全高.我是新来的，想学习，有人能帮我吗？谢谢你的回复.
这是我想要达到的近似结果: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>