Creating A Css Rollover Menu (with Table Cells)

Mahzian

Apr 18 2005, 06:16 AM

Ive found this code very usefull when it comes to clients who cant afford Flash (and I hate JavaScript rollovers as they only work half the time and when you hold the mouse over the button for 5 seconds) When your done here you should be able to create a menu that looks like the following:

click here to see what it looks like

Step 1: setting up the framework

Get the framework in there for the script to work , I generally link to my stylesheets externally so I will show you how. Now open a simple text editor such as Notepad.

set up your page with the following basic html

CODE

Now save the file somewhere as a html file , for example test.html

Step 2: linking the stylesheet

Now the following string must be put in between the <head> and </head> tags

CODE

Now remember the section after the href , because this name (rollovers.css) is what your external stylesheet will be named. (You can call it whatever you want but remember to save the file later to that name.)

Step 3: creating the stylesheet

Now you have the html file pointing to a stylesheet but it doesnt exist , we need to create it. This is simply done by (for example in notepad) going to File>New and then saving the file as rollovers.css (remember if you changed this name in step 2 change it here also)

Save this file in the same directory as the html file

Step 4: creating the table

Now we need to create a table in that html file we had before , so if your still on the css file , close it and open test.html or whatever you named it.

Between the <body> and </body> tags type the following:

CODE

What you have done is created a table with 1 cell which is 20% the width of the page and has a css id of LHS

Step 5: creating the links

Now this will vary on how many links you need/want but in this example we need 5 links. This is simply done by inserting links into the td cell of the table. For example:

CODE

<table width="20%" cellpadding="0" cellspacing="0" border="0" summary="">
<tr>
<td width="100%" id="LHS">
<a href="hello.html">hello</a>
<a href="this_is.html">this is</a>
<a href="a_rollover.html">a rollover</a>
<a href="menu_made.html">menu , made</a>
<a href="with_css.html">with css</a>
</td>
</tr>
</table>

Each link is part of the same ID so each will look the same.

Step 6: creating the css

This can be abit confusing if you are not used to dealing with css but I will try and go through it as simple as I can.

Its time to close the html file and open the css file again. This should be blank with no text yet on it whatsoever.

Now in my example I applied a style to the <body> tag of my html file which makes the background black , I did this with the following code:

CODE

body {
background-color: #000000;
}

Its up to you if you want to put this in and what color you want.

Now we have to create normal CSS links (like text links). This is done with the following code:

CODE

a:link, a:active {
[tab][/tab]/*color: #92A92D;*/
[tab][/tab]/*color: #002A6C;*/
[tab][/tab]font-family: Verdana, Arial, Helvetica, sans-serif;
[tab][/tab]font-size: 11px;
[tab][/tab]color: #C41427;
[tab][/tab]text-decoration: none;
}

a:visited {
[tab][/tab]/*color: #92A92D;*/
[tab][/tab]/*color: #002A6C;*/
[tab][/tab]font-family: Verdana, Arial, Helvetica, sans-serif;
[tab][/tab]font-size: 11px;
[tab][/tab]color: #C41427;
[tab][/tab]text-decoration: none;
}

a:hover {
[tab][/tab]/*color: #CD689D;*/
[tab][/tab]color: #C41427;
[tab][/tab]/*font-weight: bold;*/
[tab][/tab]text-decoration: underline;
[tab][/tab]font-family: Verdana, Arial, Helvetica, sans-serif;
[tab][/tab]font-size: 11px;
}

Now the options in that code should be pretty obvious , you can change the fonts/colors etc to what you want. These styles are for the text that will be inside the boxes. Please Note: remember to keep the visited tag above the hover tag or the hover tag wont work

Step 7: creating the ID links

Keep that CSS file open because we arnt done with it yet. Now what we need to do is create some ID's so we can asign different colors etc to the links. This is what the ID was for in the table we created before. Put the following code into your CSS file:

CODE

#LHS a {
[tab][/tab]margin-left: 12px;
[tab][/tab]margin-bottom: 2px;
[tab][/tab]border: solid 2px #C41427;
[tab][/tab]background-color: #FFFFFF;
[tab][/tab]color: #000000;
[tab][/tab]font-variant: small-caps;
[tab][/tab]font-weight: normal;
[tab][/tab]width: 170px;
[tab][/tab]padding: 5px;
[tab][/tab]padding-top: 3px;
[tab][/tab]padding-bottom: 3px;
[tab][/tab]display: block;
}

#LHS a:hover {
[tab][/tab]background-color: #C41427;
[tab][/tab]color: #FFFFFF;
[tab][/tab]text-decoration: none;
}

The # denotes that this style is an ID (which can be applied to our table). Using this method you can get more than one set of link styles onto a page , this is handy because sometimes your menu is a different color to your body etc.

Now you can play around with all the options there , if you change padding and the width you can make it smaller/bigger as needed. Hover tag will retain whatever options are missing from the a tag and only change the options which are there (like background-color for example)

Save the css file , and open the html file in your browser , and voila , you have a very bandwidth friendly menu. Try changing the colors around and some of the size options and switch between refreshing the browser and the text css file , but remember the changes wont take effect till the css file is saved!

Let me know if you have any problems/issues!

Comment/Reply (w/o sign-up)

roger4

Apr 18 2005, 10:40 AM

Good turtorials thank you ~.I think it's will be good for the newbie webdisigner.~

Comment/Reply (w/o sign-up)

m3ch4

May 2 2005, 01:18 AM

Newb question here, please don't kill me =S

when you refer to css links you mention this within the code section...

*
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
*

just curious, but what exactely does font-family refer to? what other options are available and what is the font is used in the final display?

also, for font-size, how does that relate to the font sizes that are regularly used in html code? is the pixel reference simply something that is left out in the html or does this font-size use a different scale/size then regular html code?

Comment/Reply (w/o sign-up)

chiiyo

May 2 2005, 03:50 AM

Okay, by font-family, that is basically listing down the font of your text, whatever text that is being listed. As for options, you can put in any font you like, only that you must know if you put a font that is not common, many people will be seeing your site in a font you didn't design for. Previously, in html, you could only specify one font, so if the end-user didn't have that font, he would be stuck seeing your website in his computer's default font, which more often than not is Times New Roman (yuck). So CSS counteracts that, creates a situation where your website degrades gracefully, by allowing you to list other fonts. In this case, you're telling the end-user's computer to display the text first and foremost in Verdana, but if the computer doesn't have Verdana, to display the text in Arial, and if the computer doesn't have Arial, to display it in Helvetica (which is, by the way, a gorgeous font), and if the computer doesn't have any of those three, in any sans-serif font. This way you cover all bases. So yes, the first font is the top-priority font.

About font-size, the ones used in html code are different from the one you define in font-size. The numbers in html point to a particular size, set in html, and I'm actually not too sure what that size is, but there are usually only 6 numbers? 1 to 6? (haven't used the font tag for so long...) What happens in CSS is that you can fine-tune that size of your font. Instead of relying on arbitrary values, you can define the font in pixels (px), ems, points(pt) and other measurements.

BTW, the font tag is deprecated as of XHTML 1.0 Strict, so you should use CSS to do your font-styling. Read more about it at HTMLDog.

Hope this helps!

Comment/Reply (w/o sign-up)

m3ch4

May 2 2005, 04:19 AM

*glances at clock and decides to turn in for the night*

*bookmarks www.htmldog.com (hi5 Chiiyo, thanks!)*

one more quick question, from the looks of the css code I'm curious as to how complex it gets and what kind of stuff it can do.

for example, I want to create a table...

________________
| cell1 | cell2 | cell3 |
-----------------------
| cell 4 ...................|
-----------------------

...like so, where cell 1,2,3 will be selectable (say, clicked/unclicked) and the selections there will change the output in cell 4.

can something like that be programmed in css?

I'm curious because css looks super light weight, and if it's possible to do something like that through css as opposed to javascript I'd be really interested. Witht this amount, or more, of complexity like this will css remain lightweight and be preferable to javascript?

...or if looking for an alternate to javascript seems ridiculus and css isn't as lightweight as it appears from this tuturial please feel free to poke me a sharp stick.

Comment/Reply (w/o sign-up)

chiiyo

May 2 2005, 12:15 PM

Hmm. You can use CSS for the basic layout of that table (because technically using tables to layout non-tabular data violates the whole separation of content and presentation idea).

One way to do the whole click 1 or 2 or 3 and 4 will change, the easy but less advanced way, would be to make three html pages, where clicking 1 would lead to page 1, where your 1 would be "selected" and your 4 will reflect the content required, and then creating similar pages for 2 and 3.

Another way to do it, would probably involve either javascript or PHP. The javascript method I'm not too sure, not a big fan of javascript, but basically you have to program the links in 1,2, and 3 to be able to affect the behaviour in 4. (Not too sure what I'm saying.... anyone want to clarify this?)

And the third method, by using PHP includes, whereby you program the links in 1, 2 and 3 to trigger another page to be included using PHP into 4. That way you have one page. Kinda works like a frame.

Ah, and of course, you could use frames. But wouldn't recommend it.

I would probably recommend a combination of the CSS and PHP method, it's probably the most lightweight method around...

Don't mention it! Glad to help!

Comment/Reply (w/o sign-up)

m3ch4

May 3 2005, 04:24 AM

QUOTE (chiiyo @ May 2 2005, 08:15 AM)

Ah, and of course, you could use frames. But wouldn't recommend it.

I would probably recommend a combination of the CSS and PHP method, it's probably the most lightweight method around...

Don't mention it! Glad to help!

Yeah, frames I'm gonna leave alone right now...might end up going back to it, but I hope not =S

The reason I'm curious about css is that I plan to have a table like that on my site, and a friend of mine was going to program in in javascript for me. He's picking up as many programming languages as he can and said he'd be interested in any type of projects that I could give like this so he could have some non-generic stuff to program to help keep his interested. The thing is he does't know for sure whether he's going to pick up js, that being my concern and my source of questions =/

thanks again for your advice! much appreciated =)

Comment/Reply (w/o sign-up)

finaldesign

May 3 2005, 08:11 AM

Very nice tutorial man! I'll give ya some reputation, I made some similar menu on My Webpage but anyway this is a good start point for anyone who want's to make a page with fast loading menus...

Comment/Reply (w/o sign-up)

johnny

Jun 12 2005, 09:29 PM

QUOTE (finaldesign @ May 3 2005, 08:11 AM)

Very nice tutorial man! I'll give ya some reputation, I made some similar menu on My Webpage but anyway this is a good start point for anyone who want's to make a page with fast loading menus...

I like your menu its pretty good it's just a little different from the one he was showing us up there in the tutorial. I mean, if it was me i thnk i would do it in flash but doing it in scripting would be good too

Comment/Reply (w/o sign-up)

vujsa

Jun 13 2005, 05:31 AM

Nice tutorial.

I wanted to mention that you can use images for the menu item backgrounds as well.

Create an image that is twice the height of the menu item.
Design the top half of the image as the default background of the menu item.
Design the bottom half of the image to be the background of the menu item during rollover.
Now for you CSS link attribute, set the background image to the new image.
In the CSS for the hover (rollover) set it to the new image but specify the position to show only the bottom half of the image.

This is the technique used for the menus on the default Mambo template (SolarFlareII).

Hope this helps.

vujsa

Comment/Reply (w/o sign-up)

Creating A Css Rollover Menu (with Table Cells) - for those bandwidthed challenged

Creating A Css Rollover Menu (with Table Cells) - for those bandwidthed challenged