This website uses cookies to personalise ads and to analyse traffic ok
web design

Simple navigation with CSS3 and jQuery

Simple navigation with CSS3 and jQuery

A simple navigation menu built with CSS3 and the jQuery UI.

The css with some custom fonts via Google font API

@import url(http://fonts.googleapis.com/css?family=Lobster);
body {margin:0; padding:0; background:#ddd;}
#nav{position:relative; margin:40px; background:#eee; padding:0; font-family:'Lobster', Arial, Helvetica, sans-serif; font-size:21px; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:2px 2px 3px #ccc; -webkit-box-shadow:2px 2px 3px #ccc; box-shadow:2px 2px 3px #ccc;}
#nav .clear{clear:both;}
#nav ul{padding:0 0 0 5px; margin:0; list-style:none;}
#nav li{float:left; margin:5px 10px 5px 0; background:#eee; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
#nav li a{text-decoration:none; color:#9e0039; display:block; padding:10px 15px;}

Load the jquery library and UI straight from Google

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>

The jQuery code

<script>
$(document).ready(function(){
    $nav_li=$("#nav li");
    $nav_li_a=$nav_li.children("a");
    var animSpeed=450; //fade speed
    var hoverTextColor="#fff"; //text color on mouse over
    var hoverBackgroundColor="#9e0039"; //background color on mouse over
    var textColor=$nav_li_a.css("color");
    var backgroundColor=$nav_li.css("background-color");
    $nav_li_a.hover(function() {
        var $this=$(this);
        $this.stop().animate({ color: hoverTextColor }, animSpeed).parent().stop().animate({ backgroundColor: hoverBackgroundColor }, animSpeed);
    },function() {
        var $this=$(this);
        $this.stop().animate({ color: textColor }, animSpeed).parent().stop().animate({ backgroundColor: backgroundColor }, animSpeed);
    });
});
</script>

Optional jQuery code that features a selected state when an option is clicked

<script>
$(document).ready(function(){
    $nav_li=$("#nav li");
    $nav_li_selected=$("#nav li.selected");
    $nav_li_a=$nav_li.children("a");
    var animSpeed=450; //fade speed
    var hoverTextColor="#fff"; //text color on mouse over
    var hoverBackgroundColor="#9e0039"; //background color on mouse over
    var textColor=$nav_li_a.css("color");
    var backgroundColor=$nav_li.css("background-color");
    //init selected
    $nav_li_selected.css("background-color",hoverBackgroundColor).children().css("color",hoverTextColor);
    $nav_li_a.hover(function() {
        var $this=$(this);
        $this.stop().animate({ color: hoverTextColor }, animSpeed).parent().stop().animate({ backgroundColor: hoverBackgroundColor }, animSpeed);
    },function() {
        var $this=$(this);
        if(!$this.parent().is(".selected")){
            $this.stop().animate({ color: textColor }, animSpeed).parent().stop().animate({ backgroundColor: backgroundColor }, animSpeed);
        }
    });
    //selected state
    $nav_li_a.click(function(){
        var $this=$(this);
        $this.stop().animate({ color: hoverTextColor }, animSpeed).parent().stop().animate({ backgroundColor: hoverBackgroundColor }, animSpeed).addClass("selected").siblings(".selected").removeClass("selected").stop().animate({ backgroundColor: backgroundColor }, animSpeed).children().stop().animate({ color: textColor }, animSpeed);
    });
});
</script>

The html markup

<div id="nav">
    <ul>
      <li><a href="#about">About</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#recent">Recent projects</a></li>
        <li><a href="#experiments">Experiments / miscellaneous</a></li>
        <li><a href="#contact">Contact me</a></li>
    </ul>
    <div class="clear"></div>
</div>

Optionally, if you need to have a menu option selected on page load, add the class-name selected on it. For example:

<li class="selected"><a href="#about">About</a></li>

To add support for rounded corners in IE8 we can use DD_roundies script by Drew Diller. Add the following code inside the head tags:

<script src="DD_roundies_0.0.2a-min.js"></script>
<script>
     DD_roundies.addRule("#nav", "5px");
     DD_roundies.addRule("#nav li", "5px");
</script>

That’s it. Feel free to modify it as you like πŸ™‚

Changelog

  • Oct 27, 2011
    • Added an optional selected state for menu options (as requested by some users)
      Code is much shorter and a bit more optimized

43 Comments

Post a comment
  1. sol
    Posted on April 2, 2014 at 19:01 Permalink

    como hacer un submenu?

    Reply
  2. Eric
    Posted on March 22, 2014 at 09:47 Permalink

    So i am having trouble making this work with wordpress. Works on the homepage but if I go to any other page it fails to work and also never remembers the new page.

    Reply
  3. Udeh
    Posted on March 5, 2013 at 19:08 Permalink

    Thanks…

    Reply
  4. Cathy
    Posted on November 17, 2012 at 22:10 Permalink

    Oh, and any thoughts on child menu items?

    Reply
  5. Cathy
    Posted on November 17, 2012 at 21:50 Permalink

    Working on client site and would love the “selected” state to work but is not. Using this in WordPress so I have a dynamic menu and cannot manually place a class in the . I thought the code was making that happen dynamically, but perhaps I’m wrong. Are there special needs for using in WordPress with wp_nav_menu?

    Reply
  6. Muhammad Ramadhan
    Posted on October 5, 2012 at 15:07 Permalink

    How to install to your website / blog how the heck?
    Please guidance, I was the new guy on Websites & Blogs
    # If you not mind, could be a senpai / my teacher?
    Please add, http://fb.com/Nsx.Nsx097
    Thank you.

    Reply
  7. alrobelller
    Posted on October 1, 2012 at 18:02 Permalink

    hi ! how to highlight current menu item because with just css this leads to strange behaviour?

    Reply
  8. Jokerio
    Posted on September 16, 2012 at 12:34 Permalink

    Hi! This code is a great piece of code, thanks a lot for your work! πŸ™‚

    I’ve been trying to achieve something but I can’t do what I want, maybe you can help me: I don’t want any right margin on the last button.

    I tried:

    #nav > li:last-child {margin-right:0px;}

    But it doesn’t work. If you have any idea how I can do that, thanks for your help!

    J.

    Reply
    • malihu
      Posted on September 16, 2012 at 13:52 Permalink

      Hi and thanks for your comments πŸ™‚

      Try without the > symbol
      #nav li:last-child{margin-right:0;}
      this will overwrite
      #nav li{margin:5px 10px 5px 0;}

      Reply
      • Jokerio
        Posted on September 16, 2012 at 14:28 Permalink

        Thanks a lot malihu, I should have tried that but I thought the > symbol was the right way to put it.

        It works fine on FF but not on IE8. I’ll search if there is a way to make this work with IE8.

        Thanks again! πŸ™‚

        J.

        Reply
  9. qua tang quan ao thoi trang
    Posted on September 3, 2012 at 21:40 Permalink

    thank you so much guy!!! it so wonderful. Can it run in IE???

    Reply
  10. Gerald Gangadharan
    Posted on July 20, 2012 at 00:04 Permalink

    Nice Navigation.

    Hope can do some code cleanup.

    <div id="nav"> <ul> <li><a href="#about">About</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#recent">Recent projects</a></li> <li><a href="#experiments">Experiments / miscellaneous</a></li> <li><a href="#contact">Contact me</a></li> </ul> <div class="clear"></div> </div>

    Just by adding

    $nav_li.prepend('<span>&nbsp;</span>');

    in jQuery part?

    Reply
    • Gerald Gangadharan
      Posted on July 20, 2012 at 00:19 Permalink

      Above comment goes to “menu with images

      Thank you for nice menu with background animation.

      Reply
  11. Adam
    Posted on July 6, 2012 at 18:02 Permalink

    I love this navigation, it’s so simple and elegant. Just one problem when customising the CSS.

    I removed the background colours for the UL and LI, so that I can have text links over a body background (colour, but could be graphic later). And I found that the mouse out LI background-color was always white. I couldn’t see this white referenced anywhere.

    Finally found out that the #nav li {background:#???} is the colour used on mouseOut and if that isn’t specified, the browser uses white.

    I’d like the background to be transparent, but setting this value in the CSS for this element doesn’t work. Can’t figure out why, it’s a valid CSS value. Must be something to do with the function.

    Is it possible to have the initial and mouseOut LI colour as transparent?

    Reply
    • malihu
      Posted on July 7, 2012 at 11:58 Permalink

      Not really. You cannot animate to transparency with jQuery UI.

      Reply
      • Adam
        Posted on July 7, 2012 at 17:04 Permalink

        Pity, thanks for the clarification and thanks again for the code.

        Reply
  12. Rob Salaman
    Posted on July 3, 2012 at 15:55 Permalink

    This is awesome work, keep up the good stuff!! I absolutely love this post, I’ve used it on my new site along with your image panning tutorial. Cheers πŸ™‚

    Reply
  13. Jasmin
    Posted on March 30, 2012 at 15:18 Permalink

    Yeach, i works best. thanks a lot.

    Reply
  14. Rasha
    Posted on January 13, 2012 at 20:53 Permalink

    Hi, Its great menu , i tried to use it in my site , but when i remove the # and add the page link , for example about.html , the selected state never work .
    is there idea i can use it to fix this issue please ?
    Thanks

    Reply
    • malihu
      Posted on January 14, 2012 at 01:59 Permalink

      Hello Rasha,
      The selected state only works for single-page navigation, e.g. when scrolling to anchor points on the same page. To apply a selected state on a navigation menu across multiple pages you’d normally have to use some server-side language such as PHP.

      Reply
      • Rasha
        Posted on January 21, 2012 at 07:55 Permalink

        Can you recommend a tutorial to help me in this issue please? i just need the navigation button to be changed to another color when its active
        Thanks

        Reply
  15. michael
    Posted on October 21, 2011 at 20:09 Permalink

    el menu es posible crear submenu ?

    Reply
  16. Wolfgang Kraus
    Posted on October 21, 2011 at 15:57 Permalink

    Hello,

    I like this menu very much, but have one problem using it.

    How do I have to change the code (maybe only the css part), that after I have clicked on one menu entry this stay in front? (I’m using php or asp, so after clicking a menu entry and reloading the site I could use a css class or something else to highlight the selected menu entry…but my css is bad so I do not find the solution…)

    Reply
    • malihu
      Posted on October 27, 2011 at 12:44 Permalink

      Done πŸ˜‰

      Reply
  17. Jan
    Posted on March 15, 2011 at 10:19 Permalink

    Hello,

    is it possible that every li background is colored differently?

    Reply
    • malihu
      Posted on March 15, 2011 at 17:29 Permalink

      Hello,
      Do you want to have different colors for each menu entry for hover only or for both?

      Reply
      • Jan
        Posted on March 15, 2011 at 23:57 Permalink

        Hey,

        I only wanted to make different backgrounds for hover states… Every li gets it’s own background color on hover…

        Thanks for fast reply!

        Reply
  18. Brett Widmann
    Posted on January 16, 2011 at 05:05 Permalink

    This is very nice navigation. I really like how i made mine look!

    Reply
  19. charlene
    Posted on December 5, 2010 at 17:06 Permalink

    This navigation is wonderful! We would like to use it in our template however with background images for hover state. Is it possible to give a background image URL rather than background color? Sorry we don’t know much about jQuery.

    Reply
    • malihu
      Posted on December 6, 2010 at 01:00 Permalink

      The way the script works, it animates background colors using the jquery UI. To switch two images (one image for mouse-over and one for mouse-out) you’d need to insert some additional divs (that’ll have as background image the mouse-over/out images) with different z-index and use a fadeIn-fadeOut jquery function on hover. I might be able to make a script like that on the coming weekend if you’d like.

      Reply
      • charlene
        Posted on December 6, 2010 at 10:37 Permalink

        Great! We’d appreciate if you can make such a script.

        Reply
    • malihu
      Posted on December 13, 2010 at 10:39 Permalink

      Hello again,

      I’ve made the script. Check it at:
      http://manos.malihu.gr/tuts/jquery_simple_menu_images.html

      Have fun πŸ™‚

      Reply
      • charlene
        Posted on December 14, 2010 at 11:03 Permalink

        Thank you so much πŸ™‚

        Reply
  20. malihu
    Posted on September 17, 2010 at 18:16 Permalink

    @Virtual Crowds
    Of course it’s fine πŸ™‚ Thanks!

    @XHTML Valid Websites
    Cool πŸ˜€

    Reply
  21. XHTML Valid Websites
    Posted on September 1, 2010 at 11:07 Permalink

    Which modules of jQuery UI are used? Want to do a “smallest” version.

    Reply
  22. XHTML Valid Websites
    Posted on September 1, 2010 at 10:35 Permalink

    Yeah, just playin around with it.

    I’ll post a link to it if you want πŸ™‚

    Reply
    • malihu
      Posted on September 1, 2010 at 10:42 Permalink

      Sure πŸ™‚

      Reply
  23. XHTML Valid Websites
    Posted on August 31, 2010 at 20:34 Permalink

    This is a pretty nice nav menu. I have to play with it and will integrate it on one of my sites… πŸ™‚

    Thanks for sharing this beauty.

    Reply
    • malihu
      Posted on August 31, 2010 at 23:49 Permalink

      Your welcome . You can do lots of nice stuff with it πŸ˜‰

      Reply
      • manisg
        Posted on January 11, 2013 at 12:31 Permalink

        sir i am new to this section. sir how can i use these scripts in a html page…

        Reply

Post a comment

Cancel reply

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php