Insights into Building Responsive Navigation
Navigation in RWD can be tough. Responsive Web Design can be a fickle thing - especially if you are retro-fitting an existing website. There are lots of things to think about:
- What breakpoints should I use?
- How should I handle images?
- How can I optimize load time for mobile users?
- How will my tables look on smaller screens?
- Should I use server side detection or client-side detection for any special features?
- What should I do with all this content?
- And finally... what do I do with this navigation?
.Net magazine had a nice little article on the most common RWD problems. Guess which one was number 3? You guessed it - navigation.
How to Better Optimize Your Menu to Make it Responsive
When creating your list of navigation links, you might need to create a sub-menu. When creating that sub-menu, please make sure to use the hash # tag as your link (href attribute) for the parent element of any sub-navigation (secondary or tertiary menus). The reason for this is that some touch enabled devices do not recognize the hover property. Duh...
So instead of doing this:
<ul>
<li><a href="/home/">Home</a></li>
<li><a href="/about/">About</a>
<ul class="sub-menu">
<li><a href="/overview/">Overview</a></li>
<li><a href="/more-about/">More About</a></li>
</ul>
</li>
<li><a href="/contact/">Contact</a></li>
</ul>
You'll want to do this:
<ul>
<li><a href="/home/">Home</a></li>
<li><a href="#">About</a>
<ul class="sub-menu">
<li><a href="/about/">Overview</a></li>
<li><a href="/overview/">Overview</a></li>
<li><a href="/more-about/">More About</a></li>
</ul>
</li>
<li><a href="/contact/">Contact</a></li>
</ul>
One more helpful thing you'll want to do is add some classes to your navigation to help with styling and your JS. I like something like this:
<ul>
<li><a href="/home/">Home</a></li>
<li class="has-submenu" ><a class="dropdown-toggle" href="#">About</a>
<ul class="dropdown-menu">
<li><a href="/about/">Overview</a></li>
<li><a href="/overview/">Overview</a></li>
<li><a href="/more-about/">More About</a></li>
</ul>
</li>
<li><a href="/contact/">Contact</a></li>
</ul>