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

848

Navigataur: A pure CSS responsive navigation menu

43265 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

  • Blank-mugshot
    timpietrusky

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

  • Image_normal
    mattquirk

    Brilliant! Thanks Mike!

  • Twitter_73x73_normal
    sebastiendesign

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

  • 40043_1351209543094_1317057850_30804883_6530730_n_normal
    tomaszrozalski

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

  • Personal-photo
    micjamking

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

  • 0ce8ecfca2d23b5d20571a4d3661e368_normal
    wanville

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

  • Personal-photo
    micjamking

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

  • Blank-mugshot
    fraom

    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 ?

  • Blank-mugshot
    syedaliaziz

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

  • Kj1hjtkd_normal
    danlovesadobe

    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

Add a comment