如何對齊左側和全高側導航選單-有解無憂

我正在嘗試為我網站的平板電腦/移動部分構建一個側導航選單。我不能做的是讓螢屏左對齊，覆寫和全高。我是新手，想學習，有人可以幫助我嗎？我很感激任何回應，謝謝。

這是我想要達到的近似結果：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>

uj5u.com熱心網友回復：

你大部分時間都在那里，但你在嘗試中錯過了一些事情：

你有一些你沒有使用的類并且是空白的并且導致了布局問題，所以我把它們拿出來了。如果您需要它們，您可以將它們重新添加，但是當我運行您的代碼時它們沒有做任何事情，除了引起問題。

您可以從一開始就將您的樣式全域設定為沒有邊距、填充和框大小：border-box，然后根據需要調整您的 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/475382.html

標籤：javascript html jQuery css 菜单

上一篇：removeClass('data-element="xxx"');不作業

下一篇：jQueryDatatable動態顯示/隱藏列