rounded animated navigation
October 9, 2014 | 42 Feedbacks

Rounded Animated Navigation

An experimental full-screen navigation, animated using CSS and jQuery, that expands within a circle.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

I was checking out the new Ping iOS app. The effect when you tap on the circle to switch the page is too cool, so I tried to create something similar in CSS and jQuery. The result is pretty cool, hence we decided to release the snippet here on CodyHouse :) It’s an experimental navigation, yet it’s supported by all major browsers – we used Velocity.js – and I’m sure you guys will find a creative way to use this!

Creating the structure

About the HTML structure, we used an unordered list for the navigation, semantically wrapped into a <nav> element. The .cd-overlay-nav and .cd-overlay-content are used to animate the round shape. Precisely they are used as containers, to position the circles right behind the top-right menu icon, while the <span> elements inside are the 2 colored circles that expand. Finally the .cd-nav-trigger is the menu icon that animates into a cross icon.

Adding style

If you look at the CSS, you will notice the trigger button (.cd-nav-trigger) is in position:fixed on the top right. For the effect to work properly, we had to center the containers (.cd-overlay-nav and .cd-overlay-content) of the 2 animated circles right behind the trigger. To do such a thing, we needed to define a fixed height and width for both of them. But if you look at the <span> elements – which actually are the animated circles, you may notice we didn’t define any positioning or size value. Since the circle has to cover the entire screen, regardless the viewport size, we define the positioning (top and left values) and the size (width) in jQuery.

The idea was to animate the menu icon, not just replace the “hamburger” with a “close” icon,  so we added a <span> element (.cd-icon) inside the trigger. This way we can create – and animate – the icon using the ::before and ::after pseudo-elements.

The menu/trigger background-color changes and it’s animated with a slight delay. Once again, we used 2 pseudo elements to achieve this effect:

Events handling

Before diving into the jQuery, I’d like to explain what happens in few simple words: when user clicks/taps on the menu button, we animate the <span> inside the .cd-overlay-nav. Once the circle fills the screen, we show the navigation. When user clicks/taps again on the trigger to close the navigation, we animate the <span> inside the .cd-overlay-content. At the end of this animation, we hide the first circle and the navigation – which are still there, just not visible because they have a lower z-index. Finally we reduce the opacity of the second round shape (yellow in the demo), thus revealing the content – and faking that the content is on top of the navigation.

About the jQuery, we defined position and size of the <span> circles element (using the initLayer() function). We assigned a height equal to twice the viewport diagonal, and a top (and left) equal to negative value the viewport diagonal  (the <span> is inside the .cd-overlay-nav/.cd-overlay-content and has a position: absolute).

When user first clicks the .cd-nav-trigger, we animate the .cd-overlay-nav span element, changing its scale value from 0 to 1 (we used Velocity.js for the animation):

When user clicks the .cd-nav-trigger to close the menu, we animate the .cd-overlay-content span scale value instead:

 

Changelog

Oct 09, 2014
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • Seito

    Very nice!

  • http://sergioandra.de Sergio Andrade
  • http://about.me/bruno.rodrigues Bruno Rodrigues

    great resource =D

  • Constantine A

    This is great! I use something similar to this on my app. I noticed something, however. When the menu is loaded, you can still scroll up and down on the page it’s hiding. Would it be efficient if there was an overflow: hidden; on the body when the menu is open?

    • http://codyhouse.co Claudia Romano

      Hi Constantine, yes you can add an overflow: hidden. The only problem with this solution is that you’ll see a jump because the scroll bar disappears as soon as you set the overflow property (unless you’re using a trackpad or a magic mouse).

      • Constantine A

        Ah, yes, I figured. I often noticed that happening with the Twitter Bootstrap modals, quite annoying.

        • Jonas Du

          I use overflow-y :scroll with modals .. Ain’t pretty but works :)

  • http://soyg.us/ G. Andrés Ibarra

    I simply love it! Congratulations

  • Pratik Sah

    awesome work !!

  • Renan Borges

    Amaze!

  • juuo

    Demo page jquery-2.1.1 is error

  • vaso

    Claudia is the BEST !!!! When I like something, she is almost always behind it :)

  • leanne

    Awesome!!!

  • http://benstrahan.com/ benstr

    You should put a link to GitHub so we can star it. At least that is what I do…. but I may be a crazy star person?

    • http://codyhouse.co Claudia Romano

      Hi Benstr, the link is in the footer. But we should definitively put it in a more reachable place. Thanks for the heads up! ;)

  • http://www.technbuzz.com/ Samiullah Khan

    Well that’s amazing, I thought some kind of SVG going to be used for this effect, but it’s only CSS. Heavily relied on CSS3

  • Calvin Joel Koepke

    This, is awesome.

  • Sarah Bennet Mills

    Awesome plugin. I have featured it in my monthly round-up of best jQuery Plugins here: http://www.byteswire.com/20-best-jquery-plugins-october-2014/

  • http://twitter.com/traf James Traf

    Awesome work! It would make more sense to me that when the menu closes, it just reverses the transition rather than have the same thing happen to close it than to open it. If you know what I mean. Is there a simple way to do this? Thanks in advance!!

    • http://codyhouse.co/ Sebastiano Guerriero

      Many people asked us that! We will def add this option to this nugget soon. Stay tuned ;)

  • Alex

    Nice work !
    Content on Safari isn’t always scrollable, sometimes you just can’t scroll at all, any ideas how to fix that ?
    Works great on other mobile browsers.

    • Alex

      I finally found what was the problem on iPhone.
      I simply changed the line :

      -webkit-overflow-scrolling: touch;
      to

      -webkit-overflow-scrolling: auto;

      Now all my colleagues with iPhone can navigate on my mobile website… :)

  • kannan3013

    Hi!
    I would like to know the procedure for changing the placement of the Menu Button. Like, I want to keep the button on the bottom left side of the page. Let me know how and what to edit, because I’m not a coding expert.

    • http://codyhouse.co Claudia Romano

      Hi Kannan, for the .cd-nav-trigger, .cd-overlay-content and .cd-overlay-nav set a left and bottom position (instead of a top and right position) in the css file.

      • kannan3013

        Hi Claudia, I tried doing as you told me but the animation is a little offset, like the animation doesn’t happen from the menu, it happens from the page bottom right corner.

      • kannan3013

        Hi Claudia, I tried the way you told me, everything’s fine except the animation happens a little offset from the menu button, like the animation happens at the bottom left page corner, but the menu is 5% from the corner.

  • kannan3013

    Look at the image i captured when animation triggers.

  • kannan3013

    Hi Claudia, Please help me with the placements of the menu button. I did it as you told me. I’ve set left and bottom position in the css for .cd-nav-trigger, .cd-overlay-content and .cd-overlay-nav.
    But the Animation triggers a little offset from the menu button, as shown in the image. Please help me.

    • http://codyhouse.co Claudia Romano

      Hi Kanna, you may need to change the translation value for the .cd-overlay-content and .cd-overlay-nav (-20px instead of 20px and vice versa).

  • http://intowp.com/ LebCit

    Hi Claudia,

    Thank you very much for this cool and great plugin.
    I’ll be using it in my new WordPress Theme.
    Keep going and have a great code 2015 year :)

  • Martin Dimovski

    Really awesome job you’ve done!
    Is there any way for the menu links to trigger the same effect, meaning when I click on a link, it will close down and scroll to desired anchor link?

  • Jason Gipson

    Could you provide instruction on how to integrate this into wordpress?

  • http://richardmisencik.com/ Richard

    Pretty cool!

  • meekmeeke

    Hello! How to make it disappear after I click link from the list?

    • Gaurang Patel

      Hi..meekmeeke…I am very new to jquery …would you pls provide more details about how to do this

    • Stephen Edwards

      Hi There. I have the same problem and have been trying to solve it for days now. Could you post the code that you have used to solve this problem? Any help would be gratefully appreciated :)

  • Cgomez

    Very nice work!!

    thanks for the tip meekmeeke, it works well

  • Paul Moffatt

    How would I alter this to lose the circle transition and just have the nav fade in and out?

  • Antana

    Good work ! Thanks for the inspiration !

  • marcelus

    hi,
    I’m using this menu in my site but I have a problem.
    When I’m using anchor tags to jump to specific location on the page, menu is not working.
    Could you help me repair this problem.

  • Martin K

    Great Overlay,

    One question, I saw in the discussion that you were planning on creating the reverse effect for closing the nav, have you been able to get round this? As would love to know how.