如何對齊左側和全高側導航菜單

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

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

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

您可以從一開始就將您的樣式全局設置為沒有邊距、填充和框大小：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>