Navigataur é um snippet CSS simples para menus de navegação responsivos e elegantes.
Para usar o navigataur.css, consulte a folha de estilo no <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):
- Um exterior
<div></code> with a class of header - A
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. - Um menu de lista (ul ou ol) com uma classe de menu
Configuração de exemplo:
<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