Dojo: mobile navigation how to

June 25, 2012

Last update: March 30, 2020

Tested with: Dojo Toolkit 1.16.2

During the last month I worked on my personal website and blog (hosted on Tumblr) in order to apply my knowledge on Responsive Web Design and do some experiments.

In Mobile Navigation Design & Tutorial (that inspired this post) some issues about Responsive Navigation Menu are listed. Of course, I had to handle these kind of problems during the redesign and implementation of my website, but to implement solutions I decide to use Dojo Toolkit instead of jQuery.

Ok, let’s start! The HTML code for the navigation menu is:

<nav id="nav-wrap"> <ul id="nav"> <li><a href="#1" title="Item 1">Item 1</a></li> <li><a href="#2" title="Item 2">Item 2</a></li> <li><a href="#3" title="Item 3">Item 3</a></li> <li><a href="#4" title="Item 4">Item 4</a></li> </ul> </nav>

And now the Dojo part:

require(["dojo", "dojo/fx/Toggler", "dojo/on"], function(dojo, Toggler, on) { var navWrap = dojo.byId("nav-wrap"); var nav = dojo.byId("nav"); var isVisible = false; var menuIcon = dojo.create( "div", { id: "menu-icon", innerHTML: "Menu" }, nav, "before" ); var toggler = new Toggler({ node: nav }); on(menuIcon, "click", function() { if (isVisible) { toggler.hide(); } else { toggler.show(); } isVisible = !isVisible; }); });

And to finish a touch of style:

#menu-icon { display: none; } #nav-wrap { position: relative; } #nav { list-style: none; padding: 0; } @media screen and (min-width: 1024px) { #nav { opacity: 1 !important; } #nav li a { background-color: #ddd; display: block; float: left; margin: 0.2em; padding: 0.5em; } } @media screen and (max-width: 1023px) { #menu-icon { background-color: #ddd; border: 1px solid #aaa; display: block; padding: 0.5em; width: 3em; } #nav { background-color: #fff; border: 1px solid #ddd; left: 0.5em; opacity: 0; position: absolute; top: 1.25em; } #nav li { padding: 0.5em; } }

The complete example is available on GitHub.


A photo of Elia Contini
Written by
Elia Contini
Sardinian UX engineer and a Front-end web architect based in Switzerland. Marathoner, traveller, wannabe nature photographer.