CSS bouncy navigation
February 5, 2015 | 35 Feedbacks

Bouncy Navigation

A full-screen navigation, with floating menu items.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

There are cases when you want to present the user with a choice, with the focus of the web page being the different options. Whether it is a modal navigation, or a list of categories, todays nugget gets you covered!

We used CSS animations and a pinch of jQuery to animate navigation items, and let them bounce in and out the screen.

Icons are from our Nucleo set.

This resource was inspired by Tumblr iOS application.

Creating the structure

The HTML structure is quite basic: the navigation is an unordered list, semantically wrapped in a <nav> element and placed inside a div.cd-bouncy-nav-modal.

Adding style

We used both CSS3 transitions and animations. By default, the navigation list items are hidden and pushed below the viewport (using translateY(100vh)). When the user clicks the .cd-bouncy-nav-trigger element, the .fade-in class is added to the .cd-bouncy-nav: its opacity and visibility values are changed so that it becomes visible (the smooth effect is achieved using CSS transitions), while the navigation list items are animated using the cd-move-in animation.

We used CSS animations over transitions to move the navigation items just because of the bouncy effect. Animations let you define intermediate keyframes, giving you that additional control that is missing in a css transition.

To spice up the entrance effect,  we used a different animation-delay value for each navigation item.

Note: we set animation-fill-mode: forwards so that the list items don’t lose their position at the end of the animation (due to the different animation-delay values, we couldn’t assign the translateY(0) directly to the list items).

Events handling

We used jQuery to listen to the click event on the .cd-bouncy-nav-trigger (or the .cd-close element) and add/remove the .fade-in/.fade-out class consequently.

Changelog

Feb 5, 2015
  • 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.

  • Andrew Dotson

    Nice effect! Thanks!

  • GrumpyCat

    It doesn’t work for me using Chrome. :-( Nice in FireFox though ;-)

    • http://codyhouse.co Claudia Romano

      Hi! I’m testing it in Chrome and it seems to work fine. Could you provide more info about the issue? Thanks ;)

      • GrumpyCat

        I am not getting any error messages in testing the code. There’s just no effect in Chrome. I click “browse categories” and the icons page(category1 category2 etc) comes up. But there is no tween effect in the transition. Chrome version: Version 40.0.2214.94 m. Let me know if you need any other info.

        • http://codyhouse.co Claudia Romano

          Thanks for the heads-up. I can’t replicate the bug but we’ll dig into it!

    • Hudson Peralta

      Works fine for me in Chrome…. Great work Claudia!

  • Matt

    That’s nice. I wonder if the button:checked + nav approach would work

  • Timothy McGilly

    Great work.

  • Wibby

    Sweet, I can add tumblr-esque stuff to my apps.

  • Swapnil Bhavsar

    nice one!

  • staus

    Nice effect! :) Had hoped for motion blur as in the header image, though ;)

  • http://webplatformdaily.org Šime Vidas

    A quick note for potential users of this navigation pattern: Make sure that you implement progressive enhancement (Claudia’s demo did not, some argue that she should have: http://ianpouncey.com/weblog/2015/01/setting-an-example/ ). Anyway, a good approach would be to have the menu displayed at the bottom of the page and the button link to it via a fragment identifier. Then, with JavaScript, hide the menu (from the page’s bottom) and disable the button’s default behavior (in addition to what Claudia’s demo already does).

    • http://codyhouse.co Claudia Romano

      Hi Sime, thanks for your note. Progressive enhancement is important indeed. As pointed out in the article you suggested, “developers who publish it (example code) … aim to keep things simple and just show the bare minimum”. Anyway, my only addition to your approach it that modernizr may be handy to implement progressive enhancement (for example the .no-js class can be used to target devices with Javascript disabled).

  • http://rwgstudio.com/ Ryan Galbraith

    Very, very cool! Thanks again for taking the time to generously design, develop and supply these awesome and free nuggets of inspiration :) I can’t wait to see what’s next!

  • http://www.9dotstrategies.com/ Wendellers

    Great Inspiration! As a Web Designer / Front-end Developer, I am very fond on improving my projects with these effects! Thank you!

  • http://codyhouse.co/ Sebastiano Guerriero

    @wendellealimbubuyog:disqus @ryangalbraith:disqus glad you appreciate our work guys ;)

  • Gas Gas

    smoooooooth!!! nice job

  • ozgur

    Love it thanks guys.

  • Brant Barton

    I feel like this could go completely JS free using :target, no?

  • Rohit

    Another cool animated navigation menu on TalkersCode.com http://talkerscode.com/webtricks/animated-navigation-menu-using-pure-css-and-html.php

  • Gastòn Mazzacane

    è possibile inserire un sottomenù collegato ad una delle voci?

  • Daniel Walton

    any special way of saving the svg icons? when i edit them and save it messes up the scale of them in the circle

    • http://codyhouse.co Claudia Romano

      Hi Daniel, the svg sprite used in the resource has been created using the Nucleo app (https://nucleoapp.com/). Anyway, when creating your own sprite, you should make sure that your icons have the proper size and are properly positioned inside your canvas. Hope this helps!

      • Pranav Raghaw

        @claudiarrromano:disqus Do you remember which cell dimensions did you use while downloading the SVG from nucleo app. If you you do, it will save a lot of time. Otherwise we will have to download and check the dimensions again-n-again.

  • https://twitter.com/2MylesAway Myles

    Is there an easy way to change the background color of the [.cd-bouncy-nav a:: before] class in the css style file by javascript. Gave the anchors an ID and am trying to use document.getElementById(“MyID”).style.color = “#fff”;

  • Eric ROCHE

    Hello! Nice job !
    But I’ve to say that It doesn’t work for me using an iPhone (Safari or Chrome).
    If you have some feeback about this…

    • http://codyhouse.co Claudia Romano

      Hi Eric, just tested it on Safari (iPhone) and it’s working fine. What kind of issue are you experiencing? Thanks

  • Isam Eleyan

    Please can you explain how can I add it to my website ?
    Thank you

  • suxiaolin

    compatible with bootstrap framework?

    • Harish Singh

      yes totally

  • Pranav Raghaw

    @claudiarrromano:disqus Great work , helped me a lot for my
    webview app. Is there any way I can make the menu button circular and
    shift it to the top-right of the screen. Please reply as quickly as
    possible.

  • Pranav Raghaw

    is there any way to add video to the background.

  • AttendingToAegean

    Is there a way to replace *.svg with images? Need to use your awesome work for extra menu as Manufactures Catalog :)

    Congrats for your special work!

  • Harish Singh

    how can i change the layout of the li.
    i have 4 menus in the Menu bar i.e Home – About – My Team – Services.
    i want Home and About in first row
    then My Team and Services in second row.
    i cant find a way how yo do it . HELP !!