CSS Menu

defy · #1 (**permalink**) Oct 24th, 2007, 23:49

Ok so I have a problem. I am looking for a horizontal menu with a fixed height of about 60px, where the text is at the bottom of the division and the rollover background takes up the whole height of the div. An example of the type of menu I am looking for is the one at Griffin Web Design. If anyone could help me I would greatly appreciate it!

Stuart · #2 (**permalink**) Oct 25th, 2007, 01:36

Alright. I took a look at the stylesheet. Here is what I found:

Code: Select all

/*------------------------------------------------------------------------------- Navigation----- */

a {
    color: #660000;
}

a:hover {
    text-decoration: none;
}

#nav_strip {
    height: 100px;
    width: 800px;
    margin-right: auto;
    margin-left: auto;
}

#global_nav {
    height: 100px;
    width: 500px;
    margin-right: auto;
    margin-left: auto;
    float: left;
}

#logo_box {
    height: 78px;
    width: 63px;
    margin-right: auto;
    margin-left: auto;
}

.hide {
    display: none;
}

.logo a {
    background-image:url(../i/topLogo.gif);
    width:150px;
    height:100px;
    float:left;
    background-repeat:no-repeat;
}

.home a {
    background-image: url(../i/home.gif);
    background-repeat: no-repeat;
    float: left;
    height: 100px;
    width: 100px;
}

.services a {
    background-image: url(../i/services.gif);
    background-repeat: no-repeat;
    float: left;
    height: 100px;
    width: 100px;
}

.portfolio a {
    background-image: url(../i/folio.gif);
    background-repeat: no-repeat;
    float: left;
    height: 100px;
    width: 100px;
}

.about a {
    background-image: url(../i/about.gif);
    background-repeat: no-repeat;
    float: left;
    height: 100px;
    width: 100px;
}

.contact a {
    background-image: url(../i/contact.gif);
    background-repeat: no-repeat;
    float: left;
    height: 100px;
    width: 100px;
}

.fbanner a {
    background-image: url(../i/footerbanner.gif);
    background-repeat: no-repeat;
    float: left;
    height: 150px;
    width: 400px;
}

.logo a:hover {
    background-position:right;
}

.home a:hover {
    background-position: right;
}

.services a:hover {
    background-position: right;
}

.portfolio a:hover {
    background-position: right;
}

.contact a:hover {
    background-position: right;
}

.about a:hover {
    background-position: right;
}


.banner_info a:hover {
    background-position: right;
}

.fbanner a:hover {
    background-position: right;
}

.home_active a {
    background-image: url(../i/homeActive.gif);
    background-repeat: no-repeat;
    float: left;
    height: 100px;
    width: 100px;
}

.services_active a {
    background-image: url(../i/servicesActive.gif);
    background-repeat: no-repeat;
    float: left;
    height: 100px;
    width: 100px;
}


.contact_active a {
    background-image: url(../i/contactActive.gif);
    background-repeat: no-repeat;
    float: left;
    height: 100px;
    width: 100px;
}

.about_active a {
    background-image: url(../i/aboutActive.gif);
    background-repeat: no-repeat;
    float: left;
    height: 100px;
    width: 100px;
}

.portfolio_active a {
    background-image: url(../i/portfolioActive.gif);
    background-repeat: no-repeat;
    float: left;
    height: 100px;
    width: 100px;
}
#about_left {
    float: left;
    width: 25%;
}
#about_right {
    float: right;
    width: 73%;
}

This might seem intensely difficult, but it really is not so scary. The idea is that the text that is at the bottom of the div, is actually at the bottom of a background image. This means, it is not physical text on the page. When the mouse is hovered over a navigation div, the background image simply changes position. Take a look at one of those images:

The first half is the original :: it is positioned left so that only that half is being displayed. The second half is the :hover class :: this appears when the mouse rolls over the div, changing the background position to right. In other words, the background image is moved around according to the position of the mouse. Am I making sense? Try looking through the CSS a bit, and see if you can figure it out. However, I would be glad to assist you further

.

Cheers,
SWagner

defy · #3 (**permalink**) Oct 25th, 2007, 02:00

So do you think I could do this an easier way with lists or is that the best way?

I think I understand what you are saying but as far as photoshop or fireworks go, I can make images but I do not know how to slice them or make them into buttons.

Monie · #4 (**permalink**) Oct 25th, 2007, 03:27

I have another easy example on this hover button, all you have to do is set a div width to the size of the button that you want to create. In this example, the width of the button is 157px.

as you see, the "menu a", is set to "0" "0" so that it will display the left most image, in this example, it's the yellow color button.

when you hover the link, it will shift the image so that it will display the center image, and so on..

Here is the CSS:

Code: Select all

#menu a {
   background: url("button.gif") 0 0 no-repeat;
   ...
   }
#menu a:hover {
   background-position: -157px 0;
   ...
   }
#menu a:active {
   background-position: -314px 0;
   ...
   }

Here is the working example, hope that helps.

Stuart · #5 (**permalink**) Oct 25th, 2007, 11:36

Quote:

Originally Posted by defy

I can make images but I do not know how to slice them or make them into buttons.

This is not necessary. Monie explained it pretty well (I guess I wasn't being clear enough

). All you have to do is create an image that contains the normal state, the hover state, and (optional) the active state. You do not have to make actual buttons, it's just a background image changing position.

karinne · #6 (**permalink**) Oct 25th, 2007, 12:27

Another point is that you don't NEED images. If all you want is to change the background color, then just use CSS.

If you have a look at my portfolio, my menu doesn't use images at all. All css

shawzy85 · #7 (**permalink**) Oct 25th, 2007, 12:51

Hi defy,

If you have any trouble setting up your navigation just give us a holla and I'll help you along the way. I think this is the best way to go with navigation when you change position rather than use a different image on hover because you get to lag/wait for the new image to appear.

Regards Andy

www.griffinwebdesign.co.uk

xkatx21x · #8 (**permalink**) Oct 26th, 2007, 08:37

You might find this site helpful it has lots of examples of different menu styles

http://css.maxdesign.com.au/listamatic/

I find it very useful

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
css menu	csun	PHP Forum	4	Aug 1st, 2007 20:37
I have a normal css menu, but want ot add drop down menu to it	multichild	Web Page Design	7	Jan 9th, 2007 16:07
Add Sub Menu	DannyP43	JavaScript Forum	10	Sep 3rd, 2006 19:47
CSS menu	cbrams9	Web Page Design	1	Aug 3rd, 2006 15:46
Help with pop-up menu please!!!??	aseriouslyfunkydiva	Graphics and 3D	1	Nov 16th, 2005 15:11

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS Menu