css - 慢开汉堡菜单

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)