Hi guys,

Im working on a personal project at the moment and what I want to achieve is an effect such as the one seen at pollenlondon.com, however with a twist; on hover I want the menu icon to spin (as seen on pollen) into a Z shape, then on click (I have found a tutorial with this however it uses SASS and I can't seem to transfer it to normal css) turn into an X exactly as the pollen animation does...

I know this is achievable with css (as I have seen it in the tutorial (keyframes) however I have only used preset animations (transitions.css) and never made my own before. If anyone could share any insight on how to do this or even contribute some code I would be an extremely happy bunny...

Thanks in advance,

Alex

I think I have an idea what you mean. I did something similar on a project I fron-ended reacently. You'll have to resize the screen to get the navbar to collapse and show the menu icon.

http://wasabiadmin.se/fonstermastaren-backend/

 

This is how I built it:

 

HTML

<div class="site-header__toggle-nav" id="toggleSiteNav">
   <span class="burger burger-top"></span>
   <span class="burger burger-middle"></span>
   <span class="burger burger-bottom"></span>
</div>

CSS

.burger {
  position: relative;
  display: block;
  width: 20px;
  height: 3px;
  background: #151515;
  margin: 0 auto 3px;
  text-indent: -60px;
  transition: -webkit-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.site-header__nav-open .burger__middle {
   opacity: 0;
}
.site-header__nav-open .burger__top {
   top: 6px;
}
.site-header__nav-open .burger__top,
.site-header__nav-open .burger__middle {
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
}
.site-header__nav-open .burger__bottom {
   top: -6px;
   -webkit-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg);
}

 

You require javascript to initiate the toggle event that adds the class of site-header__nav-open to the navigation parent that the nav toggle also resides in. You can get more info using the chrome dev tools on the like I provided for you above.

 

If you haven't already I highly recommend you learn sass once your css skills are upto scratch, once you're using it you'll never want to code in vanilla css again, it's such a timesaver.