Tutorial Create Slide Down Box Menu with jQuery and CSS3

Document Sample
Tutorial Create Slide Down Box Menu with jQuery and CSS3 Powered By Docstoc
					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

				
DOCUMENT INFO
Shared By:
Stats:
views:121
posted:4/28/2012
language:English
pages:3
Description: this tutorial Tutorial Create Slide Down Box Menu with jQuery and CSS3