Question

我一直在努力让我的汉堡包菜单慢慢打开。我花了很长时间才创造它。 :)任何人都可以告诉我这个CSS代码是否允许逐渐打开它？

@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)

慢开汉堡菜单

1 个答案: