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="http://micjamking.github.com/Navigataur/ Github Repo: https://github.com/micjamking/Navigataur
Written by Mike King
Related protips
17 Responses
Add your response
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.
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...
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?
It's cool but not right - doesn't work on mobile and you're using form elements outside of their context.