Tutorial Create Slide Down Box Menu with jQuery and CSS3 by articl3

VIEWS: 121 PAGES: 3

More Info
									Tutorial Create Simple navigation
with CSS3 and jQuery
A simple navigation menu built with CSS3.




As of 27/10/2011 the script features an optional selected state for menu options
(as requested by some users). Also the code itself is much shorter and a bit more
optimized. The demo and .zip files are updated.

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 markup

								
To top