A group of super cool hamburger icon morphing animation effects

Brief tutorials

Hamburgers is an ultra-cool hamburger icon Morphing animation effect CSS3 Animation library. This set of hamburger icon animations includes 18 different types of hamburger morph animations, and you can customize your own hamburger icon warp animation with sass files.

Installation

You can install the hamburgers hamburger morph animation via Bower or NPM.

Bower Install CSS-HAMBURGERSNPM Install hamburgers

How to use

Using the hamburger Morph animation effect requires the introduction of the Hamburgers.css file in the page

<link href= "Dist/hamburgers.css" rel= "stylesheet" ></link>

HTML structure

The HTML structure of the Hamburger icon morphing animation effect is as follows:

<button class= "Hamburger" type= "button" >  <span class= "Hamburger-box" >    <span class= " Hamburger-inner "></span>  </span></button>

You can also use <div> to replace button elements.

<div class= "Hamburger" type= "button" >  <div class= "Hamburger-box" >    <div class= " Hamburger-inner "></div>  </div></div>

You can then add the corresponding class class to get the corresponding hamburger icon warp animation.

<button class= "Hamburger hamburger--collapse" type= "button" >  <span class= "Hamburger-box" >    < Span class= "Hamburger-inner" ></span>  </span></button>

Here are the class classes of all the hamburger variants you can choose from.

• Hamburger--arrow

• Hamburger--arrow-r

• Hamburger--arrowalt

• Hamburger--arrowalt-r

• Hamburger--boring

• Hamburger--collapse

• Hamburger--collapse-r

• Hamburger--elastic

• Hamburger--elastic-r

• Hamburger--emphatic

• Hamburger--emphatic-r

• Hamburger--slider

• Hamburger--slider-r

• Hamburger--spin

• Hamburger--spin-r

• Hamburger--squeeze

• Hamburger--vortex

• Hamburger--vortex-r

The class with-R represents the inverse effect of an animation without the-R class.

Finally, to trigger the hamburger icon Morph animation, you also need to add a is-active class.

<button class= "Hamburger hamburger--collapse is-active" type= "button" >  <span class= "Hamburger-box" >    <span class= "Hamburger-inner" ></span>  </span></button>

Little Tricks

When using hamburger as a menu button, it is recommended that you use the Aria property.

<button class= "Hamburger hamburger--elastic" type= "button"        aria-label= "menu" aria-controls= "Navigation" >  <span class= "Hamburger-box" >    <span class= "Hamburger-inner" ></span>  </span> </button><nav id= "Navigation" >  <!--navigation goes here--></nav>

If you are using the <div> element, they will not get the focus by default. You can add the TabIndex property and the Aria property for it.

<div class= "Hamburger hamburger--elastic" tabindex= "0"     aria-label= "menu" role= "button" aria-controls= " Navigation ">  <div class=" Hamburger-box ">    <div class=" Hamburger-inner "></div>  </div></div><nav id= "Navigation" >  <!--navigation goes here--></nav>

Alternatively, you can add a label to the hamburger icon.

<button class= "Hamburger hamburger--collapse" type= "button" >  <span class= "Hamburger-box" >    < Span class= "Hamburger-inner" ></span>  </span>  <span class= "Hamburger-label" >Menu< /span></button>

Hamburgers Hamburger icon Morph animation effect's github address is: https://github.com/jonsuh/hamburgers

Above is a group of super cool hamburger icon deformation animation effect content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

