RSS

Navigation Menu using CSS and JQuery – Step 2

26 Jul

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

 

Advertisements
 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: