I use the TinyNav jQuery plugin to transfer a list menu into a dropdown for mobile devices.

I notice when I resize my browser on my desktop, the TinyNav leaves kind of a nasty look. For example, after I resized my browser into mobile size like 450px wide, I have to refresh the page for the tinynav to take effect and then when I resize my browser back to the normal size, I may see the leftover TinyNav dropdown like:

To make tinynav more resize friendly, I implemented the following concept.

To detect mobile, I check if a certain layer is no longer display none. This way I let the CSS media query take full control of when it’s considered mobile. I don’t have to do any javascript detection. So it could be considered mobile just when you resize your browser window on your desktop. This is the concept I’m using; you may not like it but that’s ok.

My implementation also caches the tinyNav plugin so it doesn’t create a new dropdown every time you resize the window.

Here’s an example of the implementation.

• Load the page
• Resize your window to be less than 450px wide
• You’d see the dropdown menu
• Resize your window slowly to normal size, the dropdown will disappear and the normal menu will show
• Repeat the steps
• View source to see the implementation

CSS

.tinynav,
#mobile {
	display: none;
}
/* show tiny nav once the screen width falls below 730px */
@media screen and (max-width:450px) {
	#mobile,
	.tinynav {
		display: block;
	}
	#nav ul {
		display: none;
	}
}

JavaScript

var navigation = null;
jQuery(window).load(function() {
	loadBasedOnMobileDisplay()
});
jQuery(window).resize(function() {
	loadBasedOnMobileDisplay()
});

function loadBasedOnMobileDisplay() {
	// is it mobile?
	var mobile = false;

	if(jQuery('#mobile').css('display') == 'block') {
		mobile = true;
	}

	if(mobile && navigation == null) {
		navigation = jQuery("#nav ul").tinyNav();
	}
}