RSS

Monthly Archives: July 2012

Navigation Menu using CSS and JQuery

It’s a smart, professional navigation menu for the top of your web site.  The menu itself is styled using CSS and I use JQuery to add a nice fade in fade out effect to the menu items.  It’s also very quick and easy to implement.

I have broken up the tutorial into the following lessons:

Step 1 – Positioning the Navigation Menu

Step 2 – Creating and Positioning the Top Level Menu Items

Step 3 – Adding the Drop Down Menus

Step 4 – Animating the Drop Down Menus using JQuery

Advertisements
 

Navigation Menu using CSS and JQuery – Step 1

Step 1 – Positioning the Navigation Menu

Ok so let’s assume we are starting from scratch and have a blank web page:

Blank Web Page Template

I am now going to extend my main.html page with 2 new Divs. These are ‘content’ and ‘top_menu_bar’

Content DIVs

 

I am also going to add the following styles to our style.css file for these 2 Divs:

Content DIVs styles

The border properties are not required but merely demonstrate where our Divs are sitting on the web page.  The Content Div will hold the page content, while the top_menu_bar Div is going to be the placeholder for our menu.  If you browse to main.html you will see something like this:

Using Borders to show the Positioning of the Content DIVs

Try resizing the browser menu.  Notice that the menu will remain positioned in the middle of the window as we are using auto margins.

The final stage of this step is to remove our temporary borders and apply a gradient background to our ‘top_menu_bar’ Div.  Go online and type gradient generator into Google.  There are lots out there but essentially you want to create a gradient that is 1 pixel wide and 60 pixels in height e.g.

Sample Gradient Image

Save the Gradient image to your site folder and revise the Style sheet as below:

Revised Content Style

Your page will now look like this:

Navigation Bar

 

 

 

 

 
 

Navigation Menu using CSS and JQuery – Step 2

Step 2 – Creating and Positioning the Top Level Menu Items

To our page, lets start by adding another DIV which will contain our navigation bar items and a List of menu Items:

Parent Menu Items

If you browse to the page now, before we have added any styles, you will see the following (not very stylish):

Un-Styled Menu Items

Therefore, lets modify the style sheet and add the following styles in order to position and style our top level menu items:

Top Level Menu Item Styles

There are a few styles worth noting here:

Firstly the * Style, shown towards the top, ensures that we reset any default positioning applied by the browser template.  If you have done much web development you will have noticed that pages display slighltly differently based on the browser you are using.  By adding this style I am ensuring the body content will always be posiiton flush with the top of the page.

I have also applied a z-index property to the navigationBar DIV to ensure that the menu and its drop down menus will display on top of any other page element.

I have added some text shadow to the menu items.  This is a newer CSS property and so will not be available in all browsers and will simply not be applied if the browser does not support Text Shadow.

I like to apply new effects and styles where possible but the golden rule is not too implement a style which will cause the element to look out of place if the style is not supported by the browser and so cannot be applied.

Ok great, so now if you browse to the page we should see our navigation bar taking shape:

Top Level Menu Items

 

 

Navigation Menu using CSS and JQuery – Step 3

Step 3 – Adding the Drop Down Menus

Lets begin by extending the unordered list <ul> tags within our page to include some child lists.  These will make up the items in the drop down menu;

Child Lists for the Drop Down menus

Notice that I have encapsulated the child lists wihin another DIV with an associated class of navigationBar_sub. This will make it easier to style the dropdown lists seperately from its parent.

So lets add the following styles for the drop down menus to our style sheet

Styles for the Drop Down Menus

Using the same approach as in Step 1, I created an image which was 1 pixel wide, black and semi-transparent.  This is set as the background image (see above) for any <ul> tags found within a DIV associated to the class navigationBar_sub.

Also notice that I have set the display property to Block.  This is only temporary as we only want to display the menu when the user hovers over the menu item and by setting the property to block the child menu will always be displayed.  This is handy though as we can check the styles are correct and you should end up with something like:

Navigation Bar showing child menus

 

Navigation Menu using CSS and JQuery – Step 4

Step 4 – Animating the Drop Down Menus using JQuery

Following on from styling out drop down menus in Step 3, the first thing we need to do is hide the child menus.  We had set them to always display so that it was possible to check the styles had been applied correctly.  However, by default it makes more sense to hide these drop down menus so that we can make use of JQuery to display the menus when the user hovers over a parent menu item.

Therefore, modify the .navigationBar_sub ul style as shown here:

Set the display property to ‘none’ to hide the element

Now all that is left to do is add the JQuery script to fade in and out the drop down menus when the users hovers over the corresponding parent menu item.

Add a script reference to pull in the JQuery library from Google API into the <head> of your page.  Alterantively you can download the library locally and reference it but for simplicity I’ll use the Google API.

JQuery library reference

Finally, after the <html> section, add a <script> section to contain the following JQuery code:

JQuery Script for fade in/out animation

All we are saying here is that if the users hovers the mouse over a Div associated to class nav_main_item, look for the first <ul> tag within that Div and fade in and out its contents.  The stop function just ensures that all previous animations are cancelled reducing any flicker.

And that’s it, the final menu is complete.

Like I mentioned at the start of this blog, If you want me to send you the source for this menu then you can contact me using the form on the ‘About’ section of my blog.  I should be able to respond quickly.