Animate hamburger icon on click with overlay

HTML & CSS
1

Hi,

I have an off canvas menu which opens from the right.

I’ve added an animated hamburger menu which works ok when it is clicked. However, I am trying to get it to animate back and forth when the overlay is clicked when the menu is open.

This is a jsfiddle:

(I’m not sure why but the menu icon is going off the screen in the fiddle, but its fine on the live website)

i’ve tried adding in the over class to the onclick function, but it didn’t work.

jQuery(".hamburger, .site-overlay").click(function(){

Can anyone help me on how to make the icon close/animate when the overlay is clicked too?

Thanks

2

At line 62 in your fiddle why have you pulled the container off-screen? When you do that it pulls the hamburger off screen also.

I commented it out here and it seems to work ok.

/*.pushy-open-right #container,*/
.pushy-open-right .push {
  -webkit-transform: translate3d(-300px, 0, 0);
  -ms-transform: translate3d(-300px, 0, 0);
  transform: translate3d(-300px, 0, 0);
}
3

Thanks, but I added that so the menu icon moves when the actual menu slides out so it doesn’t appear on top of the menu contents.

The main issue I’m having is to get the hamburger to animate when the overlay and/or icon is clicked.

4

This is the updated fiddle with the commented out code:

5

If you mean when you click the middle of the page and your menu disappears then that is because you have some js that removes the ‘pushy-open-right’ class from the body element. When that happens you should at the same time remove the is-active class from the hamburger.

You will need to de minify and adjust the code so both things occur at the same time.

Time for bed back tomorrow :slight_smile:

6

Hi,

I see what you mean, but not sure how to do that.

I’ve tried adding this to line 9 to remove the site-overlay class, but that didn’t work

, h.removeClass(n)

I’ve unminified the JS here

7

You can just use the push-open-right class to activate all your changes. You don’t need that additional is-active class. You can also lose most of the duplicate prefixes now as modern browsers all understand those rules.

Here’s a fully working example.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/*! Pushy - v1.1.0 - 2017-1-30
* Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.
* https://github.com/christophery/pushy/
* by Christopher Yee */
/* Menu Appearance */
.pushy {
	position: fixed;
	width: 300px;
	height: 100%;
	top: 0;
	z-index: 9999;
	background: #191918;
	overflow: auto;
	-webkit-overflow-scrolling: touch;/* enables momentum scrolling in iOS overflow elements */
}
.pushy a {
	display: block;
	color: #b3b3b1;
	padding: 15px 30px;
	text-decoration: none;
}
.pushy a:hover {
	color: #FFF;
}
.pushy ul:first-child {
	margin-top: 10px;
}
.pushy.pushy-left {
	left: 0;
}
.pushy.pushy-right {
	right: 0;
}
.pushy-content {
	visibility: hidden;
}
/* Menu Movement */
.pushy-left {
	transform: translate3d(-300px, 0, 0);
}
.pushy-open-left #container, .pushy-open-left .push {
	transform: translate3d(300px, 0, 0);
}
.pushy-right {
	transform: translate3d(300px, 0, 0);
}
/*.pushy-open-right #container,*/
.pushy-open-right .push {
	transform: translate3d(-300px, 0, 0);
}
.pushy-open-left .pushy, .pushy-open-right .pushy {
	transform: translate3d(0, 0, 0);
}
.pushy-open-left .pushy-content, .pushy-open-right .pushy-content {
	visibility: visible;
}
/* Menu Transitions */
#container, .pushy, .push {
	transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}
.pushy-content {
	transition: visibility 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}
/* Site Overlay */
.site-overlay {
	display: none;
}
.pushy-open-left .site-overlay, .pushy-open-right .site-overlay {
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9998;
	background-color: rgba(0, 0, 0, 0.5);
	animation: fade 500ms;
}
 @keyframes fade {
 0% {
 opacity: 0;
}
 100% {
 opacity: 1;
}
}
@-webkit-keyframes fade {
 0% {
 opacity: 0;
}
 100% {
 opacity: 1;
}
}
/* Submenu Appearance */
.pushy-submenu {
/* Submenu Buttons */
  /* Submenu Icon */
}
.pushy-submenu ul {
	padding-left: 15px;
	transition: max-height 0.2s ease-in-out, visibility 0.2s ease-in-out;
}
.pushy-submenu ul .pushy-link {
	transition: opacity 0.2s ease-in-out;
}
.pushy-submenu button {
	width: 100%;
	color: #b3b3b1;
	padding: 15px 30px;
	text-align: left;
	background: transparent;
	border: 0;
}
.pushy-submenu button:hover {
	color: #FFF;
}
.pushy-submenu > a, .pushy-submenu > button {
	position: relative;
}
.pushy-submenu > a::after, .pushy-submenu > button::after {
	content: '';
	display: block;
	height: 11px;
	width: 8px;
	position: absolute;
	top: 50%;
	right: 15px;
	background: url("../img/arrow.svg") no-repeat;
	transform: translateY(-50%);
	transition: transform 0.2s;
}
/* Submenu Movement */
.pushy-submenu-closed ul {
	max-height: 0;
	overflow: hidden;
	visibility: hidden;
}
.pushy-submenu-closed .pushy-link {
	opacity: 0;
}
.pushy-submenu-open {
/* Submenu Icon */
}
.pushy-submenu-open ul {
	max-height: 1000px;
	visibility: visible;
}
.pushy-submenu-open .pushy-link {
	opacity: 1;
}
.pushy-submenu-open a::after, .pushy-submenu-open button::after {
	transform: translateY(-50%) rotate(90deg);
}
/* Menu Button */

.menu-btn-wrapper {
	position: relative;
	z-index: 10000000
}
.menu-btn {
	/*width: 100px;*/
  padding: 10px;
	/*margin-bottom: 30px;*/
  background: #000;
	color: #FFF;
	text-align: center;
	cursor: pointer;
	border: 0px;
	z-index: 100000!important;
	position: relative
}
/*.menu-btn:hover {
  opacity: 0.6;
}*/

.hamburger .line {
	width: 50px;
	height: 5px;
	background-color: #ecf0f1;
	display: block;
	margin: 8px auto;
	transition: all 0.3s ease-in-out;
}
.hamburger:hover {
	cursor: pointer;
}
.hamburger .menu {
	float: left;
}
.pushy-open-right #hamburger .line:nth-child(2) {
	opacity: 0;
}
.pushy-open-right #hamburger .line:nth-child(1) {
	transform: translateY(13px) rotate(45deg);
}
.pushy-open-right #hamburger .line:nth-child(3) {
	transform: translateY(-13px) rotate(-45deg);
}
.pushy-open-right .site-overlay .line:nth-child(2) {
	opacity: 0;
}
.pushy-open-right .site-overlay .line:nth-child(1) {
	transform: translateY(13px) rotate(45deg);
}
.pushy-open-right .site-overlay .line:nth-child(3) {
	transform: translateY(-13px) rotate(-45deg);
}
</style>
</head>

<body>
<!-- Pushy Menu -->
<nav class="pushy pushy-right" data-focus="#first-link">
  <div class="pushy-content">
    <ul>
      <li class="pushy-submenu">
        <button id="first-link">Submenu 1</button>
        <ul>
          <li class="pushy-link"><a href="#">Item 1</a></li>
          <li class="pushy-link"><a href="#">Item 2</a></li>
          <li class="pushy-link"><a href="#">Item 3</a></li>
        </ul>
      </li>
      <li class="pushy-submenu">
        <button>Submenu 2</button>
        <ul>
          <li class="pushy-link"><a href="#">Item 1</a></li>
          <li class="pushy-link"><a href="#">Item 2</a></li>
          <li class="pushy-link"><a href="#">Item 3</a></li>
        </ul>
      </li>
      <li class="pushy-submenu">
        <button>Submenu 3</button>
        <ul>
          <li class="pushy-link"><a href="#">Item 1</a></li>
          <li class="pushy-link"><a href="#">Item 2</a></li>
          <li class="pushy-link"><a href="#">Item 3</a></li>
        </ul>
      </li>
      <li class="pushy-submenu">
        <button>Submenu 4</button>
        <ul>
          <li class="pushy-link"><a href="#">Item 1</a></li>
          <li class="pushy-link"><a href="#">Item 2</a></li>
          <li class="pushy-link"><a href="#">Item 3</a></li>
        </ul>
      </li>
      <li class="pushy-link"><a href="#">Item 1</a></li>
      <li class="pushy-link"><a href="#">Item 2</a></li>
      <li class="pushy-link"><a href="#">Item 3</a></li>
      <li class="pushy-link"><a href="#">Item 4</a></li>
    </ul>
  </div>
</nav>

<!-- Site Overlay -->
<div class="site-overlay"></div>

<!-- Your Content -->
<div id="container" class="menu-btn-wrapper"> 
  <!-- Menu Button -->
  <button class="menu-btn">
  <div class="hamburger" id="hamburger"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div>
  </button>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
! function(a) {
    function b() {
        g.hasClass(k) ? h.toggleClass(l) : h.toggleClass(m), q && g.one("transitionend", function() {
            q.focus()
        })
    }

    function c() {
        g.hasClass(k) ? h.removeClass(l) : h.removeClass(m)
    }

    function d() {
        g.hasClass(k) ? (h.addClass(l), g.animate({
            left: "0px"
        }, r), i.animate({
            left: s
        }, r), j.animate({
            left: s
        }, r)) : (h.addClass(m), g.animate({
            right: "0px"
        }, r), i.animate({
            right: s
        }, r), j.animate({
            right: s
        }, r)), q && q.focus()
    }

    function e() {
        g.hasClass(k) ? (h.removeClass(l), g.animate({
            left: "-" + s
        }, r), i.animate({
            left: "0px"
        }, r), j.animate({
            left: "0px"
        }, r)) : (h.removeClass(m), g.animate({
            right: "-" + s
        }, r), i.animate({
            right: "0px"
        }, r), j.animate({
            right: "0px"
        }, r))
    }

    function f() {
        a(t).addClass(v), a(t).on("click", function() {
            var b = a(this);
            b.hasClass(v) ? (a(t).addClass(v).removeClass(u), b.removeClass(v).addClass(u)) : b.addClass(v).removeClass(u)
        })
    }
    var g = a(".pushy"),
        h = a("body"),
        i = a("#container"),
        j = a(".push"),
        k = "pushy-left",
        l = "pushy-open-left",
        m = "pushy-open-right",
        n = a(".site-overlay"),
        o = a(".menu-btn, .pushy-link"),
        p = a(".menu-btn"),
        q = a(g.data("focus")),
        r = 200,
        s = g.width() + "px",
        t = ".pushy-submenu",
        u = "pushy-submenu-open",
        v = "pushy-submenu-closed";
    a(t);
    a(document).keyup(function(a) {
        27 == a.keyCode && (h.hasClass(l) || h.hasClass(m)) && (w ? c() : (e(), x = !1), p && p.focus())
    });
    var w = function() {
        var a = document.createElement("p"),
            b = !1,
            c = {
                webkitTransform: "-webkit-transform",
                OTransform: "-o-transform",
                msTransform: "-ms-transform",
                MozTransform: "-moz-transform",
                transform: "transform"
            };
        if (null !== document.body) {
            document.body.insertBefore(a, null);
            for (var d in c) void 0 !== a.style[d] && (a.style[d] = "translate3d(1px,1px,1px)", b = window.getComputedStyle(a).getPropertyValue(c[d]));
            return document.body.removeChild(a), void 0 !== b && b.length > 0 && "none" !== b
        }
        return !1
    }();
    if (w) f(), o.on("click", function() {
        b()
    }), n.on("click", function() {
        b()
    });
    else {
        h.addClass("no-csstransforms3d"), g.hasClass(k) ? g.css({
            left: "-" + s
        }) : g.css({
            right: "-" + s
        }), i.css({
            "overflow-x": "hidden"
        });
        var x = !1;
        f(), o.on("click", function() {
            x ? (e(), x = !1) : (d(), x = !0)
        }), n.on("click", function() {
            x ? (e(), x = !1) : (d(), x = !0)
        })
    }
}(jQuery);


</script>
</body>
</html>
8

Thank you very much, that worked perfectly! I added the following back in so the actual menu icon moves out with the menu.

.pushy-open-right #container {
  -webkit-transform: translate3d(-300px, 0, 0);
  -ms-transform: translate3d(-300px, 0, 0);
  transform: translate3d(-300px, 0, 0);
}

Thanks again! How did you get so good at all this :slight_smile: :flushed:

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.