February 12, 2015 | 113 Feedbacks

Full-screen Pushing Navigation

A full page menu, that replaces the current content by pushing it off the screen.

Browser support

ie
Chrome
Firefox
Safari
Opera

We recently came across the beautiful Hello Monday redesign. One thing that captured our interest was the full size navigation: it replaces the current content entirely, by pushing it out. That inspired us to create todays nugget!

Here is a quick prototype of the final effect we put together:

Creating the structure

The HTML is structured in 3 main elements: a <main> – containing the visible content, a div.cd-nav – wrapping the navigation, and a .cd-nav-trigger action button.

The .cd-nav is composed of 2 div.cd-half-block elements, the first containing the navigation (.cd-primary-nav) and the second the contact info (.cd-contact-info).

<h2>Navigation</h2>

<nav>

</ul>

</nav>

</div>

<li><a href="mailto:[email protected]">[email protected]</a></li>

</ul>

</address>

</div>

</div>

</div>

The .cd-nav-trigger contains a span.cd-nav-icon, which is used to create the hamburger icon (the element itself is the central line, while its ::after and ::before pseudo-elements are used to create the upper and lower lines), and a svg element, which is used to create the loading circle.

<a href="#cd-nav" class="cd-nav-trigger">Menu

</svg>

</a>

Adding style

When user clicks the .cd-nav-trigger, the .navigation-is-open class is added to the body: this class triggers the hamburger icon animation and the menu entrance.

As for the hamburger icon, the animation can be divided into 3 different parts:

the transformation of the hamburger icon into an arrow: the .cd-nav-icon::after and .cd-nav-icon::before pseudo-elements are both rotated of 45/-45deg (using as transform-origin the right edge of the element) and their width is reduced to 50%;
the rotation of the entire .cd-nav-icon (180deg);
the circle loading effect: the stroke-dashoffset value of the circle element is set to zero (initially, it has a stroke-dasharray=”157 157″ and a stroke-dashoffset=”157″, where 157 is the circumference value).

CSS3 Transitions have been used to smooth the animation steps.

Here is a quick animation to show the whole process:

hamburger explained

.cd-nav-trigger {

transition: transform 0.5s;

}

.navigation-is-open .cd-nav-trigger {

/* rotate trigger when navigation becomes visible */

transform: rotate(180deg);

}

.cd-nav-trigger .cd-nav-icon::before,

.cd-nav-trigger .cd-nav-icon:after {

/* upper and lower lines of the menu icon */

width: 100%;

height: 100%;

transition: transform 0.5s, width 0.5s, top 0.3s;

}

.cd-nav-trigger .cd-nav-icon::before {

transform-origin: right top;

transform: translateY(-6px);

}

.cd-nav-trigger .cd-nav-icon::after {

transform-origin: right bottom;

transform: translateY(6px);

}

.navigation-is-open .cd-nav-trigger .cd-nav-icon::after,

.navigation-is-open .cd-nav-trigger .cd-nav-icon::before {

/* animate arrow --> from hamburger to arrow */

width: 50%;

transition: transform 0.5s, width 0.5s;

}

.navigation-is-open .cd-nav-trigger .cd-nav-icon::before {

transform: rotate(45deg);

}

.navigation-is-open .cd-nav-trigger .cd-nav-icon::after {

transform: rotate(-45deg);

}

.cd-nav-trigger circle {

/* circle border animation */

transition: stroke-dashoffset 0.4s 0s;

}

.navigation-is-open .cd-nav-trigger circle {

stroke-dashoffset: 0;

transition: stroke-dashoffset 0.4s 0.3s;

}

For the menu entrance effect, the <main> and .cd-navigation-wrapper elements are both translated (along the X axis) by 100%. In order to create a more realistic pushing effect, we used the cubic bezier curve as transition timing function. This curve allows you to set 4 parameters (the curve control points) to create the optimal acceleration curve for the property that changes during your transition.

There are tools (like cubic-bezier.com) which allows you to customize your curve and preview the effect before using it into your code (you can also easily export the final curve parameters).

Here is a quick animation to show you the difference between a custom cubic-bezier timing functions and a linear one:

cubic-bezier curve

Events handling

We used jQuery to listen to the click event on the .cd-nav-trigger and add/remove the .navigation-is-open class consequently.

Changelog

Feb 12, 2015

Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

http://chyngyz.github.io/ Chyngyz Arystan

Great as usual! Thanks
Andrew Dotson

Awesome!!
SamuelC

Great solution!
Bosco

Great job! I love tour Works!
One Question: if is mobile first, why swipe not implemented?
- http://codyhouse.co/ Sebastiano Guerriero
  
  good suggestion! coming with the next update ;)
atteck

Perfect!
Bosco

Sebastiano And claudia, I am curious to know how would be a listview mobile created by codyhouse.co as the whatsapp and facebook because i love your creations!!
- http://codyhouse.co/ Sebastiano Guerriero
  
  good suggestion, we’ll keep this in mind ;)
http://merqur.io/ Merqurio

THIS IS Awesome
Marcus Zanona

Lovely jobly! Menu icon’s animation is the best bit!
http://albertorestifo.com Alberto Restifo

This should never be used ad the only means of navigation for your website. Times and times again the Hamburger have proven to be unknown to the majority of user, and showing more navigation options increased the time spend on the website.

Never the less, beautiful example.
- http://codyhouse.co/ Sebastiano Guerriero
  
  For sure this can’t be used by a website with lots of content. I often see these effects on web agency websites, where the goal is to “show off” some skills. In general, this effect could be used for something that is not a navigation as well, and to learn some tricks on how timing functions can improve the motion effects of your apps.
- Coldwaits
  
  ‘The hamburger has proven to be unknown to the majority of users’….. A piece of total dogma which ‘times and times again’ is propagated by a pedantic few who for whatever reason resent the passing of the cumbersome tabs and dropdowns method of navigation. The meanings of many iconic symbols become widely understood by repetition of use and the exposure of end users to the symbol. The hamburger icon is evidently well past a threshold of use whereby the majority of web users will immediately recognise its meaning. If there were any basis to the ‘People will never understand what the hamburger means’ theory, then we can assume that the majority of motorists in the world remain permanently mystified by the use of icons in road signs and any number of iconic logos belonging to major corporations are in fact never recognised by consumers.
  - http://albertorestifo.com Alberto Restifo
    
    I was the biggest fan of the hamburger icon, so easy and elegant. Just trow every navigation link in there, add design and voilà. Undeniably easy, and wrong.
    
    By forcing myself not to use it, I’m able to better design the navigation structure and experience of using the application / website. While every case in unique and deserve a unique solution, in my latest application, I A/B tested two variations:
    
    A: Hamburger icon in the top/left
    B: Hamburger in the top/left with less important nav items, tab in the bottom with most important suff (4 elements)
    
    Guess what increased the engagement by almost 40%? Yup, B.
    
    So, in my experience, while I love the hamburger icon, it should not be considered as the only/best solution.
    - Coldwaits
      
      You can’t make a general assertion that a navigation system (or any other design element) is ‘right’ or ‘wrong’ based on the fact that a particular configuration works for one solitary website with a particular audience. I fully accept that the hamburger icon and the navigation panel it typically triggers (i.e. full page menu or off-canvas menu) is not going to be appropriate for certain sites. However, there are a lot of instances (such as the Happy Monday site) where it will serve as an elegant and highly effective method of presenting navigation.
      
      For many years now, self-appointed web design gurus have made ridiculous assertions about what designers should ‘never do’ and what particular practices are ‘always wrong’. Such assertions are always supported by some supposedly decisive survey of user preferences and habits. The ‘users don’t want to scroll below the fold’ theory is an example of the sort of nonsense that was put-about for many a year. ‘Users don’t understand the meaning of the hamburger icon’ will prove itself to be similar nonsense.
Fran Kuzmanic

Thank you for these amazing resources. They are still a little advanced for me, but I’m looking through them for learning purposes. I was wondering why do you place jQuery file and a custom JavaScript at the end of the body instead of head element?
Thank you and keep up the great work!
- http://codyhouse.co/ Sebastiano Guerriero
  
  Thanks!
  
  it really depends by how soon you need your javascript to be loaded. for example, if you want to use a custom font and upload a script for it, you may wanna put it in the header. While if you’re adding Google Adsense script, you put it right before the .
  
  I’d suggest to take a look at this discussion:
  
  http://stackoverflow.com/questions/2451417/whats-pros-and-cons-putting-javascript-in-head-and-putting-just-before-the-body
  - Fran Kuzmanic
    
    Thank you! Greatly appreciated. :)
http://meh-hikwa.com/ Meh

Lovely work Sebastiano. Rather complex have not got around to understanding how :pseudo elements work. Anyhow great work.
Peter Ankelein

Nice! I’ve been playing around with the source a bit and wrapping my head around the jQuery. How would you trigger the ‘close’ animation when one of the menu links are selected (i.e., click “services” link, trigger ‘close’ animation, then go to services.html?
- http://codyhouse.co Claudia Romano
  
  Hi Peter, you may try updating the page content (using an ajax call rather than a redirect). But it really depends on your page content.
  - Peter Ankelein
    
    Hi Claudia. Updating the page content or redirecting to a new page isn’t really the problem. It’s more about scripting the nav links to reverse the background transitions and menu icon animation before redirecting or loading new content.
    - http://codyhouse.co Claudia Romano
      
      I see! Then you can use the script implemented in the js file (bound to the click on the .cd-nav-trigger), replacing the toggleClass(‘navigation-is-open’) with a removeClass(‘navigation-is-open’). And at the end of the animation on the .cd-navigation-wrapper (you can find the ‘animation is over’ comment in the script), redirect/reload the page content. Hope this helps!
      - Tom
        
        Hi Claudia, Ive got the same problem and really would like to use your smooth fullscreen navigation (like the working result at hellomondays). Ive tried now for couple of days. Maybe you could support with a script sample somewhere?
      - Manuplus
        
        Hi Claudia !
        With Cody House I feel like Alice in wonderland, thanks for your great ressources ;)
        I was lucky to find your answer to Peter, cause I was wondering the same.
        But I tried to understand your answer and trried it, but…can’t set it at all.
        I’m using WordPress, and I’d link the same “closing” effect to be loaded “onclick” on the nav links… could you explain a bit more how to figure it out, please ?
        Thanks a lot for your reply – and sorry for my bad english !
JoshB

While this is cool as a navigation feature, I feel this would be better used as beautiful way to show portfolio items.
- http://www.devaprise.com/ TheVirusKA
  
  i agree
Guarana

unfortunatly this tutorial is mre about the menu trigger animation and the title is misleading.
But its still a very nice tutorial.
Prokopis

First of all you guys are unique. Your code is easy to understand and far more, it is robust. You really help a lot of people understand how programming code should be done the right way and for that I couldn’t simply thank you.
HelloMonday is one of the best websites around. Its blazing fast, clear, simple, modern and animations are awesome. By the way would be easy show us how something similar could be achieved beyond the menu staff?
Once again thanks in advance.
http://www.chinacoder.cn/ Nicky

good job!
http://folkscripts.blogspot.com nazzar s

awesome always
http://www.umairulhaque.com/ Umair Ulhaque

Why the tutorial is missing parts like what logic in jquery we can use to achieve this effect. Although you described the rest part very well and thanks.
http://www.troggled.com Troggled

Is there an easy way to add this navigation function to every page on my existing website?
Keumi

Great job : please can you why do you use Modernizr, and what are the features useful? Thanks.
- http://codyhouse.co Claudia Romano
  
  Hi, we used Modernizr to detect if the browser supports css3 transitions, if Javascript is enabled and if the device used is a touch device (checking the classes added to the html).
  - Keumi
    
    Thanks for your helpful answer.
http://www.troggled.com Troggled

Hi – when I try to impliment this menu as soon as I use the Modernizr I get a large white border all around my page and cannot get rid of it. If I don’t use the Modernizr the menu animation does not work. Can anyone help?
- http://codyhouse.co/ Sebastiano Guerriero
  
  did you make sure to include the reset.css file?
Webpeach

Hi,

does anyone know why the transition effect is not working for me?

It’s not pushing it away, it’s just coming over immediately.

The toggle menu is working.

I try to implement this on this website: http://www.brandcube.nl/beta

Hope anyone can help.

Thanks in forward
Jonathan Bean

Awesome. Used is here – http://www.boulderfont.info
- http://codyhouse.co/ Sebastiano Guerriero
  
  looks really nice ;)
Simon_Jae

nice work Claudia/Sebastiano! I am wondering where to start if I was after the “menu” to be initially visible?
- http://codyhouse.co Claudia Romano
  
  Hi, glad you like it!
  In the html, try adding the ‘navigation-is-open’ class to the body element. That should do the trick! ;)
Simon_Jae

wow… very nice Claudia… simplicity is best!! very nice. Awesome. Thank you

Sriram Sadineni

good work Claudia/Sebastiano
i am designing one page website ,in that i am using anchor method, so i click on the link is close the menu, is there any way you guys can help me with it .
in same site i am facing z-index issues ,if u guys provide me the any callbacks of the menu ,so i can help those things and add some animations to menu

http://codyhouse.co Claudia Romano

Hi Sriram, glad you like it!
In the js file you can find the code to trigger the menu animation. Hope this helps!

Sriram Sadineni

my bad ,actually i need snippets to close the menu ,when i click on the link/list items in the menu and tried to find the code to menu animation,basically i am new to jquery, i am very glad if help with it
here is my live page http://sreeram180-001-site1.smarterasp.net/

http://codyhouse.co Claudia Romano

Try adding this to the js file:

$('.cd-primary-nav a').on('click', function(){

if( !isLateralNavAnimating ) {

if($(this).parents('.csstransitions').length > 0 ) isLateralNavAnimating = true;

$('body').removeClass('navigation-is-open');

$('.cd-navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){

//animation is over

isLateralNavAnimating = false;

});

}

});

Sriram Sadineni

thanks for help .it is working perfectly

Jason Truell

Thanks for this awesome tutorial!

I’m trying to create a layout that combines this full screen pushing navigation with your “secondary expandable navigation”. It works great except that the links and the submenu elements in the secondary navigation stopped working. I think the solution may be to change the z-indexes but I can’t get it to work. Any thoughts?
- http://codyhouse.co Claudia Romano
  
  Hi Jason, glad you like it! do you have a live version to check?
  - Jason Truell
    
    Hi Claudia. Thanks for your reply! Yes, I uploaded it here: http://216.243.141.57/bdcc/
    - http://codyhouse.co Claudia Romano
      
      Try setting z-index: 3 to #cd-lateral-nav. That should solve the problem
      - Jason Truell
        
        Thanks for taking a look. That solved the problem of the links not working … but now the menu appears on top of the main content section.
      - http://codyhouse.co Claudia Romano
        
        Hi Jason, I see your problem. That’s because the main element is not translated when the #cd-lateral-nav is open. So I would suggest to add a translateX(-260px) to the main element when #cd-lateral-nav is open (no need to change the z-index). Hope this helps!
      - Jason Truell
        
        That did it! Thanks so much for helping me. Much appreciated :)
joker

Awesome tutorial! Might I ask what program you used to create the cool gif images?
Brad Beshaw

I’m so pleased to see this navigation, it is exactly what I need for a project. I have it working great on my localhost but it’s not working via IIS. My example is here .. http://www.airgoimages.com
Thank you in advance for any suggestions that you may have to resolve this.
Brad Beshaw

.. oh my, never mind, got it.
- Milton Dammers
  
  Hi! I’m having the same issue. What did you do to resolve it?
  - Brad Beshaw
    
    Milton, the css and js files are copied as ‘encrypted’ to the Windows destination thus allowing the local account to access but not the web. Locate the files via explorer (you will see that the file-names are green) Left-click / properties then select Advanced then uncheck ‘encrypt contents to secure data’. That’ll clear it up.
  - Brad Beshaw
    
    Now .. I just need to figure out how to make the menu & transition originate from the right to enable right handed, right thumbed mobile users
Babarogic

Good job on this, it is very clean and thanks for sharing.
I have a question regarding on how to show all content without exiting? for example, when i click to projects, that navigation content should push back and show me projects? How to achive that.
Thanks
- http://codyhouse.co Claudia Romano
  
  Hi, give a look at how we did it here: http://codyhouse.co/gem/3d-bold-navigation/
Alexandra Meth

Thank you for sharing! Just wondering, how can I add a background image instead of having the original coloured background?
- http://codyhouse.co Claudia Romano
  
  you can set a background-image for the .cd-navigation-wrapper
Jelo Beltran de Vera

Excellent Work! but is there any possible that i can import this navigation with bootstrap framework? im just planning to use this navigation for my future project. thank a lot! Cheers!
Rubber Bertrand

Hi, I am trying to integrate this with a parallax scroll plugin (“mouse parallax”) which instructs adding 2 divs with class “mouse-bg” and setting the backgrounds of each by id. Is it possible for me to remove some key bits from the and add these divs as children without breaking the code? Or should I try another approach? Thank you for any suggestion you can offer!
- http://codyhouse.co/ Sebastiano Guerriero
  
  Hi Rubber, the best approach would be to include all content inside the element. However, if you have some elements outside the , just make sure to apply to them the same CSS transformations applied to the , and the code shouldn’t break
  - Rubber Bertrand
    
    Thanks as always! I was convinced it wouldn’t work that way but whatever I was doing wrong is fixed now. Wish I knew what I did wrong but I’ll take the victory ;) Cheers.
http://loser.com Steve

Is there a way to include another level of animated sub-menu items when the user clicks on a menu item? I am working on a rather large project and I think your menu is perfect for a touch screen kiosk.
- http://codyhouse.co/ Sebastiano Guerriero
  
  Hi Steve! You can check how we did in this resource http://codyhouse.co/demo/secondary-expandable-navigation/index.html
melrothdesign

Nice work on this! I’m working on integrating this for two projects and have noticed one issue on the iPhone using Safari. Normal behaviour is Safari’s bottom tab navigation hides and the address bar at the top condenses when you scroll down. But with your demo here the tab navigation always remains and the address bar never condenses. On one of my projects the last navigation item is hidden and can’t be viewed by scrolling.
- melrothdesign
  
  I found that this is causing the problem in Safari. I’m not sure of the implications of removing it, but it seemed to cause a bug for iOS rather than fix it :)
  
  main {
  …
  /* fix bug on iOS */
  height: 100vh;
  
  …
  }
ben

Can I know how to make the sliding animation from top to bottom? Appreciate if anyone can advise or help? Thanks.
Manuplus

Hi amazing Codyhouse team.
Thanks your great resources, it’s a goldmine !

I recently replied on a comment, but not sure it was seen.

I wondered how it’s possible to add the same transitions (open/close) on the menu links ?
(like on Hello Monday wonderfull website, for example ;) )

Is it possible or is there something different top implement ?
I’m very new in Js…

Thanks, and sorry for my bad english, and…would really enjoy your reply !
- http://codyhouse.co Claudia Romano
  
  Hi Manuplus, give a look at how we did it here (if you want to load a new page using ajax): http://codyhouse.co/gem/3d-bold-navigation/
  Hope this helps!
  - Manuplus
    
    Thanks Claudia, I’ll try to mix both !
Paul

Hey Guys, I’ve attempted to implement this into a test site and I believe I’ve included all the necessary files, but I keep coming across the same problem. The site, and the menu work perfectly, its just the transition between the two that is a bit sketchy. The content is pushed and pulled smoothly, but the background colours change immediately as the button is clicked, ruining the smooth illusion. Any help would be appreciated!

Kind Regards, Paulie
- http://codyhouse.co Claudia Romano
  
  Hi Paul, not sure what the problem could be. Be sure that z-indexes are correct (navigation lower than main content). Hope this helps!
Kirill Bondar

Thanks! It’s a real awesome navigation. Can You help me, I’m not so strong in JS. I want to add one more button (cd-nav-trigger) to open another page with another information. How can i do it?
- Kirill Bondar
  
  http://codepen.io/anon/pen/PqaPKg
Kevin

Hello,

I am trying to implement this on a site but I want the content to animate in from the right side rather than the left and I don’t want the content box with the navigation items on it to slide all the way to the left edge. I want it to stop at about 30% of the screen.

How would I go about doing this, Thank you for any info :)
- Justyn Clark
  
  .navigation-is-open main {
  -webkit-transform: translateX(30%);
  -moz-transform: translateX(30%);
  -ms-transform: translateX(30%);
  -o-transform: translateX(30%);
  transform: translateX(30%);
  }
Tom Stol

Great tutorial, really appreciate it !!. Quick question, if I may: Would there be a reasonably straight forward way to let the menu not slide fill width but just, lets say 33 or 50% of the width?
- Justyn Clark
  
  .navigation-is-open main {
  -webkit-transform: translateX(50%);
  -moz-transform: translateX(50%);
  -ms-transform: translateX(50%);
  -o-transform: translateX(50%);
  transform: translateX(50%);
  }
http://aworthycause.net Ronan McDonnell

Hey, great menu – kicks the big one. Only thing is, and forgive me if someone has already pointed it out, I can’t see where they have; when the menu is slid back off-screen there can be a scrollbar leftover (partic. in safari). This happens when the menu is very long and needs a vertical scroll. The visibility:hidden does not remove this scrollbar. Easy fix – set the translate-x values on .cd-nav .cd-navigation-wrapper to 100%.
app geek

Hey, great tutorial but I have an issue with the sliding in & sliding out animation. Could someone please check why it doesn’t work? I actually don’t know why… I’ve implemented everything like in the tutorial. Thank you very much! The website I’m talking about is: http://beta.alexthedeveloper.com
http://about.me/moiz.sitabkhan Moiz Sitabkhan

The animation is based on left to right. Is there any way to make is right to left? i’m assuming the values in the cubic-bezier need to be changed, but I cant seem to understand to what!
Sachal Abdullah

i want to add a background at the main page. how can i do that?. i can change the color but i want to add an image.
Chris

i have a big problem with one page design….on chrome there is a bug….when you put the link #accueil for exemple……after 2 or 3 click the menu doesn’t work…..please help…..sorry for my english….i’m french…
http://kayogundimu.com Kay Ogundimu

Hi Sebastiano this is awesome!

I was wondering if there’s a way to make this full size screen navigation sit with the Page Scroll Effects (https://codyhouse.co/demo/page-scroll-effects/fixed.html) plugin.
Ultimately, I like to have a functioning responsive scrollable page but with the added bonus of the screen navigation.

Any advice would very much be appreciated.
Kay
Antonio Cristian Panza

Awesome tutorial for a great menù. I have one issue when i try to implement it in my webproject. there’s a conflict whit another plugin “wow.js” who not support the “overflow-x:hidden” property at the tag body. Any suggestion or idea? Thanks and sorry for my english!!
- http://codyhouse.co Claudia Romano
  
  Hi Antonio, glad you like it ;)
  You should try creating an external wrapper (for both the main and the navigation elements) and add the overflow-x: hidden to this new wrapper (rather than the body). Hope this helps!
  - Antonio Cristian Panza
    
    Thanks Claudia!! I will try with your suggestion soon!! I saw your tutorial..https://codyhouse.co/gem/animated-page-transition-2/.,Is it possible to combine this whit pushing menù? my jquery is so bad!!thanks for your support!!
  - Antonio Cristian Panza
    
    Hi Claudia! I tried your solution but i noticed that the problem is a conflict between wow.js and modernizr.Thanks anyway for your help!
http://www.iamaurelien.com I Am Aurélien

Hi Claudia! Thanks for this awesome nagivation! I still have a problem. I’m building a single page website and this is what i would like to have: when i click on the link (a), it should go to a specific anchor (different on each link, obviously). How to do it (i’m lost)? :) — a Jquery newbie
- http://codyhouse.co Claudia Romano
  
  Hi there, this should help:
  https://css-tricks.com/snippets/jquery/smooth-scrolling/
  
  Cheers!
Dany Han

hey guys, i am trying to put this up on heroku but it is not working…any idea why?do we have to purchase this?
Piccolo Ric

Hi Claudia! thanks for this! i love it. Just a question, if i want to close the menu from an external link, what property
i should to all in the href? thanks!!!
- http://codyhouse.co Claudia Romano
  
  Hi there, to close the navigation you need to remove the navigation-is-open class from the body element. Hope this helps!
http://www.cristofersousa.com.br Cristofer Sousa

Hello, Sebastiano /Claudia, thanks for share this article.
Watching the Demo and running locally on the line 253 of the style.css, an overflow-y-self, Chrome Browser Windows / Linux when I hidden the the scroll bar menu is in the middle of the screen was added, but to do this in Firefox is not the same. Any idea?
Emilio Rabello

Is it possible to install this type of menu in blogger?
Narangi

Can I know how to make the sliding animation from the bottom to top? Appreciate if anyone can advise or help? Thanks
- Jedidiah Avelino
  
  use translateY instead of translateX
http://www.davidbrabyn.com/ David Brabyn

Seems the latest version of Firefox (48.0.1) has messed up the open menu svg:
https://www.dropbox.com/s/be2ewm5tkos5qk8/Screenshot%202016-08-23%2018.32.20.png?dl=0
Paul D Brooker

Does anyone have any experience integrating a menu like this with Hubspot?
http://fb.com/edunjr Edu Nascimento

I tryed to add more items inside tag with ids for each, and then, i added #=”ids” to href on links. It caused the page to mis-function. What is the proper way to use menu links?
- Jedidiah Avelino
  
  it seems you are trying to target an element inside main which is 100% translated in x-axis inside the nav. that approach won’t work because main is translated 100% and is out of the viewport, hence it’s hidden. you could try translating the nav back to being hidden whenever a click is done in the nav using javascript. or you could use a alternative approach using fixed horizontal nav on top instead of this nav.
Grzegorz

here is vanila js example of you code http://codepen.io/ambasador/pen/QGNZGa i did something that you can click on button when animation is on
- http://www.davidbrabyn.com/ David Brabyn
  
  Any chance you know how to fix the bug with the menu SVG in Firefox?
  - Grzegorz
    
    This explanation why there is a bug in firefox https://css-tricks.com/svg-animation-on-css-transforms/
    - http://www.davidbrabyn.com/ David Brabyn
      
      Really? It only appeared with FF’s latest update.

Extended license

Do you want to include this resource in a product offered for sale? Buy the extended license or learn more about it.