markdown 汉堡菜单动画集

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了markdown 汉堡菜单动画集相关的知识，希望对你有一定的参考价值。

html, body, ul, li { margin: 0; padding: 0; list-style: none; }
a { text-decoration: none; }

/* ========================================================================= */
/* !Menu 1 */
/* ========================================================================= */
#header1 { position: relative; height: 80px;  background-color: #ffbf00; z-index: 10; }

#header1 .menu-toggle { position: absolute; width: 80px; height: 100%; right: 0; cursor: pointer; background-color: #00e0ff;
    span { position: absolute; width: 22px; height: 3px; top: 50%; right: 28px; background-color: #fff; -ms-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; 
        &::before { position: absolute; width: 22px; height: 3px; top: -5px; background-color: #fff; content: ''; transition: top 0.3s 0.3s, -webkit-transform 0s 0s; transition: transform 0s 0s, top 0.3s 0.3s; transition: transform 0s 0s, top 0.3s 0.3s, -webkit-transform 0s 0s; }
        &::after { position: absolute; width: 22px; height: 3px; top: 5px; background-color: #fff; content: ''; transition: top 0.3s 0.3s, -webkit-transform 0s 0s; transition: transform 0s 0s, top 0.3s 0.3s; transition: transform 0s 0s, top 0.3s 0.3s, -webkit-transform 0s 0s; }
    }
    &.active span { height: 0; -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); transition: height 0s 0s, -webkit-transform 0.3s 0.3s; transition: transform 0.3s 0.3s, height 0s 0s; transition: transform 0.3s 0.3s, height 0s 0s, -webkit-transform 0.3s 0.3s; background-color: #fff; 
        &::before { top: 0; -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); transition: top 0.3s 0s, -webkit-transform 0.3s 0.3s; transition: top 0.3s 0s, transform 0.3s 0.3s; transition: top 0.3s 0s, transform 0.3s 0.3s, -webkit-transform 0.3s 0.3s; background-color: #fff; }
        &::after { top: 0; -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: top 0.3s 0s, -webkit-transform 0.3s 0.3s; transition: top 0.3s 0s, transform 0.3s 0.3s; transition: top 0.3s 0s, transform 0.3s 0.3s, -webkit-transform 0.3s 0.3s; background-color: #fff; }
    }
}

/* ========================================================================= */
/* !Menu 2 */
/* ========================================================================= */
#header2 { position: relative; height: 80px;  background-color: #ffbf00; margin-top: 50px; z-index: 9; }

#header2 .menu-toggle { position: absolute; width: 80px; height: 100%; right: 0; cursor: pointer; background-color: #00e0ff; z-index: 5;
    span { position: absolute; width: 22px; height: 3px; top: 50%; left: 50%; margin-top: -1.5px; margin-left: -11px; background-color: #fff; transition: transform 0.15s 0.3s;
        &::before { position: absolute; width: 22px; height: 3px; top: -6px; background-color: #fff; content: ''; transition: top 0.15s 0.75s; }
        &::after { position: absolute; width: 22px; height: 3px; top: 6px; background-color: #fff; content: ''; transition: top 0.15s 0.75s, transform 0.15s 0.9s; }
    }
    
    &.active span { -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); transition: width 0.15s 0s, -webkit-transform 0.15s 0.75s; transition: width 0.15s 0s, transform 0.15s 0.75s; transition: width 0.15s 0s, transform 0.15s 0.75s, -webkit-transform 0.15s 0.75s; background-color: #fff; 
        &::before { top: 0; transition: top 0.15s 0.15s; }
        &::after { top: 0; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); transition: top 0.15s 0.15s, transform 0.15s 0s; }
    }
}

/* ========================================================================= */
/* !Menu 3 */
/* ========================================================================= */
#header3 { position: relative; height: 80px;  background-color: #ffbf00; margin-top: 50px; }

#header3 .menu-toggle { position: absolute; width: 80px; height: 100%; right: 0; cursor: pointer; background-color: #00e0ff; 
    span { position: absolute; width: 22px; height: 3px; top: 50%; left: 50%; margin-top: -1.5px; margin-left: -11px; background-color: #fff; transition: height 0s 0.3s;
        &::before { position: absolute; width: 22px; height: 3px; top: -6px; background-color: #fff; content: ''; transition: top 0.3s 0.3s, transform 0.3s 0s; }
        &::after { position: absolute; width: 22px; height: 3px; top: 6px; background-color: #fff; content: ''; transition: top 0.3s 0.3s, transform 0.3s 0s; }
    }
    
    &.active span { height: 0; transition: height 0s 0s;
        &::before { top: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); transition: top 0.3s 0s, transform 0.3s 0.3s; }
        &::after { top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); transition: top 0.3s 0s, transform 0.3s 0.3s; }
    }
}


/* ========================================================================= */
/* !MOBILE MENU */
/* ========================================================================= */
.mobile-menu { background-color: #ffbf00; padding: 110px 20px 30px; overflow: hidden; display: none;
    > ul { margin-bottom: 30px; 
        > li { position: relative; margin-top: 25px;
            > a { display: block; color: #fff; font-size: 18px; margin-right: 50px; }
            a:hover { color: #00e0ff; }
            
            ul { display: none;
                li { margin-top: 10px; padding-left: 10px; 
                    a { color: #fff; font-size: 14px; }
                    a:hover { color: #00e0ff; }
                }
            }
        }
    }
    .menu-item-has-children {
        &::before { position: absolute; width: 8px; height: 8px; top: 8px; right: 20px; border-left: solid 2px #fff; border-top: solid 2px #fff; content: ''; -ms-transform: rotateZ(45deg); -moz-transform: rotateZ(45deg); -o-transform: rotateZ(45deg); -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); transition: transform 0.3s; pointer-events: none; }
        &.active::before { -ms-transform: rotateZ(-45deg) rotateX(180deg); -moz-transform: rotateZ(-45deg) rotateX(180deg); -o-transform: rotateZ(-45deg) rotateX(180deg); -webkit-transform: rotateZ(-45deg) rotateX(180deg); transform: rotateZ(-45deg) rotateX(180deg); }
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

jQuery(function($){

  // Mobile Menu 1
  $(".menu-toggle").click(function() {
      
    $(this).toggleClass("active");
    $(this).parent().find(".mobile-menu").stop().slideToggle(300);
      
  });

  $(".menu-item-has-children").click(function(event) {
      
      if( !$(event.target).is("a") ) {
          $(this).toggleClass("active");                    
          $(this).find("ul").stop().slideToggle(300);
      }
   
  });
});
  
<header id="header1">
    <div class="menu-toggle"><span></span></div>
    <div class="mobile-menu">
      <ul>
        <li class="menu-item-has-children">
          <a href="#">Parent Menu</a>
          <ul>
            <li>
              <a href="#">Children Menu</a>
            </li>
            <li>
              <a href="#">Children Menu</a>
            </li>
            <li>
              <a href="#">Children Menu</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Parent Menu</a>
        </li>
        <li>
          <a href="#">Parent Menu</a>
        </li>
        <li>
          <a href="#">Parent Menu</a>
        </li>
      </ul>
    </div><!-- end of #mobile-menu -->
</header>

<header id="header2">
    <div class="menu-toggle">
      <span></span>
    </div>
    <div class="mobile-menu">
      <ul>
        <li class="menu-item-has-children">
          <a href="#">Parent Menu</a>
          <ul>
            <li>
              <a href="#">Children Menu</a>
            </li>
            <li>
              <a href="#">Children Menu</a>
            </li>
            <li>
              <a href="#">Children Menu</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Parent Menu</a>
        </li>
        <li>
          <a href="#">Parent Menu</a>
        </li>
        <li>
          <a href="#">Parent Menu</a>
        </li>
      </ul>
    </div><!-- end of #mobile-menu -->
</header>

<header id="header3">
    <div class="menu-toggle">
      <span></span>
    </div>
    <div class="mobile-menu">
      <ul>
        <li class="menu-item-has-children">
          <a href="#">Parent Menu</a>
          <ul>
            <li>
              <a href="#">Children Menu</a>
            </li>
            <li>
              <a href="#">Children Menu</a>
            </li>
            <li>
              <a href="#">Children Menu</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Parent Menu</a>
        </li>
        <li>
          <a href="#">Parent Menu</a>
        </li>
        <li>
          <a href="#">Parent Menu</a>
        </li>
      </ul>
    </div>
</header>
Hamburger Menu Animations Set
-----------------------------


A [Pen](https://codepen.io/jksakura/pen/MpXqoO) by [Jake Zhong](https://codepen.io/jksakura) on [CodePen](https://codepen.io).

[License](https://codepen.io/jksakura/pen/MpXqoO/license).

以上是关于markdown 汉堡菜单动画集的主要内容，如果未能解决你的问题，请参考以下文章

在动画集结束时在 MonoTouch 中实现 CAKeyFrameAnimation 回调？

markdown 删除布鲁克林的汉堡菜单（新设置允许最多7个链接）

Android帧动画实现,防OOM,比原生动画集节约超过十倍的资源

一起Talk Android吧（第四百九十一回：动画集合AnimatorSetBuilder)

javascript [汉堡菜单]汉堡菜单切换与annimation #js

汉堡菜单/侧边菜单外观错误