我正试图为我网站的平板电脑/手机部分构建一个侧导航菜单.我不能做的是让屏幕左对齐,覆盖和全高.我是新来的,想学习,有人能帮我吗?谢谢你的回复.

这是我想要达到的近似结果: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>

推荐答案

你大部分时间都在努力,但你在try 中错过了一些东西:

你有一些没有使用的类,它们是空的,导致了布局问题,所以我把它们去掉了.如果你需要它们,你可以把它们重新添加进去,但当我运行你的代码时,它们除了引起问题之外什么都没做.

你可以在全局范围内设置你的样式,使其没有边距、填充和框大小:从一开始就给框加边框,然后根据需要调整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>

Javascript相关问答推荐

在 Vue 中显示基于props 的条件文本的其他方式?

如何解决这个错误“Uncaught TypeError: inputArgs[0].match is not a function”

两行相同代码的区别

如何根据另一个输入的值进行输入?

构建自定义选项卡组件时无法在渲染函数中使用 TransitionGroup

删除芥末 CDN 存储桶 204 错误未删除

如何将一些 Nuxt 代码转换为一些 Vue?

如何在 JavaScript 中对称拆分字符串?

正则表达式(Regex)不适用于坐标javascript的所有样本

如何使用递归函数构造 id/parentIds

在Javascript中每5秒交换一次多维数组

制作动态可调用Typescript 接口属性

无法在函数中设置状态

遵循 github 上的安装文档后,Flickity-fade 滑块不起作用; flickity 就像普通滑块一样运行

为什么我在创建 npx 后在 Docker 容器中被拒绝了权限?

如何对空格和单词“and”进行 URL 编码?

Tailwind 默认 colored颜色 类不起作用

强制用户输入字符串变成小写

如何在react 路由v6中将路径url中的id作为组件属性传递

element.replaceChildren() 函数是否适用于重复值,或者是什么阻止了它的工作