Pushing Navigation
February 12, 2015 | 106 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
9+

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:

pushing menu prototype

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).

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.

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:

CSS3 Transitions have been used to smooth the animation steps.

Here is a quick animation to show the whole process:

hamburger explained

 

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://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:

          • 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

  • 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.

  • 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?

  • 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

  • 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

  • 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?