ReleaseResponsive Nav: A Simple JavaScript Plugin For Responsive Navigation

Advertisement

There are several ways to make navigation responsive, and usually the solution we need is quite straightforward. But despite the apparent simplicity, there are many underlying factors which, when thought through and implemented properly, can make a simple solution even better without adding more complexity to the user interface.

One of the problems I’ve encountered while building responsive navigations is that browsers currently don’t support CSS3 transitions to a height which is defined auto. Most of the time, we shouldn’t use fixed height either because the height of menu items might not be the same in all browsers, and the number of items may change. I also always try to reduce the weight of pages I build, so I’ve been wanting a solution that doesn’t require a big library such as jQuery to work.

Today, I’m pleased to introduce Responsive Nav1, a free and open-source JavaScript plugin that solves these problems and more in one tiny package. It’s released under the MIT License2, so you can use it in all of your projects for free and without any restrictions. The solution is not one size fits all, nor is it meant to be. But for those who are looking for a solution that does one thing well, it’s definitely a good choice.

Official site of Responsive Nav plugin.3
The official site, view live at responsive-nav.com4.

Features

Responsive Nav is a tiny JavaScript plugin which weighs only 1.6 KB minified and Gzip’ed, and helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance. It also contains a “clever” workaround that makes it possible to transition from height: 0 to height: auto, which isn’t normally possible with CSS3 transitions.

  • Simple, semantic markup.
  • Weighs only 1.6 KB minified and Gzip’ed.
  • Doesn’t require any external library.
  • Uses CSS3 transitions and touch events.
  • Removes the 300 ms delay between a physical tap and the click event.
  • Makes it possible to use CSS3 transitions with height: auto.
  • Built with accessibility in mind, meaning that everything works on screen readers and with JavaScript disabled, too.
  • Works in all major desktop and mobile browsers, including IE 6 and up.
  • Free to use under the MIT license.

The official demo of Responsive Nav plugin.5
The official demo, View live at responsive-nav.com/demo6.

How It Works?

Responsive Nav is the successor of TinyNav.js7 which was released in 2011. While TinyNav worked so that it converted a regular navigation to a select menu, Responsive Nav only hides the original navigation and adds a toggle which opens and closes it. Responsive Nav doesn’t basically alter the html structure of the document at all, so it’s in that sense a much simpler solution.

Responsive Nav works by calculating in the background the max-height needed to fit all the menu items. When the user taps the navigation toggle the plugin uses CSS3 transitions to transition from a height that is set to 0 to the max-height it calculated earlier. Responsive Nav also attaches a touchstart event listener to the toggle, which makes it possible to remove the default 300 ms delay that happens when using click events.

Why Choose This Over Another Solution?

Responsive Nav is lightweight and doesn’t depend on any external library. The navigation opens instantly on touchstart — no more 300 ms delay on touch devices. It’s also (as far as I know) the only responsive navigation plugin out there that uses CSS3 transitions with variable height (although correct me if I’m wrong). Responsive Nav is also built with accessibility in mind, meaning that everything works on screen readers and with JavaScript disabled, right out of the box. Finally, Responsive Nav has been tested to work on 60+ mobile and desktop browsers, so that you would’t have to worry about browser support. See the full list8 of tested platforms.

Demo And Download

(al) (ea)

Footnotes

  1. 1 http://responsive-nav.com
  2. 2 http://opensource.org/licenses/MIT
  3. 3 http://responsive-nav.com/
  4. 4 http://responsive-nav.com/
  5. 5 http://responsive-nav.com/demo
  6. 6 http://responsive-nav.com/demo
  7. 7 http://tinynav.viljamis.com/
  8. 8 https://github.com/viljamis/responsive-nav.js#tested-on-the-following-platforms
  9. 9 http://responsive-nav.com
  10. 10 http://responsive-nav.com/demo
  11. 11 https://github.com/viljamis/responsive-nav.js/archive/master.zip
  12. 12 https://github.com/viljamis/responsive-nav.js

↑ Back to topShare on Twitter

Viljami is the Lead Front-End Designer at Adtile. He is also the founder of Helsinki Device Lab which is established to help the web developer community of Helsinki to be able to test their responsive designs on a growing range of mobile devices. He’s passionate about responsive design, CSS, JavaScript and web typography, and both tweets and writes actively about these subject. Viljami has been designing web sites for over a decade.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Can’t wait to add this into my nav, great work.

  2. 2

    Sounds good but unfortunately doesnt work on my Android phone…

    • 3

      Viljami Salminen

      April 9, 2013 3:15 am

      What phone, OS version and browser (+browser’s version) are you using? Can you also confirm if this simple demo isn’t working for you: http://responsive-nav.com/demo-respondjs/

      I am probably able to fix the problem, but need more information about the device and OS you are using, as we haven’t ran into any specific Android problems while testing this at http://devicelab.fi

      • 4

        Works perfectly on Samsung S2 too.

      • 5

        I have a HTC One XL with Android 4.1.1, Standard System Browser… On tap the navigation slides open but closes immedately after… I’ll try the simple demo link later on, i am at work at the moment…

      • 7

        Tested on Android 4.1.2:

        Stock browser – Works fine however, when opening, it immediately jumps down to the second item.

        Chrome (Android) – Works but, the animation is VERY choppy.

      • 8

        Works perfectly on my Ginger Bread 2.3 as well.
        It could be better if the jQuery scrollTo type animation can be added for one page website.

    • 9

      Just tested on S3 and OneS and works perfect. No glitches, very smooth.

      Great job!

    • 10

      Works fine for me in both portrait and landscape on the Nexus 4 running Android 4.2.2 and Google Chrome 25.0.1364.169.

  3. 11

    The issue is with transitions on height, which don’t work well on mobile devices.
    I would rather see the nav opening/closing implemented by translateY, so that the animation is smoother.

    • 12

      Viljami Salminen

      April 9, 2013 4:22 am

      Good point Amit! On some Android devices transitioning the height is slow, but then again on some there wasn’t really any performance problems. I think our Nexus 7 (and the stock Chrome browser) was actually the worst of all of the Android devices we tested.

      The way you are suggesting is on my todo list, but haven’t yet had a chance to actually dig deeper and investigate how much more smoother it would be then. But I’ll add this to the repository’s readme/roadmap so I won’t forget it!

      • 13

        Thanks Viljami,
        I just wanted to point out that it’s a bit janky on my iphone 4s as well. A solution might be to just try the animation at 30fps instead of 60. If you’re using requestAnimationFrame, you just do the animation every second time.

  4. 14

    Mohamed Elkebir

    April 9, 2013 3:10 am

    Thanks for the great work. I’ll join it to my design workflow as soon as i can.
    The best thing in this project is the non external libraries, CSS3, cross browser and of course the MIT licence.

  5. 15

    Have used this kind of navigation recently and it works great for small websites. But when dealing with sub navigation (and possibly even more levels), I still find it hard to come up with a good responsive solution. And each and every tutorial/demo focuses on a single level navigation.
    For complex sites the above just doesn’t do :(.

    • 16

      Viljami Salminen

      April 9, 2013 4:13 am

      You are right about that Linda. This solution doesn’t work well or isn’t even meant for complex navigations at the moment. I’ve been planning to add a better support for multiple navigation levels later on, but that still doesn’t mean, that a solution like this would be good for large scale web sites.

    • 18

      E.g. pull-down/right menus on desktop and togglable sub-lists on mobile devices? But there are some caveats…

    • 19
    • 23

      I’ve been mapping out solutions for large sites on mobile. In a lot of cases, it comes down to content management from start because even if you come up with away to crunch a huge multilevel navigation into a tiny are, there may still be issues with how to organize subnav on child pages. This may mean redesigning a site specific to mobile devices, such as planning the nav differently in the beginning based on the size of device screen real estate

  6. 24

    I’ve been following your work for a while Viljami. Happy to see you write articles here and hope to learn more from you. Responsiveslides is still the best responsive slider I could find.

  7. 26

    Sounds good. Will try this out!

  8. 27

    Works like a charm. But does it support multi-level navigation?

  9. 30

    A few observations:
    orientation change doesn’t work on my Surface RT(IE 10) when viewing the page in a browser session launched by the News360 app, but works in an IE10 desktop session and does work on my Windows Phone 8 (also IE10).

    The buttons are marginally too small on my Nokia Lumia 920/WP8. Apart from flashing, are the menu buttons supposed to change the content pane? They don’t on either of my devices.

    On WP8, the last line of the fourth paragraph of text in the content pane is clipped and none of the subsequent lines are displayed, i.e. it displays one screenful and doesn’t scroll.

    • 31

      Viljami Salminen

      April 9, 2013 5:22 am

      Thanks for the comment Peter, appreciated! I don’t have a WP8 phone and/or surface tablet to test on right now, but will hopefully be able to fix these issues when I get my hands on those devices.

      Does the plugin itself have problems working on WP8 or is it just the responsive-nav.com site? If you have time, please test this demo on WP8, which has been tested on more devices: http://responsive-nav.com/demo-respondjs/

  10. 32

    love this nav :D

  11. 33

    I just wish it was possible to pin these quick responsive menus to the top of the view when scrolling. The biggest UX issue with these CSS animated menus is that they can’t place the menu link anywhere other than its starting position easily (from what I can tell). As in I’d love to have the menu link scroll with me through the content. I thought you were alluding to that with the fixed position solution here, but I guess that was something else.

    As for the dropdown, I prefer the side menu as presented by http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/ when implemented on smaller screens.

  12. 34

    Looks good and we’re about to give it a test for a simple User Guide.

    Thanks for the work Viljami. Hats off to you :o)

  13. 35

    Great plugin! Thank you so much for sharing.

  14. 36

    This is really nice.

    Here is a responsive nav I made a while ago, using jQuery.
    http://martinblackburn.github.com/responsive-nav/

    While not as small as this, its does allow for drop downs to be using on the nav.

    All the code is on GitHub, so feel free to have a play.

  15. 37

    This is absolutely great work Vilijami! I love your works. Especially the ResponsiveSlides.js These creations are truly helpful and great. Thanks! Loving them! (Also, I see that Smashing Magazine looks like they have the TinyNav!)

  16. 38

    Looks great, can’t wait to put it in my projects :)

  17. 39

    Nice work.
    Quick test shows Chrome for Android working fine actually (on Nexus 7). Dolphin reloads on-click on toggle and thus hides the nav again..

    • 40

      Viljami Salminen

      April 9, 2013 10:34 am

      Thanks for the bug report Tom! I can confirm this behavior with Dolphin and Nexus 7. The good thing is that I have a test device here which shows this, so I’m probably able to fix this too. Will hopefully have time to look more into this later on this week. :-)

    • 41

      Viljami Salminen

      April 9, 2013 11:19 pm

      I have good news for you Tom! Just fixed the Dolphin issue on my local version. Needs some more testing today/tomorrow, but after that will push the fix to GitHub.

      • 42

        You’re very welcome Viljamis. We are thanking you btw, a quick test on the device at hand with a few browsers is the least we can do :) I’ll check with another few devices/browsers when I get to them.

  18. 43

    Looks great! I built something similar awhile back that works for more traditionally laid out sites in case anyone has a need for that. Allows for multilevel dropdowns & has examples for other responsive elements. http://rwd.kthornbloom.com/

  19. 44

    Nice piece of code, but isn’t working in the native browser of Samsung GT-I5800.

  20. 45

    Excellent plugin!! I can’t wait for use it!

  21. 46

    Forget Responsive, its just a TREND like WAP websites and JAVA applets for menus.

    The responsive design is the ZIP drive of the web (from floppy disk to cd/dvd to usb drives!, see the zip drive there? no!)

    Adaptive on the other hand is a must, but we need to load the content for all the views on the same session.

    • 47

      Would like to see how you create an “adaptive” version for hundreds of viewports.. :) :)

      Build fluid and modular.

  22. 48

    Isn’t correct archieve the same results without this library and setting max-height:200% (or some big number) on tap and then manage the transiction speed with css?

  23. 49

    Radovan Súkopa

    April 10, 2013 1:49 am

    Great article! Responsive web design is a trend from last year, by the way. This page is the living proof of (among other things you can find there some great HTML5 and WordPress themes.) – http://bestforwebs.com

  24. 50

    Looks great! But you plan to do jquery plugin?

  25. 51

    Looks very basic (beside it flashes in safari). In most of the cases you load libraries anyway with the CMS you use; so you have no benefit to load any tiny library additional. Sorry, but for me it looks like someone is exploring responsive and thinks he provides a better solution, then is implemented 1000times and better before.

  26. 52

    Really simple, and looks great. Will definitely add this to my next website.

  27. 53

    This is brilliant JavaScript plugin…

  28. 54

    For the horizontal menu it seems the functionality is limited to 4 menu options, any more menu options will cause the menu items to stack on top of each other regardless if there is enough horizontal space available.

    Would love to see some tweaks done to adjust the padding of the li items so it’s not a fixed 25% and more dynamic, that way it could be used for a CMS platform.

  29. 55

    Simple but I feel it’s very modern. I will check on my BlackBerry phones and will report back if any support.

    Thanks for a great plugin!

  30. 56

    very good.Thanks

  31. 57

    Very nice plugin. Thanks for sharing :-)

  32. 58

    Using the vertical side navigation layout, I’m having issues with simply placing anchor tags next to my h2’s then getting the further-down links to respond to the top of the page, like a basic anchor tag should. I tried clicking through two or three links located in the middle of my content, but no advancement whatsover. I’m viewing this through FF v. 21.0 on a Mac.

  33. 59

    I’ve built a new Drupal module that integrates the Responsive Nav plugin.

    http://drupal.org/project/responsive_navigation

  34. 60

    Mark (Superticker)

    July 7, 2013 5:06 am

    Nice technique. However, your implementation doesn’t seem to work if you want to pin the menu and hamburger toggle to the top with {position: fixed}. Can that be fixed easily?

  35. 61

    It’s not working in my WordPress theme when I test on my iPhone 4S… I tried out the demo and that’s working on my iPhone, so I’m sure it’s something I’m doing wrong. Can anybody help me out?

  36. 62

    Is there a way to have the menu collapse when a nav link is clicked? The problem seems to be that when using this solution on a one-page site with navigation that sticks to the top that when the menu is toggled, it completely covers the content below. With the content covered there is no way for the user to know that the page has scrolled. Is there then a way to simply have the responsive-nav collapse if a nav link is clicked?

    I noticed that FlexNav has a demo of a use case akin to what I’ve described. See http://jasonweaver.name/lab/flexiblenavigation/single-page-pattern.html

    If there isn’t a way to accomplish what I’ve described with this script then I suppose I’ll try out that one.

  37. 63

    Pretty slick plugin Viljami!

    I am using it on a project, but get this sort of flicker on load…

    https://www.dropbox.com/s/qzwb2nuwv9wrqwz/navOnLoading.PNG

    https://www.dropbox.com/s/gspe81xwdtd98sn/navOnLoading_2.PNG

    Here’s a link too…
    http://aortiz.info/mirophotography/index.php#nav
    Any help would be so helpful!

    Thanks,
    antonio

  38. 64

    Thanks for the plugin Viljami.
    Is there any specific breakpoint for mobile menu?

    I would like to also change other selectors together with responsive nav.

    thanks in advance
    Peter

  39. 65

    Awesome plugin. I’m working with a client and need a secondary drop-down navigation but would love to use Responsive Nav. Any examples out there of a secondary nav using this plugin? Thanks!

  40. 66

    Nice work, but it would be better if you had written up a tutorial for newbies showing exactly how to implement it. I’ve followed the instructions but it isn’t working.

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top