CODEWITHSUNDEEP
javascriptjquerycss
SelrekJohn
SelrekJohn

Reputation: 476

hamburger activate css transition on click

The aim of my game - to get a hamburger icon to show transition to a cross on click, then when clicked again to revert back to its burger state.

I'm not CSS guru but have managed, through extensive googling) to get it to do the transition on hover and when clicked (but instantly reverts).

I am struggling to reach my goal, could someone please provide me with some pointers?

Update

As requested, here's a fiddle - here Below is a section of the CSS that deals with the transition, I have tried using toggle from JQuery in order to trick the CSS into think that the mouse is still clicked down but couldn't get it to work, if this is possible (assume it is) is it an ill-advised method of achieving my aim?

CSS

.burge:active span {
    background-color: rgba(0,0,0,0.0);
    transition-delay: .2s;
}
.burger:active span:before {
    background-color:#7dcc3d;
    transition-property: margin, transform;
    transition-duration: .3s;
    transition-delay: .3s, 0;
}
.burger:active span:before {
    margin-top: 0;
    transform: rotate(45deg);
    transition-delay: 0, .3s;
}
.burger:active span:after {
    background-color:#7dcc3d;
    transition-property: margin, transform;
    transition-duration: .3s;
    transition-delay: .3s, 0;
}
.burger:active span:after {
    margin-top: 0;
    transform: rotate(-45deg);
    transition-delay: 0, .3s;
}

Upvotes: 0

Views: 2412

Answers (2)

Jackson
Jackson

Reputation: 3518

If you want to do this without using JS then you can use a checkbox.

Here is a very basic example of how you can create an open/close state button

.burger + label {
  position: relative;
  
}
.burger + label:after {
  content: '☰'
}
.burger:checked + label:after {
  content: 'X'
}
<input type="checkbox" id="checkbox1" class="burger"><label for="checkbox1"></label>

Upvotes: 2

somethinghere
somethinghere

Reputation: 17350

You cannot detect a click with CSS, so thats rather an important detail. Basically, replace all your :active with a class (say .active) and trigger a toggleClass (jQuery) in javascript:

.burger.active span {
    background-color: rgba(0,0,0,0.0);
    transition-delay: .2s;
}
.burger.active span:before {
    background-color:#7dcc3d;
    transition-property: margin, transform;
    transition-duration: .3s;
    transition-delay: .3s, 0;
}
.burger.active span:before {
    margin-top: 0;
    transform: rotate(45deg);
    transition-delay: 0, .3s;
}
.burger.active span:after {
    background-color:#7dcc3d;
    transition-property: margin, transform;
    transition-duration: .3s;
    transition-delay: .3s, 0;
}
.burger.active span:after {
    margin-top: 0;
    transform: rotate(-45deg);
    transition-delay: 0, .3s;
}

Here the jQuery:

$(".burger").click(function(event){ $(this).toggleClass("active"); });

Or heres some pure JS:

var burgers = document.querySelectAll(".burger");
for(var i = 0; i < burgers.length; i++){
    burgers.item(i).addEventListener("click", function(){
        if(burger.className.indexOf("active").length){
            burger.className = burger.className.replace("active", "");
        } else {
            burger.className += " active";
        }
    }, false)
}

I know my quick and dirty implementation of toggleClass does not work in many edge cases, so preferably use the jQuery version (the pure JS version would confuse a class called 'js-active' and just leave the class 'js-', breaking code).

Upvotes: 1

Related Questions