Project Creating snazzy navigation

Our Flash-inspired client has a business that recycles and refits materials that NASA and other space agencies have junked and sold. They'd like their navigation panel to represent this futuristic (and at the same time, retro) feel to their users and provide a page navigation that, according to the client: "has a smooth animation and our logo/icon rocket as a pointer".

Let's go ahead and prep the theme so that we can get started. We'll continue to use the Default Theme with the Page Navigation CSS changes that we made in Chapter 2, Working with jQuery in WordPress. We'll be enhancing the navigation with a smooth indent and release animation that triggers on hovering on and off the menu items. We'll top it off with a cool floating point selector (which also happens to be the site's space ship icon).

First up, we'll need to trace the client's space ship icon used in their logo, into a basic silhouette form so that we can create a floating pointer with it. Again, this is easily done using Inkscape:

We'll take an extra step here and rotate the ship, and since it's going to be a transparent PNG file, add a nice drop shadow and afterburn gloss to give it some depth:

We'll export this image as a 37 pixel wide transparent .png. Next up, we'll need to prep our theme's stylesheet to accept this background image. We'll be creating a div called #shipSlide in jQuery to hold the image so our stylesheet needs to accommodate that id name:

#shipSlide{

position: absolute; margin-top: 12px; margin-left: -7px;

width: 3 7px; height: 2 0px; background: url(images/spaceship-icon.png) no-repeat;

Again, as with many examples in this book, to keep the process concise and easy to understand, we'll be doing things as directly as possible, but not necessarily as optimized as possible. In a real-world project you may want to create a separate stylesheet for any project like this or wrap your jQuery work into a plugin or even in a WordPress plugin using the techniques we covered in Chapter 3, Digging Deeper: Understanding jQuery and WordPress Together. This all depends on how flexible and portable you'd like the jQuery enhancement to be afterwards.

Now, we'll get to work in jQuery. As usual, for every project you'll make sure that jQuery is included into the theme, and that you have a custom-jquery.js file included and set up to work in. Also, for this navigation, we'll be using the Color and Easing plugin. You can register the bundled Color plugin, but you'll need to download and include the custom Easing plugin into your theme manually. Get it from: http://gsgd.co.uk/sandbox/jquery/easing/.

In our particular default theme, we'll start off with some jQuery to make it a little clearer what our nav will do.

Our first bit of jQuery looks like this:

//this adds our #shipSlide div

//under the twenty ten theme's menu header div jQuery('.menu-header').prepend(,<div id="shipSlide"> </div>');

//this fades the ship div to 40%

Before I fade the #shipSlide div with jQuery's .fadeTo() function, I did load it up into the browser to check and make sure the background image was loading in from the CSS. The following screenshot shows the ship image loaded in and faded by our budding jQuery script:

Home Everts About Contact

OK, next up, let's set up a basic animation that pushes the navigation li.page_item objects in from the left, 35 pixels, relative to where they are. We'll also then target the tags and change their background color. We'll use the .hover function to make sure this happens on rollover and rollout of the li.page_item objects:

//animates each menu item to the right (from the left) jQuery(this).animate({paddingLeft: '+=25px'}, 400, 'swing');

//this over rides the style sheet's background on hover jQuery(this).find('a').css('background','none');

//ship move code will go here

//returns the menu item to it's location jQuery(this).animate({paddingLeft: '-=25px'}, 400, 'swing'); });//end hover

Finally, inside the first hover function, just below the a object's color animation, we'll add in the following code snippet, which will move the #shipSlide object to the position of the li.item_page (note the bold code only):

//this custom moves the ship image var p = jQuery(this);

var position = p.position();

jQuery("#shipSlide").fadeTo('slow', 1)

.animate({marginLeft: position.left-175},

{duration: 600, easing: 'easeOutBack', queue: false});

Here, we've set up a variable we named position and also used a function called .position() to be able to pull an array of information from the li.page_item objects.

The #shipSlide object's animate function moves the marginLeft of the ship left to the position.left of the page_item, minus 175 pixels.

You'll also notice in the previous code snippet's animate function that we set the queue to false and that we're using the easeOutBack easing method that's only available to us because we included the Easing plugin.

The very last bit of code we need, below the li.page_item .hover() code is another jQuery selection and .hover() function, which will fade the #shipSlide object in and out on hover of the #mainNav object. Again, just place this jQuery below all the other navigation code:

//this fades and moves the ship back to it's starting point jQuery('.menu-header').hover(function(){ jQuery("#shipSlide").fadeIn(1000); }, function(){

jQuery("#shipSlide").fadeTo('slow', .4) .animate({marginLeft: '-5px'},

{duration: 600, easing: 'easeOutBack', queue: false});

The final result looks great, the ship and menu item animation is smooth, and the client is very happy with their new snazzy navigation.

Home Everts

Authority Blog Success

Authority Blog Success

Blogs With an Authoritative Voice Attract a Loyal Audience. There are Lots of Rambling Blogs on the Web Today, but Blogging as an Authority on a Particular Subject is the Best Strategy for Generating a Perpetual Income. Blogging as an Expert on Your Subject is the Key to Blogging Success.

Get My Free Ebook


Post a comment