How to align left and full-height side nav menu

user_19017948 0
Viewed 64

I'm trying to build a sidenavigation menu for the tablet / mobile part of my website. What I can't do is get a left-alignment of the screen, an overlay and full-height. I am new and looking to learn, can someone help me please? I appreciate any response, thanks.

This is the approximate result that I would like to achieve: https://codepen.io/bousahla-mounir/pen/jOypjed I am not interested in aesthetics, but rather I want to get the full-screen side container with the elements inside.

This is what I did for sidenav: In the example below it is aligned to the left, but in my website it is not because it is inside a column. It then aligns to the left of that column instead of the furthest part of the screen.

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>

menu css html jquery javascript
1 Answers

You were most of the way there but there's a few things you missed in your attempt:

You have some classes you aren't using and are blank and were causing layout issues, so I took them out. If you need them you can add them back in but they weren't doing anything when I ran your code except causing issues.

You can globally set your styles to have no margin, padding, and box-sizing: border-box from the get-go and then adjust down your CSS as needed but by declaring it at the start you're not letting the browser make a decision for you (nor should you; you're the programmer! ;) ).

The button just needs to be sized and positioned absolutely, just like the example you provided. To have the menu take up the entirety of the viewport height, use the 100vh unit. See: https://www.sitepoint.com/css-viewport-units-quick-start/

See if this gets you where you want to go and we can troubleshoot further as necessary. :)

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>

user_85650100
Related