Add transition to dropdown Menu

Question

Heyah, I have a transition for when you click the 'burger icon'(on mobile screens, max 580px) and then it becomes an 'x', I would like to also add a transition to the menu that then opens, can anyone help me how I can achieve that?

transition: all ease-in-out 0.4s;

Do I use this? and if so where do I put it?

$(document).ready(function() {
  $("#burger-container").on('click', function() {
    $(this).toggleClass("open");
  });
});

$(document).ready(function() {
  $("#burger-container").on('click', function() {
    $("header nav ul").toggleClass("open1");
    $("nav").toggleClass("open1");
  });
});

/***** BASE STYLES *****/

body{
    font-family: Raleway;
    margin: 0;
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/************************************/

.wrapper{
    max-width: 1180px;
    margin:  0 auto;
}

h1.logo {
    float: left;
    padding: 0;
    padding-left: 4%;
}

header nav h2{
    height: 0;
    margin: 0;
    text-indent: -10000px;
}

#main-banner, #main-banner img{
    width: 100%; 
}

#main-banner img{
    border-top: 2px dashed #a5053d;
    border-bottom: 4px solid #a5053d;
}

p{
    padding: 0 4%;
    text-align: justify;
    line-height: 170%;
    float: left;
}

h2{
    text-align: center;
    margin: 4px 0 0 0;
}

.bigger{
    font-size: 16.25px;
    font-weight: bold;
}

.paragraph{
    margin-bottom: 4%;
}

.work img{
    padding-right: 1%;
}

.work p{
    margin-bottom: 5%;
    padding: 0 15%;
    text-align: center;
}

.work{
    text-align: center;
}

#burger{
    height: 0;
    width: 0;
}

header{
    padding: 0;
}

nav{
    float: right;
    padding-right: 2%;
}

nav ul{
    display: flex;
}

nav li{ 
   margin: 10px 20px;
   list-style: none;
}

nav li a {
    text-decoration: none;
    color: #666666;
    font-size: 20px;   
}

a:hover {
    color: #a5053d;
    font-weight: bold;
}


/*************FOOTER************/

.links ul {
    list-style: none;
    display: block;
    margin: 0 auto;
    width: 300px;
}

.links ul li {
     display: inline-block;
}

.links ul img {
    margin: 0 4%;
    height: 40px;
    width: auto;
}

footer{
    margin-top:  15px;
}

.bottom{
    background-color: #e8e8e8;
    height: 70px;
    padding-top: 2px;
    margin-top: 150px;
}

li img:hover{
  box-shadow: 0 0 30px #c1c1c1;
    -moz-box-shadow: 0 0 30px #c1c1c1; 
    -webkit-box-shadow: 0 0 30px #c1c1c1; 
    -o-box-shadow: 0 0 30px #c1c1c1; 
  border-radius:100px;
}

/******** BURGER ********/
@media all and (max-width: 580px){

#burger-container{
    margin: 25px 0 0 0;
    width: 50px;
    float: right;
    padding-right: 70px;
}

#burger{
    cursor: pointer;
    display: block;
}

#burger span{
    background: black;
    display: block;
    width: 50px;
    height: 3px;
    margin-bottom: 10px;
    position: relative;
    top: 0;
    transition: all ease-in-out 0.4s;
}

#burger-container.open span:nth-child(2){
    width: 0;
    opacity: 0;
}

#burger-container.open span:nth-child(3){
    transform: rotate(45deg);
    top: -13px;
}

#burger-container.open span:nth-child(1){
    transform: rotate(-45deg);
    top: 13px;
}

}

/***************mobiles*********************/

@media all and (max-width: 580px){
    
nav{
    width: 100%;
    padding-right: 45px;
    background-color: #666666;
    height: 0;
}
    
header nav ul{
    height: 0;
    display: block;
    overflow: visible;
}

header nav ul.open1, nav.open1{
     height: auto;
}
    
header nav ul li{
    width: 100%;
    margin: 20px;
}
    
nav li a, nav ul li{
    color: white;
    text-align: right;
    display: block;
}

header .wrapper{
    width: 100%;
    padding: 0;
}

h1 {
    margin: 20px;
    padding: 0;
}   
    
h1.logo {
padding: 0;
margin: 20px;
}
    
header{
    padding: 0;
}

.paragraph{
   padding: 10px 20px 40px 20px;
}           

.work p{
        padding: 0 0 40px 0;
        margin: 0 20px;
}   
.work h3{
    padding: 0 20px;
}  
    
    
}









  
  
  
  heartcube
  
  
  
  
  
  




  
    
      Heartcube

      

      
        
           
           
           
        
      

      
        Main Navigation
        
          Home
          Portfolio
          Blog
        
      

  

  

  
    
  

  

    

      Betti Bremm

      A little bit about me. I'm a young and motivated Webdesigner located in West London. My journey into tech started when I was quite young already, I always loved setting up websites and my own homepages, but without coding
        it myself. I've always been fascinated with the internet, it's design and social media. I was hooked and wanted to learn how to build my own site to fit my own specific needs. That curiosity then opened a door that could never be shut. When I
        learned how to build my first website, I realized I found something that gave me the freedom & versatility I was looking for in my work. Now I've made a full switch to front-end development, where I can use my organization skills and eye for
        detail to write clean, elegant code.

      

        
        Hand-Coded HTML
        My focus is writing clean, well-formatted, semantic HTML5 by hand to make sure that the content is easy to read, easy to collaborate, trouble-shoot and accessible.

        
        Well-Organized CSS
        I pride myself on writing CSS that is easy to read and build on. I focus on keeping my CSS lean and fast to load, and I make it a habit to stay up to date on current best practices.

        
        Ease Converting Designs into Code
        You can trust me to take a designer's PSD and quickly & accurately convert it into a webpage that is pixel-perfect match.

other links of this code : Homepage or on codepen here

tao · Accepted Answer

Here's a full list of changes to (and notes on) existing snippet I made in order to enable the animation:

You can't animate transition from 0 to auto or to 100%. The only library capable of doing it is velocity.js but they use a kind of a hack to determine the value they are rendering to before animating. To better understand the underlying problem read this.
The article linked above will also explain why I changed animating height to animating max-height.
The #burger element didn't have height and width, making it difficult to use. (One had to click exactly on the lines of the burger on order to open it).
In order to calculate the proper max-height of the element, I chose to wrap your menu inside a wrapper (.animator) as it simplified the JavaScript needed to calculate the height, when opening.
There's no point into making both the container and the contents have height:0 when closed. You're only over-complicating the animation and making it harder for yourself to understand/debug what's going on. So I removed placing open1 on children, I only left it on parent.
There's no point in having more than one instance of $(document).ready(){}. Just place all the code you want to run on that event into one single wrapper.
Generally speaking, there are two types of code you want to run when a page loads:
a. DOM manipulation code - place on $(document).ready(){} - runs first
b. bind to event code - place on $(window).load(){} - runs after

Since this script was a "bind to event" code, I placed it in $(window).load(){}.

Updated pen.

Note: If you ask yourself why I didn't include a SO snippet in the answer and used your pen, the main reason is because your SO snippet is incomplete, as you used relative links for the following assets:

normalize.css,
main.css,
burger.css,
index.js

Add transition to dropdown Menu

Answers (1)

Related Questions