Медленное открытие меню гамбургера

Question

Я изо всех сил пытался заставить мое меню гамбургера медленно открываться. Мне потребовалось много времени, чтобы даже создать его.:) Может кто-нибудь сказать мне, если этот код CSS позволяет его постепенно открывать?

http://codepen.io/kiddigit/pen/EKRgQz

@media only screen and (max-width: 700px) {
    body {
        background-color: #white;
    }
    img {max-width: 100%; padding-bottom: 10px;
    }
    h1 {
        font-size: 30px;
    }


.wrapper {
    border: 0px;
    padding: 1px;
    background-color: white;
}
    .content {
        background-color: white;
        border: none;
        margin-left: 100px;
        margin-right: 100px;
    }

    .menu-btn div{
         float: left;
         padding-right: 0px;
         margin-top: 0em;
         line-height: 1.2;
         font-size: 18px;
         font-weight: 200;
         vertical-align: middle;
         z-index: 99;
    }

    .menu-btn span {
         display: block;
         width: 25px;
         height: 4px;
         margin-bottom: 5px;
         background: rgb(0,0,0);
         z-index: 99;
    }

        .menu-btn span:last-of-type {
            margin-bottom: 0;
        }

    .responsive-menu{
         display: none;
         overflow: hidden;
    }

    .responsive-menu ul {
          width: 80px;
          float: left;
          margin-right: 0;
          margin: 0;
    }

    .main-nav {
        border: none;
    }

    a {
        font-size: 10px;
        color: white;
    }

    .responsive-menu li {
        padding-left: 5px;
        font-size: 10px;
          line-height: 25px;
          list-style-type: none;
          background-color: black;  
    }

    .expand {
        display: block !important; 
    }

Answer 1

$( '.menu-btn' ).click(function(){
    $('.responsive-menu').slideToggle('slow');
});

UPD: плавное появление элемента при его изменении display от none в block не может быть достигнуто с помощью CSS. JQuery имеет несколько функций для этого, toggle () и slideToggle (). slideToggle выглядит лучше для выпадающего меню, поскольку изменяет высоту элемента с 0 до его естественной высоты. В скобках вы можете добавить скорость анимации, slow равно 600 миллисекундам, время в миллисекундах также может быть использовано: $('.responsive-menu').slideToggle(500)