JQuery_ Novice to Ninja - Earle Castledine [31]
We’ll start with the CSS: we’ve moved our menu to be absolutely positioned at the top-right of the container div, where there’s space for the icons to expand. We’ve set a background color for the icons to be set against, and employed a clever trick to keep the background images out of view; notice that the list items are 20px in height, but that the background is offset 30px from the top. As a result, they’ll be invisible until we expand the height of the list items.
We’ll also set the background image of each link to a different icon:
chapter_03/10_animated_navigation_2/navigation.css (excerpt)
#container {
position: relative;
}
#navigation {
position:absolute;
width: inherit;
top: 0;
right: 0;
margin: 0;
}
#navigation li {
height:20px;
float:left;
list-style-type: none;
width:70px;
padding:3px;
border-right:1px solid #3687AF;
background-color: #015287;
background-repeat: no-repeat;
background-position: center 30px;
}
#navigation li a {
color: #FFFFFF;
}
#navigation #home{
background-image:url('icon_home.png');
}
…
The only new aspect for this effect’s code is that we use the stop action to clear the queue for both the mouseover event and the mouseout event. Then we just animate the height to display the hidden icons and shrink it back to normal when the hover finishes. Some carefully chosen duration and easing settings give us the groovy bouncing effect that we’re after. Make sure you experiment with the settings in order to match the feel of your site:
chapter_03/10_animated_navigation_2/script.js (excerpt)
$('#nav_stretch li').hover(
function() {
$(this)
.stop(true)
.animate(
{height: '60px'},
{duration: 500, easing: 'easeOutBounce'}
)
},
function() {
$(this)
.stop(true)
.animate(
{height:'20px'},
{duration: 500, easing: 'easeOutCirc'}
)
}
);
Now we have not one, but two funky examples of animated navigation to show our client!
The jQuery User Interface Library
As mentioned in Chapter 1, the jQuery UI library is a collection of advanced jQuery widgets, effects, and interactions—such as date pickers, accordions, and drag-and-drop functionality—that are widely applicable to web development. But before we start the fun stuff, it’s time to have a look at downloading and including the jQuery UI library—a procedure that’s marginally more complicated to set up than the core library and plugins we’ve been using so far. This is because the full jQuery UI library is nearly 500KB in size (300KB when minified)! That’s a lot of code! Fortunately, any given project will normally only require a small subset of the functionality contained in jQuery UI, and the jQuery web site provides us with a handy tool to create our own custom version of jQuery UI that contains only what we need and nothing more.
The options can appear a bit daunting the first time you visit the download builder page, which you can reach by clicking the Build custom download link from the jQuery UI homepage.
The download builder is broken into several sections: Core, Interaction, Widgets, Effects, and Themes. Core is the main jQuery UI library—the Widgets and Interaction components all rely on it. A good way to approach the builder is to deselect everything and then add only what you require. If a component relies on another component to function,it will be automatically selected for you.
While we’re developing, it’s safe to grab the full library. That way everything will be there for us to use if we need it. Once you’re happy with the functionality on your web site, you can always return to the download builder and create a custom library, omitting anything unused. The difference in file size between the full library and a customized version can be quite significant, as illustrated in Figure 3.5.
Figure 3.5. Full jQuery UI library versus customized download
One option that