Help with navbar show/hide + animations

[Funkaholik]

Can’t make it work correctly click here
its a bit messy i think even in terms of layout

What i’m trying to achieve is hide all icons behind navicon and on click
move them aside so they’ll be visible and took certain position around navicon +
second click or free space will do oposite

have come up with jquery method but its kinda wacky it’s just scales back and forth

what would be great is if i could add a certain css rules to those icons on click (change their opacity, font-size and margin or top-right-bottom-left positioning)

[Shikkediel]

Something like this?

codepen.io/yvxzmb

[Funkaholik]

Exactly .. also can white space be involved?)

[Shikkediel]

Not sure what you mean by that, could you elaborate?

[Funkaholik]

well i mean .. hide 3 icons when click free space

[Shikkediel]

Ah, okay. Little trick with event propagation:

$(function() {

  var guide = $('.navbar-item');

  $(window).on('mouseup touchend', function() {

    if (guide.hasClass('active')) guide.removeClass('active');
  });

  $('.navbar-wrap').on('mouseup touchend', function(e) {

    e.stopPropagation();
  });

  $('.menu-icon').click(function() {

    guide.toggleClass('active');
  });
});

codepen.io/aqROOm

[Funkaholik]

Superb .. thanx, Edo

[Author]

Posts