MicroMenu - a small RWD-menu

"Micro Menu - the smallest(?) RWD-menu around?"

Without knocking it in any way, this take on a responsive menu which wound up to be code-wise smaller than the otherwise totally-cool tinynav.

Contrary to tinynav, this solution that I'd like to put forth here in this tutorial:

A. Doesn't use jQuery - like, at ALL!
B. Only uses 89 characters-worth(!) of Javascript.

The HTML-code:

First, let's check out the HTML-code, which looks like this:

<nav>

<ul>
<li><a href="#">Home</a></li>

<li><a href="#">Page 1</a></li>

<li><a href="#">Page 2</a></li>

<li><a href="#">Page 3</a></li>

</ul>

<form action="#">

<select onChange="if(this.selectedIndex!=0) self.location=this.options[this.selectedIndex].value">

<option class="menu" value="" selected>≡</option>

<option value="index.html">Home</option>

<option value="pages/side1.html">Page 1</option>

<option value="pages/side2.html">Page 2</option>

<option value="pages/side3.html">Page 3</option>

</select>

</form>

</nav>

...Please note, how the only bit of Javascript used has been slipped into the "select"-element!

(In all honesty, I haven't worked the select-tag with Javascript in a long time, so thanks goes to: http://www.javascripter.net/faq/linksina.htm for reminding me!)

The CSS-code

The CSS-code needed to pull this off and should be included in your own CSS-code, looks like this:


nav{height:27px;line-height:27px;width:100%}

nav ul{margin:0;padding:0}

nav ul li{list-style-type:none;display:inline}

nav ul li a{margin-right:21px}

select{display:none}

@media(max-width:699px){

nav{height:auto}

nav ul{display:none}

select{display:block;width:100%;height:45px;background:#000;color:#fff;font-size:30px;margin:0}

}

The break-point is here set to 699px, but this can altered to whatever break-point, you feel is appropiate for your project.

Try it out...

A working example of the code above can be tried and seen here: https://donvoorhies.github.io/tuts/micromenu_ex.html

Point your mobile-device to the URL-address above or use the following QR-code below:

QR-code

The example-page's code can be seen here: https://github.com/donvoorhies/tuts/blob/master/micromenu_ex.html

Conclusion (well, sort of...):

If you are on the lookout for a "no-fuss", easy to set up and lightweight RWD-menu, then in all modesty, the RWD-menu described herein this page should be what you're looking for!

P.S. Micro Menu is NOT suited to be used for smooth-scrolled one-page sites - jus' sayin'!...!