Hamburger Menu Animation Effects CSS

hamburger-menu-animation-effects-css

Reports: 0

Home
Forums
>
Resources
>
How To's
>
How To Add CSS Animation Effects To Your Mobile Hamburger Menu Icons
Discussion in 'How To's' started by eric, Apr 3, 2017.
Tags: Add Tags
Thread ToolsWatch ThreadSelected Posts: 0
 eric
eric
Moderator
Staff Member
Someone posted a link to the following page in the Beaver Builder Facebook group regarding Hamburger Icon Animations:

http://codepen.io/RRoberts/pen/ZBYaJr

The instant I saw it I knew I had to implement that into Dynamik! :D Especially with the recent 2.1.0 update which added the Responsive "Vertical Toggle" menu shortcodes feature which allows you to easily add custom content to those responsive menus, it was a not brainer.

Tools Used:
Genesis Framework
Dynamik Website Builder
Code linked to aboveTo make this easier for you to implement and start playing with right away I created a Custom Dynamik Skin (attached to the bottom of this post) that is simply the default Dynamik design, but with the custom code included.

So in the following screencast I walk you through how the code works as well as how to implement it either through a Dynamik Skin or through the Dynamik Custom Options (which should help if you want to implement it through other tools and themes):


The Code...

CSS:
Code:
/* ALL */

.hamburger .line {
    width: 18px;
    height: 3px;
    background-color: #aaa;
    display: block;
    margin: 2px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    border-radius: 1px;
}

.responsive-secondary-menu-container .hamburger .line {
    background-color: #888;
}

.hamburger:hover {
    cursor: pointer;
}

/* ONE */

#hamburger-1.is-active .line:nth-child(2) {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

#hamburger-1.is-active .line:nth-child(1) {
    -webkit-transform: translateY(5px) rotate(45deg);
    transform: translateY(5px) rotate(45deg);
}

#hamburger-1.is-active .line:nth-child(3) {
    -webkit-transform: translateY(-5px) rotate(-45deg);
    transform: translateY(-5px) rotate(-45deg);
}

/* TWO */

#hamburger-2.is-active .line:nth-child(1) {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
}

#hamburger-2.is-active .line:nth-child(3) {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

/* THREE */

#hamburger-3.is-active .line:nth-child(1),
#hamburger-3.is-active .line:nth-child(3) {
    width: 18px;
}

#hamburger-3.is-active .line:nth-child(1) {
    -webkit-transform: translateX(-6px) rotate(-45deg);
    transform: translateX(-6px) rotate(-45deg);
}

#hamburger-3.is-active .line:nth-child(3) {
    -webkit-transform: translateX(-6px) rotate(45deg);
    transform: translateX(-6px) rotate(45deg);
}

/* FOUR */

#hamburger-4.is-active .line:nth-child(1),
#hamburger-4.is-active .line:nth-child(3) {
    width: 18px;
}

#hamburger-4.is-active .line:nth-child(1) {
    -webkit-transform: translateX(6px) rotate(45deg);
    transform: translateX(6px) rotate(45deg);
}

#hamburger-4.is-active .line:nth-child(3) {
    -webkit-transform: translateX(6px) rotate(-45deg);
    transform: translateX(6px) rotate(-45deg);
}

/* FIVE */

#hamburger-5.is-active{
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

#hamburger-5.is-active .line:nth-child(2) {
    -webkit-transition: none;
    transition: none;
}

#hamburger-5 .line:nth-child(2) {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}


#hamburger-5.is-active .line:nth-child(2) {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

#hamburger-5.is-active .line:nth-child(1),
#hamburger-5.is-active .line:nth-child(3) {
    width: 14px;
    -webkit-transform-origin: right;
    transform-origin: right;
}

#hamburger-5.is-active .line:nth-child(1) {
    -webkit-transform: translateY(6px) rotate(45deg);
    transform: translateY(6px) rotate(45deg);
}

#hamburger-5.is-active .line:nth-child(3) {
    -webkit-transform: translateY(-6px) rotate(-45deg);
    transform: translateY(-6px) rotate(-45deg);
}

/* SIX */

#hamburger-6.is-active{
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#hamburger-6.is-active .line:nth-child(2) {
    width: 0px;
}

#hamburger-6.is-active .line:nth-child(1),
#hamburger-6.is-active .line:nth-child(3) {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

#hamburger-6.is-active .line:nth-child(1) {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
}

#hamburger-6.is-active .line:nth-child(3) {
    -webkit-transform: translateY(-5px) rotate(90deg);
    transform: translateY(-5px) rotate(90deg);
}

/* SEVEN */

#hamburger-7.is-active .line:nth-child(1) {
    width: 14px;
}

#hamburger-7.is-active .line:nth-child(2) {
    width: 16px;
}

#hamburger-7.is-active .line{
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}

/* EIGHT */

#hamburger-8.is-active .line:nth-child(2) {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

#hamburger-8.is-active .line:nth-child(1) {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
}

#hamburger-8.is-active .line:nth-child(3) {
    -webkit-transform: translateY(-5px) rotate(90deg);
    transform: translateY(-5px) rotate(90deg);
}

/* NINE */

#hamburger-9{
    position: relative;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#hamburger-9.is-active{
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#hamburger-9:before{
    content: "";
    position: absolute;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    border: 5px solid transparent;
    top: calc(50% - 16px);
    left: calc(50% - 15px);
    border-radius: 100%;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#hamburger-9.is-active:before{
    border: 3px solid #aaa;
}

.responsive-secondary-menu-container #hamburger-9.is-active:before{
    border: 3px solid #888;
}

#hamburger-9.is-active .line{
    width: 18px;
}

#hamburger-9.is-active .line:nth-child(2) {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

#hamburger-9.is-active .line:nth-child(1) {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
}

#hamburger-9.is-active .line:nth-child(3) {
    -webkit-transform: translateY(-5px) rotate(90deg);
    transform: translateY(-5px) rotate(90deg);
}

/* TEN */

#hamburger-10{
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#hamburger-10.is-active{
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

#hamburger-10.is-active .line:nth-child(1) {
    width: 14px;
}

#hamburger-10.is-active .line:nth-child(2) {
    width: 16px;
}

/* ELEVEN */

#hamburger-11{
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#hamburger-11.is-active{
    -webkit-animation: smallbig 0.6s forwards;
            animation: smallbig 0.6s forwards;
}

@-webkit-keyframes smallbig{
    0%, 100%{
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50%{
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}
@keyframes smallbig{
    0%, 100%{
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50%{
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}

#hamburger-11.is-active .line:nth-child(1),
#hamburger-11.is-active .line:nth-child(2),
#hamburger-11.is-active .line:nth-child(3) {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

#hamburger-11.is-active .line:nth-child(2) {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

#hamburger-11.is-active .line:nth-child(1) {
    -webkit-transform: translateY(5px) rotate(45deg);
    transform: translateY(5px) rotate(45deg);
}

#hamburger-11.is-active .line:nth-child(3) {
    -webkit-transform: translateY(-5px) rotate(-45deg);
    transform: translateY(-5px) rotate(-45deg);
}

/* TWELVE */

#hamburger-12.is-active .line:nth-child(1) {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

#hamburger-12.is-active .line:nth-child(3) {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
PHP:
PHP:
add_shortcode( 'hamburger_animation_icon', 'custom_hamburger_animation_icon_shortcode' );
function custom_hamburger_animation_icon_shortcode() {
    ob_start();
    custom_hamburger_animation_icon_content();
    $output_string = ob_get_contents();
    ob_end_clean();
    return $output_string;
}

function custom_hamburger_animation_icon_content() { ?>
<div class="responsive-menu-icon">
    <div class="hamburger" id="hamburger-1">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
    </div>
</div>
<?php
}
JS:
Code:
jQuery(document).ready(function($) {
    $('.hamburger').click(function() {
        $(this).toggleClass('is-active');
    });
});
Attached Files:
hamburger_animations.zip
File size:13.3 KB
Views:3
eric, Apr 3, 2017 EditHistoryDeleteIPReport#1Reply
peter_ingersoll likes this.
 eric
Write your reply...

Post Reply  Upload a File  More Options...
Share This Page
 

Home
Forums
>
Resources
>
How To's
>
 Cobalt WP Community
HomeForums
Mark Forums Read
Search Forums
Watched Forums
Watched Threads
New Posts
Do's & Don'tsUseful LinksMembers
eric
Inbox Alerts


Search...
CobaltWP Styles
Contact Us
Help
Home
Top
RSS
Terms and RulesForum software by XenForo™ ©2010-2017 XenForo Ltd.