sujd_w
89.86K
· October 2012 ·
Mike headshot

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

Sign in or sign up to add your response.

18 Responses

878
13a9550a854af911366d9f5deb785cd6

Awesome! I'm going to look into this to see, if I can integrate it into crystallo! Thanks.

over 1 year ago ·
989
Mike headshot

@timpietrusky Awesome man! Let me know how it goes and if you see any issues/bugs.

over 1 year ago ·
3704

Brilliant! Thanks Mike!

over 1 year ago ·
4147

Looks nice, i'll give it a go on my companys new side project !

over 1 year ago ·
9604

thanks, i integrate this menu into my new Wordpress custom theme.

over 1 year ago ·
9605
Mike headshot

@Wanville: Awesome! Glad you got some use out of it!

over 1 year ago ·
9875

Yes, it is really great, easy way to responsive navigation. Thanks:)

over 1 year ago ·
11172
2d22b94f9fe409c26c00c6e4e7986ae4

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 ?

over 1 year ago ·
12133
Ceb098d6addf5a260d6e9d634bc1c61a

can you please help making it clickable (for mobile devices) with sub menus??

over 1 year ago ·
12460
Kj1hjtkd normal

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

over 1 year ago ·
14852
3329ac5032d91d93d3132f7c2c313646 normal

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...

over 1 year ago ·
15314
73569179cc82b0f785ae0b7601b9735a

Wow! Just great! Thanks so much

over 1 year ago ·
15351
Oenxpwjc normal

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

over 1 year ago ·
15380
E253a96a2f1eaf17eadd22fac20884c9 normal

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?

over 1 year ago ·
16808
David

thanks for the great coding. appreciate it

over 1 year ago ·
18353
Acb28b517a51f2636824ae77cd5acded

Really nice work. will try using this.

over 1 year ago ·
18478
Default profile 0 normal

cool

over 1 year ago ·
21149
None

It's cool but not right - doesn't work on mobile and you're using form elements outside of their context.

over 1 year ago ·
Featured Programming Job

Software Developer
·
Birmingham, AL
·
Full Time
Search all programming jobs