Super Mega Ultra Nav

A graphic of the Super Mega Ultra NavigationRecently revealed at the Grand Opening of the Seattle ID meetup, I bring you the Super Mega Ultra Nav.

Based on rudimentary CSS and HTML, this example of front end fantasticaliciousness is intended for the wide eyed beginner to the powerful ninja dev. This little guy was built mobile first and responsive to screen sizes ranging from 240 pixels to 1024 pixels wide. The Super Mega Ultra Nav was built to be strong, sensitive, and respond to your needs, always looking ready for the situation. The magic is in the media queries and use of the :hover pseudo-class.

Let’s get real for a second. This solution is not awesome with old poopy pants browsers that I will refrain from exhaustively mentioning. Nor will this solution currently work without JavaScript on Android (as of July 3rd, 2012) as it does not support :hover in the same way mobile Safari does.

The delicious parts are that it’s an incredibly lightweight solution and that it was HTML5 ready before HTML5 was even a thing to fight over. Although the demo is set in a Summer theme it’s easy to manipulate it into something more suitable for your occasion. The structure is so simple it’s almost begging for more content. With that said, go fork this mutha over at the Super Mega Ultra Nav repository. I’ll be adding enhancements and making improvements to tighten up the user experience on a continual basis.

My super mega ultra message to you with this endeavor is to remember to push your most dependable resources to the max before you pounce on libraries, plugins, shivs, polyfills, whatever. Push your limits and keep it simple smarty.

This entry was posted in CSS, Development, HTML. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

One Comment

  1. Jim
    Posted July 3, 2012 at 7:44 pm | Permalink

    Hi Jayson,

    I love your website. And I’d actually like to base my own off of it, if that’s okay with you. So I’m wondering what you use for a backend and, if it’s custom code, whether you’d be willing to share it with me.


Post a Comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>