RSS

Navigation Menu using CSS and JQuery – Step 1

26 Jul

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

 

 

 

 

Advertisements
 
 

One response to “Navigation Menu using CSS and JQuery – Step 1

  1. Russell

    May 29, 2013 at 3:52 am

    Pretty nice post. I just stumbled upon your weblog and wished to say that I’ve really enjoyed browsing your weblog posts. In any case I’ll
    be subscribing for your feed and I am hoping you write once more soon!

     

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: