Responsive Web Design (RWD) and its equivalent User Experience Design (UX) are living, evolving, fluid entities which continue to move in a slightly fluctuating state between what is accepted today and where they need to be tomorrow. Part of the responsive design challenge correspondingly requires that our navigation menus need to display on multiple desktop browsers and mobile devices including wireless phones and tablets. Maybe you haven’t tackled the RWD paradigm for your website just yet, either because your stakeholders and customers have not indicated the need, or it has not been identified as a requirement. In any event, getting started with your navigation menus can be the first step to getting the rest of your website on the RWD track.
This piece will review several options for navigation menus including horizontal, custom drop-down, and multi-level options, with several of them incorporating what is known as the “Checkbox Hack”. Two of the examples are available on CodePen, a website which allows you to create your own code or create a forked version of existing code that you can share with others. Another fun feature of CodePen is the on-the-fly code editing; a split screen allows you to manipulate the code above and view the result live on the bottom screen. The first two examples highlighted here are created by Tim Pietrusky and will feature highlights of the original code, in particular his Full Horizontal and Custom Dropdown, which utilizes the Advanced Checkbox Hack. And finally, the creation of a Multi-Level navigation example by Tessa Thornton is addressed on Web Design Tuts, which attempts to solve the issue of sub-menu and multi-level navigation on small screens typical of mobile devices.
Horizontal
The first example by Tim is his Full Horizontal menu which uses an unordered list nested within an HTML5 <nav> element with a role=”full-horizontal”. The CodePen screen capture below displays the HTML and CSS along with the demonstration menu in its typical desktop presentation, as shown in Figure B. (Note: All screen captures are taken from Chrome Version 24.0.1312.56 m.
Figure B
The responsive menu uses CSS media queries to set the maximum width and margin for small screens, and sets the unordered list styles as shown in the code snippet below:
/* small screens */
@media screen and (max-width: 44em) {
body {
margin:1.5em 0;
}
nav[role="full-horizontal"] {
ul {
padding:0 .5em;
}
ul > li {
width:100%;
padding:.45em .25em;
margin:0 0 .55em 0;
&:after {
box-shadow:none;
}
}
}
}
With the screen size reduced to 245 pixels wide, the navigation menu appears as displayed in Figure C below with the custom styling applied. The horizontal navigation demonstrated here uses minimal CSS with succinct HTML and requires no JavaScript.
Figure C
Custom Dropdown
The second highlighted demonstration by Tim is the Custom Dropdown navigation menu which, when displayed in small screens, will show input and label elements utilizing the Advanced Checkbox Hack that he created based on Chris Coyier’s original Checkbox Hack, used to connect a label and checkbox input and usually some other element you are trying to control.
The advanced hack addresses issues with working on mobile Safari OS (iOS < 6.0) and Android browser (Android <= 4.1.2). The essence of the advanced hack is that it adds in a fake animation to the body for the Android browser, and adds an empty onclick on the label for iOS. The drawback with using this navigation menu with the hack is that it is not a correct use of semantics with respect to the empty label and input.
The CodePen screen capture below displays the HTML and CSS along with the demonstration menu in its typical desktop presentation as shown in Figure D:
The HTML5 <nav> element with the role=”custom-dropdown” contains the empty input label with type=”checkbox” as displayed in the code snippet below:
<nav role="custom-dropdown">
<input type="checkbox" id="button">
<label for="button" onclick></label>
<ul>
<li><a href="#">Stream</a></li>
<li><a href="#">Lab</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
The checkbox hack CSS code snippet is shown below:
/* Advanced Checkbox Hack */
body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
display:none;
cursor: pointer;
user-select:none;
}
With the screen size reduced to 225 pixels wide, the navigation menu initially appears closed as displayed in Figure E below with the custom styling applied.
Figure E
Click on the navigation icon at the top right of the screen and the menu items open as shown in Figure F:
Multi-Level Navigation
The Multi-Level navigation tutorial and demonstration by Tessa Thornton from Web Design Tuts endeavors to solve the issue of sub-menu navigation on small screens typical of mobile devices. The approach that Tessa uses to solve the problem of large, multi-tiered navigation menus includes media queries and a bit of jQuery and JavaScript while keeping the HTML to a minimum.
The HTML code snippet starts with a <div> container with an anchor set to a class=”togglemenu” for the top level “Menu”. The multi-level navigation is built from nested unordered lists, and she intentionally only uses classes and ids for the parent unordered list to make the menu compatible with CMS-generated menus.
Tessa walks you through a step-by-step process, first reviewing the HTML, then the CSS and basic styling, and then she tackles the horizontal drop-down menu using the :hover pseudo-selector along with some JavaScript to help with switching the menus with on click activation. The next step covers the vertical drop-down menu, which undertakes the small mobile screen navigation and incorporates the @media screen and media query. Tessa then adds in some more JavaScript to check the width of the window, and then to convert hover to click for mobile devices, changing the target to a click event. Next, she adds in a toggle menu function, more media screen styles, and she also covers a bonus feature of setting up a script to resize the event on mobile screens for the accordion menu. To wrap up the tutorial, Tessa adds more JavaScript for the window events and the showing and hiding of the menus, and then unbinding the events on mobile devices.
The navigation menu displayed in the typical desktop browser with a multi-level view of the menu item shirts for women and the types available is displayed in Figure G :
When resized to a width of 225 pixels, the navigation menu is set to the accordion style as displayed in Figure H:
Tessa’s tutorial provides a download of all the source files which include the index.html, style.css, script.js, and a readme.md, along with images for the up and down arrow.
Now and then while you are examining solutions to an issue or inspecting ways to incorporate new strategies and techniques into your own web development, it is nice to see how others have solved a similar and challenging assignment. The CodePen and Web Design Tuts examples are a perfect place to start looking for ideas when it comes time to creating your own responsive menu navigation for your websites.
