so basically I want to make my navbar slide in from the side of the screen when I click the toggle to open it, currently when I open the navbar it es from the top and has no transition

If you want to understand more of what I mean exactly, check out to see what I mean by having the navbar open from the side and transition in

HTML

<nav class="navbar"> 
    <span class="navbar-toggle" id="js-navbar-toggle"> 
        <i class="fas fa-bars"></i>
    </span> 
      <a href="#" class="logo">Title</a> 
        <ul class="navigation-bar" id="js-menu"> 
         <li><a href="../home" class="navigation-links" title="Homepage">Home</a></li> 
         <li><a href="../covers" class="navigation-links" title="Check out all my covers in one place">Covers</a></li> 
         <li><a href="../music" class="navigation-links" title="Listen to my latest music">Music</a></li> 
         <li><a href="../newsletter" class="navigation-links" title="Sign-up to the newsletter to receive early access content and latest news!">Newsletter</a></li> 
         <div class="icons">
             <li><a href="#" class="navigation-icons"><i class="fab fa-snapchat" style="padding-right: 5px;"></i> </a></li>  
             <li><a href="#" class="navigation-icons"><i class="fab fa-instagram" style="padding-right: 5px;padding-left: 5px;"></i> </a></li>
             <li><a href="#" class="navigation-icons"><i class="fab fa-youtube" style="padding-right: 5px;padding-left: 5px;"></i> </a></li> 
            <li><a href="#" class="navigation-icons"><i class="fab fa-spotify" style="padding-right: 5px;padding-left: 5px;"></i> </a></li>
            <li><a href="#" class="navigation-icons"><i class="fab fa-soundcloud" style="padding-left: 5px;"></i> </a></li>
              
         </div>
        </ul> 
</nav> 

<script>
    let mainNav = document.getElementById("js-menu"); 
    let navBarToggle = document.getElementById("js-navbar-toggle");
    navBarToggle.addEventListener("click", function() {
    mainNav.classList.toggle("active");
    });
</script>

CSS

* { 
box-sizing: border-box;
padding: 0;
margin: 0;
} 

.navbar { 
 font-size: 18px;
 background-color: #151515;
 padding-bottom: 10px;
 border-bottom: 1px solid rgba(255,255,255,.25);
} 

.icons {
  display: flex;
  justify-content: center;
}

/* This is when the screen is small */

.navigation-bar { 
 list-style-type: none;
 display: none;
 clear: left;
 margin-right: 30px;
 flex-direction: row;
 justify-content: flex-end;
}

.navigation-bar li { 
 text-align: center;
 margin: 15px 0;
} 

.navigation-links, .navigation-icons, .logo{ 
 text-decoration: none;
 font-family: 'Avro', serif;
 color: #c0a869;
}

.navigation-links:hover, .navigation-icons:hover{ 
 text-decoration: underline;
}

.logo { 
 display: inline-block;
 font-size: 22px;
 margin-top: 10px;
 margin-left: 20px;
 font-weight: 700;
}
 
.navbar-toggle { 
 position: absolute;
 top: 10px;
 right: 20px;
 cursor: pointer;
 color: #c0a869;
 font-size: 24px;
} 
 
.active { 
 display: block;
 } 
 
/* This is when the screen is big */
 
 @media screen and (min-width: 768px) { 

.navbar {
 display: flex;
 justify-content: space-between;
 padding-bottom: 0;
 height: 70px;
 align-items: center;
} 
 
.navigation-bar { 
 display: flex;
 margin-right: 30px;
 flex-direction: row;
 justify-content: flex-end;
}

.navigation-bar li { 
 margin: 0;
}
 
.navigation-links, .navigation-icons { 
 margin-left: 25px;
} 

.logo { 
 margin-top: 0;
} 
 
.navbar-toggle { 
 display: none;
} 
 
.logo:hover, .navigation-links:hover, .navigation-icons:hover { 
 color: #dec27a;
}

}

so basically I want to make my navbar slide in from the side of the screen when I click the toggle to open it, currently when I open the navbar it es from the top and has no transition

If you want to understand more of what I mean exactly, check out https://iamtomwalker. to see what I mean by having the navbar open from the side and transition in

HTML

<nav class="navbar"> 
    <span class="navbar-toggle" id="js-navbar-toggle"> 
        <i class="fas fa-bars"></i>
    </span> 
      <a href="#" class="logo">Title</a> 
        <ul class="navigation-bar" id="js-menu"> 
         <li><a href="../home" class="navigation-links" title="Homepage">Home</a></li> 
         <li><a href="../covers" class="navigation-links" title="Check out all my covers in one place">Covers</a></li> 
         <li><a href="../music" class="navigation-links" title="Listen to my latest music">Music</a></li> 
         <li><a href="../newsletter" class="navigation-links" title="Sign-up to the newsletter to receive early access content and latest news!">Newsletter</a></li> 
         <div class="icons">
             <li><a href="#" class="navigation-icons"><i class="fab fa-snapchat" style="padding-right: 5px;"></i> </a></li>  
             <li><a href="#" class="navigation-icons"><i class="fab fa-instagram" style="padding-right: 5px;padding-left: 5px;"></i> </a></li>
             <li><a href="#" class="navigation-icons"><i class="fab fa-youtube" style="padding-right: 5px;padding-left: 5px;"></i> </a></li> 
            <li><a href="#" class="navigation-icons"><i class="fab fa-spotify" style="padding-right: 5px;padding-left: 5px;"></i> </a></li>
            <li><a href="#" class="navigation-icons"><i class="fab fa-soundcloud" style="padding-left: 5px;"></i> </a></li>
              
         </div>
        </ul> 
</nav> 

<script>
    let mainNav = document.getElementById("js-menu"); 
    let navBarToggle = document.getElementById("js-navbar-toggle");
    navBarToggle.addEventListener("click", function() {
    mainNav.classList.toggle("active");
    });
</script>

CSS

* { 
box-sizing: border-box;
padding: 0;
margin: 0;
} 

.navbar { 
 font-size: 18px;
 background-color: #151515;
 padding-bottom: 10px;
 border-bottom: 1px solid rgba(255,255,255,.25);
} 

.icons {
  display: flex;
  justify-content: center;
}

/* This is when the screen is small */

.navigation-bar { 
 list-style-type: none;
 display: none;
 clear: left;
 margin-right: 30px;
 flex-direction: row;
 justify-content: flex-end;
}

.navigation-bar li { 
 text-align: center;
 margin: 15px 0;
} 

.navigation-links, .navigation-icons, .logo{ 
 text-decoration: none;
 font-family: 'Avro', serif;
 color: #c0a869;
}

.navigation-links:hover, .navigation-icons:hover{ 
 text-decoration: underline;
}

.logo { 
 display: inline-block;
 font-size: 22px;
 margin-top: 10px;
 margin-left: 20px;
 font-weight: 700;
}
 
.navbar-toggle { 
 position: absolute;
 top: 10px;
 right: 20px;
 cursor: pointer;
 color: #c0a869;
 font-size: 24px;
} 
 
.active { 
 display: block;
 } 
 
/* This is when the screen is big */
 
 @media screen and (min-width: 768px) { 

.navbar {
 display: flex;
 justify-content: space-between;
 padding-bottom: 0;
 height: 70px;
 align-items: center;
} 
 
.navigation-bar { 
 display: flex;
 margin-right: 30px;
 flex-direction: row;
 justify-content: flex-end;
}

.navigation-bar li { 
 margin: 0;
}
 
.navigation-links, .navigation-icons { 
 margin-left: 25px;
} 

.logo { 
 margin-top: 0;
} 
 
.navbar-toggle { 
 display: none;
} 
 
.logo:hover, .navigation-links:hover, .navigation-icons:hover { 
 color: #dec27a;
}

}

• javascript
• html
• css
• css-transitions
• navbar

• Just to clarify, you're talking about the mobile version of the Tom Walker navigation menu? – Gunther Commented Jan 15, 2021 at 20:04

1 Answer 1

Your logic is sound, you just need to modify your CSS to get your transition working. I'm not going to write all the CSS here but just the relevant parts so you can take it from there.

1. To make an element transition smoothly, use the 'transition' property.

.navigation-bar {
  transition: transform 1s ease-out;
}

This code says that whenever the 'transform' property changes on your element, transition between the changed values over 1 second, and 'ease-out' (it just looks better).

2. You can only 'transition' certain CSS properties

Setting the 'display: none;' rule will nullify your transition. This is because when an element has 'display: none;' it is essentially not rendered by the browser. When you then switch to 'display: block;', you can't transition between states, because up until this point, the element didn't exist at all, as far as your CSS layout is concerned.

If you want to use a transition, don't set 'display: none;' at all. Instead, use visibility, which hides the element, but still renders its dimensions and stuff. Updated code:

.navigation-bar {
  transition: transform 1s ease-out, visibility 1s;
  visibility: hidden;
}

.navigation-bar.active {
  transition: transform 1s ease-out, visibility 0s;
  visibility: visible;
}

Note a couple of things here: we added the 'visibility' property to our transition; and we added an "active" transition -> when the element bees "active", we want the visibility to take effect immediately, hence the visibility 0s. When the "active" class is removed, we want the visibility to change back to 'hidden' after 1s, hence the visibility 1s.

3. Move your element from left to right using transform: translateX()

There are plex reasons for using this over left, for example, but it's simply explained here.

Updated code:

.navigation-bar {
  transform: translateX(-300px); /* the element is transposed 300px to the left of where it's supposed to be */
  transition: transform 1s ease-out, visibility 1s;
  visibility: hidden;
  width: 300px;
}

.navigation-bar.active {
  transform: translateX(0px); /* the element is returned to where it's supposed to be */
  transition: transform 1s ease-out, visibility 0s;
  visibility: visible;
}

You'll need to add additional CSS to make sure your layout works as expected, but I wanted to just highlight the essentials aspects of the transition.

In case you're wondering how to position your nav element, you probably want to add some layout rules like so:

/*
 place at top-left corner of screen, full height, 300px wide
*/
.navigation-bar {
  height: 100vh;
  left: 0;
  position: absolute;
  top: 0;
  width: 300px;
}