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.

Did you find this post useful? What about