Responsive design is the biggest trend in web design right now. There are so many types of screen sizes -- desktop, laptop, tablet and phone and – that responsive design seems to be the perfect solution because it allows you to create a website that adapts to different screen resolutions. It’s challenging to fit a desktop website into mobile screen. To do so, content has to be hidden, images have to be resized and some elements need to be shifted. Here, we are going to look at the crucial UI component of a website navigation menu as it relates to responsive design.
There are many solutions, including select drop down menu, CSS drop down menu, toggle navigation, block, footer/anchor and sidebar navigation. Each solution has strengths and drawbacks. Depending on your needs, layout design and timeframe, this article should help you choose a solution that fits nicely in your website design.
Make it smaller
Creating a small-scale site is the simplest solution. Play with the CSS to make sure the navigation menu fits perfectly in small screen. This solution works most effectively with a limited number of navigation items. If your navigation menu has more than four items, this is a not a particularly viable option. However, some users may find it hard to read and difficult to tap on the link correctly.
This method requires CSS skill. Make sure the navigation menu fits nicely in a small-screen format by changing the font size and spacing between menu items.
Much like shrinking the design, but the block method includes more CSS style treatments. The CSS styles aim to make navigation menu items easier to read and tap, which can solve issues with small and difficult items to tap. However, laying out the menu item as blocks can take up a lot of screen real estate, and may not be the best design choice for mobile devices where the screen size is limited.
- An Alternative to select elements as anvigation in narrow viewports
- Code a responsive navigation menu
Select Drop Down Menu
The following plugins turn any
UL into a
Select List for mobile and small-scale browser sizes.
- Responsive Mnu by Matt Kersley
- TinyNav by Viljami Salminen
- Convert Menu to Dropdown by Chris Coyier
- SelectNav by lukaszfiszer
CSS Drop Down Menu
Using the same concept as with a Select Drop Down Menu, you can create a CSS Drop Down Menu. In mobile devices or small screens, the navigation menu is hidden and replaced by a menu button. Clicking on the menu button will toggle the visibility of the navigation menu. This solution doesn't push the content down, but instead displays itself above the content. The best thing about this solution is that you get to match the menu to your design scheme, eliminating browser inconsistency issues.
- Mobile Navigation Design Tutorial by Web Designer Wall
- Responsive Drop Dwon Navigation Menu by Azad Creative
- Flexible Navigation by Jason Weaver
- Twitter Bootstrap
- Responsive Toggle Menu by Terris Kremer
- Big Menus, Small Screens Responsive Multi Level Navigation by Tessa Thornton
Developing a Footer Anchor is another simple implementation. Start with two navigation menus, one in the header and one in the footer. When the screen size is small enough, header navigation will be replaced by an anchor link that points to the footer.
- A Simple Responsive Mobile First Navigation by Tutsplus
Side Panel Menu
If you are using iOS, Side Panel Menus are not a stranger to you. Inspired by iOS app such as Facebook and Twitter, this sidebar panel method simulates the same effect as when a menu is hidden on the left side of the screen.
- jPanel Menu by Anthony Colangelo
Other Mobile Navigation Methods
Aside from the common solutions, are a few other more advanced options -- Popup Navigation, Pull Down for Navigation and Path Style.
Popup Navigation menus are displayed in a popup module, such as the one by Remodelista. This can be implemented with modal window such as FancyBox or you can use our Modal Window tutorial to create your own unique Popup Navigation style.
Using the concept of "pull down to refresh," the Pull Down experimental mobile navigation menu replaces a UI element with a natural gesture. You can view this implementation from Inspect Element.
Personally, as I have been building responsive layouts my favourite solution is to use a toggle navigation menu. It's simple, yet elegant. The menu is easy to implement and looks good with animation.
I hope you will find this article useful. It's always good to have someone research possible solutions, saving you time and effort. If you want to read more about the drawbacks and strengths of responsive navigation menus, check out Brad Frost’s article on responsive navigation patterns.