Where developers come to connect, share, build and be inspired.

224

Navigataur: A pure CSS responsive navigation menu

80340 views


Navigataur is a simple CSS snippet for stylish responsive navigation menus.

To use navigataur.css, reference the stylesheet in the <head> 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> with a class of header
  • An input[type=checkbox] with an ID of toggle and label[for=toggle] with a class of toggle 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>

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

Comments

  • 13a9550a854af911366d9f5deb785cd6

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

  • User-avatar

    Brilliant! Thanks Mike!

  • User-avatar

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

  • User-avatar

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

  • Mike_headshot

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

  • User-avatar

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

  • Mike_headshot

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

  • 2d22b94f9fe409c26c00c6e4e7986ae4

    hi, i ve put the css and this ....

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

  • Ceb098d6addf5a260d6e9d634bc1c61a

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

  • 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

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

  • 73569179cc82b0f785ae0b7601b9735a

    Wow! Just great! Thanks so much

  • 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

  • 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?

  • David

    thanks for the great coding. appreciate it

  • Acb28b517a51f2636824ae77cd5acded

    Really nice work. will try using this.

  • Default_profile_0_normal

    cool

  • None

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

Add a comment