Navigataur: A pure CSS responsive navigation menu
Navigataur is a simple CSS snippet for stylish responsive navigation menus.
To use navigataur.css, reference the stylesheet in the <head></code> of your document (or you can place within your own stylesheet). To work out of the box, you will need the following adjustments to your markup (classes can be changed in the stylesheet if you use something different):
- An outer
<div></code> with a class of header - An
input[type=checkbox]</code> with an ID of toggle</code> and label[for=toggle]</code> with a class of toggle</code> just above your list menu. - A list menu (either ul or ol) with a class of menu
Example Setup:
<input type='checkbox' id='toggle'/> <label for='toggle' class='toggle'></label> <ul class="menu"> <li><a href="#">Google</a></li> <li><a href="#">Facebook</a></li> <li><a href="#">Youtube</a></li> <li><a href="#">Twitter</a></li> </ul> </code> </pre> That’s it! Everything works out of the box with this setup. However, like any CSS plugin/snippet, you will probably want to stylize it to match your sites theme. I’ve separated all functional CSS from the presentational CSS so you can jump right in and change everything you need without breaking the plugin. Just edit as needed below the following CSS comment: /*-------------------------------- Presentation Styles (Editable) ---------------------------------*/ Support WebKit rendering engine makes up the vast majority of mobile browsers (iOS, Android, Nokia), so you can expect the same level of support for mobile browsing as you see in Chrome/Safari. Chrome 16.0+ Safari 5.1+ Firefox 4.0+ Opera 12 IE9* iOS 4.0+ Android 2.2+ Internet Explorer 8 and below do not support media queries. If you need support for legacy IE versions, you can use an IE specific stylesheet to provide some styling support. Live Demo: http://micjamking.github.com/Navigataur/ Github Repo: https://github.com/micjamking/Navigataur
Written by Mike King
Related protips
17 Responses
Awesome! I'm going to look into this to see, if I can integrate it into crystallo! Thanks.
@timpietrusky Awesome man! Let me know how it goes and if you see any issues/bugs.
Brilliant! Thanks Mike!
Looks nice, i'll give it a go on my companys new side project !
thanks, i integrate this menu into my new Wordpress custom theme.
@Wanville: Awesome! Glad you got some use out of it!
Yes, it is really great, easy way to responsive navigation. Thanks:)
hi, i ve put the css and this ....
<div id="header" class="parentContainer container">
<div class="header clearfix">
<h1>Santoro<span>Francesco.</span></h1>
<div class="nav">
<input type="checkbox" id="toggle">
<label for="toggle" class="toggle"></label>
<ul class="menu">
<li>
<a href="#ancla1">home</a>
</li>
<li>
<a href="#ancla4">work</a>
</li>
<li>
<a href="#ancla5">services</a>
</li>
<li>
<a href="#ancla6">contact</a>
</li>
</ul>
</div>
</div>
</div> <!-- end header-->into my html but when i scale the page ( smartphone portrait ) on click the menu does't appears and doesn't appear the " main menu" text. only blue bar.
any solution please ?
can you please help making it clickable (for mobile devices) with sub menus??
Yeah - i was messing with the downloadable CSS but it's missing a few things. And like Syedaliaziz and fraom the menu didn't work in mobile view. I just found the CSS used in the example and used that instead of the downloadable version: http://micjamking.github.io/Navigataur/navigataur.css
Same issue as with danlovesadobe, Syedaliaziz and froam. So I also took danlovesadobe's suggestion and took the css direct from the example.
Seems you're missing about 30 lines from the github version...
Wow! Just great! Thanks so much
Hey, Mike!
I'm using your CSS menu and it works awesome. I changed some stuff in the layout, and was wondering: how should I proceed if I want the menu to close automaGically after I click a link?
Thank you very much for this! :D
Hey Mike,
great bit of coding, I was wondering the data-open and data-close those values equal the text you see to open and close can an image be added? like a menu icon?
Really nice work. will try using this.
cool
It's cool but not right - doesn't work on mobile and you're using form elements outside of their context.
Have a fresh tip? Share with Coderwall community!
