TinyNav.js turns a big navigation menu into a small pull down list

Today I’ve been playing with a really small jQuery plugin that turns your <ol> or <ul> menus into a pull down <select> menu which is excellent for your mobile visitors as it takes up less scarce screen real estate. The plugin is called TinyNav.js and has been developed by Viljami Salminen.

It is very easy to implement. Simply include the tinynav.min.js in the <head> of your page and add the following code:

<script>
$(function () {
$("#nav").tinyNav();
});
</script>

Assuming that your <ul> menu has the id “nav” (<ul id=”nav”>…)

What it does is it duplicates all your menu options and adds them to a <select> options menu and places that directly under your original menu and adds the class “tinynav”. Now it’s up to you to dive into your css and hide and display each of the menus at the right breaking point.

Using TinyNav.js in WordPress

I’ve implemented this script into a WordPress installation which was easy, but the the first challenge was getting the current page to get the “selected” attribut in the select menu. This means that when you’re for example on the “About me” page that that page remains selected in the menu as well. The script allows you to enter a custom class name this is used in your default menu so the script knows which page is currently selected. The few lines of code are the following:

$("#nav").tinyNav({
active: 'selected', // Set the "active" class
header: false // Show header instead of the active item
});

This is the default example code from the documentation. It assumes that your menu starts with <ul id=”nav”> and the menu item that corresponds with the current page has the class “selected”. This is not the case in WordPress. In WordPress your <ul> menu doesn’t have an id or class but the surrounding div has a class. Also, WordPress gives the menu item that matches the current page the class “current_page_item” and not “selected”.

So adapting the code to my WordPress theme it looked like this:

<script>
$(function () {
$(".page-navi ul").tinyNav();
});
$(".page-navi ul").tinyNav({
active: 'current_page_item', // Set the "active" class
header: false // Show header instead of the active item
});
</script>

This worked partly. The pull down menu did appear however selecting the page that is currently openen did not. After trying a number of variations I eventually went into the script itself (tinynav.js) and changed the active menu class name there. This did have the desired effect.

Using multiple menus on one page

But there was another challenge. Some pages had their own menu which ment that I needed 2 menus to be converted. Intuitively I started by added a line of JavaScript which resembled the first line but targeting different classes. The result was that the first menu was now replaced by the second; the first menu was overwritten.

A couple of Google searches didn’t bring me any closer to my goal so eventually I copied the entire code of tinynav.js and pasted it in the same file again at the bottom. Then I changed the function name and namespace from tinynav to tinynavi and saved it. I then duplicated the code above and changed TinyNav in the second instance to TinyNavi. The result was exactly what I was looking for but the downside is that the script just doubled in size. I’ve send the plugin autor a message asking him if there’s a different way to do this. If there’s a better solution I’ll update this page.

Go to the plugin page or Download TinyNav.js

2 Comments