...

View Full Version : css rollover menu



KevinG
12-05-2002, 01:24 AM
i was wondering how i could make a rollover menu like the one at www.cnn.com - only is it possible to make the table first and then apply the style? as my pages sub menus have different numbers of rows so i can't preformat a table and rows.

i would be incredibly grateful if someone could give me an idiots example (and i mean idiots). finally i need to be able to house the style in a global style sheet and then call it up and apply it to my submenu table.

KevinG
12-06-2002, 12:42 AM
looks like i'm going to have to go the image route

webmarkart
12-06-2002, 02:35 AM
which rollovers on cnn are you referring to?

KevinG
12-06-2002, 09:41 AM
the blue one on the right. i made a small version using images and its nowhere near as good as cnn's.

tommysphone
12-06-2002, 05:02 PM
Hi. I saw the post, looked at the site but can only see a left menu.

Might this be of use?In the head tag place this -

<script language="JavaScript">
var isIE4 = false;
function CheckBrowser()
{ if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.charAt(0) >= 4) { isIE4 = true; }}
function mOvr(src,clrOver)
{ if (!src.contains(event.fromElement)) { src.style.cursor = 'hand'; src.bgColor = clrOver; src.children.tags('A')[0].style.color = '#ffffff';}}
function mOut(src,clrIn)
{ if (!src.contains(event.toElement)) { src.style.cursor = 'default'; src.bgColor = clrIn; src.children.tags('A')[0].style.color = '#ffffff';}}
function mClk(src)
{ if(event.srcElement.tagName=='TD'){src.children.tags('A')[0].click();} }
function mOvrTop(src,clrOver)
{ if (!src.contains(event.fromElement)) { src.style.cursor = 'hand'; src.bgColor = clrOver;}}
function mOutTop(src,clrIn)
{ if (!src.contains(event.toElement)) { src.style.cursor = 'default'; src.bgColor = clrIn;}}
</script>

Followed by this in your body

<table cellspacing="3" cellpadding="0" border="0" width="420" align="center">
<tr>
<td align="center" width="105" onmouseover="mOvr(this,'#9999cc');"
onmouseout="mOut(this,'#666699');" onclick="mClk(this);" bgcolor="#666699"><a
style="color: #FFFFFF" href="tablecellmouseover.htm"><font face="Verdana" size="-2">link</font></a>
</td>
<td align="center" width="105" onmouseover="mOvr(this,'#9999cc');"
onmouseout="mOut(this,'#666699');" onclick="mClk(this);" bgcolor="#666699"><a
style="color: #FFFFFF" href="tablecellmouseover.htm"><font face="Verdana" size="-2">link</font></a>
</td>
<td align="center" width="105" onmouseover="mOvr(this,'#9999cc');"
onmouseout="mOut(this,'#666699');" onclick="mClk(this);" bgcolor="#666699"><a
style="color: #FFFFFF" href="tablecellmouseover.htm"><font face="Verdana" size="-2">link</font></a>
</td>
<td align="center" width="105" onmouseover="mOvr(this,'#9999cc');"
onmouseout="mOut(this,'#666699');" onclick="mClk(this);" bgcolor="#666699"><a
style="color: #FFFFFF" href="tablecellmouseover.htm"><font face="Verdana" size="-2">link</font></a>
</td>
</tr>
</table>or

<html>

<head>
<title>A Menu</title>
<style type="text/css">
A:link { color: #000000 }
A:active { color: #000000 }
A:visited { color: #000000 }
A:hover { color: #000000 }
td { font-family: Verdana; font-size: 10pt}

.rightcell { font-family: Verdana; font-size: 10pt ; padding-left: 5px}
</style>
<script language="JavaScript">
var PrevCellName='';
function changeCell(CellName){
if (PrevCellName != ''){
eval ('document.all.' + PrevCellName + '.bgColor = "#FFFFFF"');
}
PrevCellName = CellName;
eval ('document.all.' + CellName + '.bgColor = "#E8112D"');

}
function resetCell(){
if (eval('document.all.' + PrevCellName + '.bgColor = "#E8112D"')){
eval('document.all.' + PrevCellName + '.bgColor = "#FFFFFF"');
}
}
</script>
</head>

<body>

<table width="312" border="1" bgcolor="#ffffff" cellspacing="0" bordercolor="#000000"
align="left">
<tr>
<td width="5" id="One">&nbsp;</td>
<td width="297" class="rightcell"><a onMouseOver="changeCell('One');"
onMouseOut="resetCell();" href="#">link</a></td>
</tr>
<tr>
<td width="5" id="Two">&nbsp;</td>
<td width="297" class="rightcell"><a onMouseOver="changeCell('Two');"
onMouseOut="resetCell();" href="#">link</a></td>
</tr>
<tr>
<td width="5" id="Three">&nbsp;</td>
<td width="297" class="rightcell"><a onMouseOver="changeCell('Three');"
onMouseOut="resetCell();" href="#">link</a></td>
</tr>
<tr>
<td width="5" id="Four">&nbsp;</td>
<td width="297" class="rightcell"><a onMouseOver="changeCell('Four');"
onMouseOut="resetCell();" href="#">link</a></td>
</tr>
<tr>
<td width="5" id="Five">&nbsp;</td>
<td width="297" class="rightcell"><a onMouseOver="changeCell('Five');"
onMouseOut="resetCell();" href="#">link</a></td>
</tr>
<tr>
<td width="5" id="Six">&nbsp;</td>
<td width="297" class="rightcell"><a onMouseOver="changeCell('Six');"
onMouseOut="resetCell();" href="#">link</a></td>
</tr>
<tr>
<td width="5" id="Seven">&nbsp;</td>
<td width="297" class="rightcell"><a onMouseOver="changeCell('Seven');"
onMouseOut="resetCell();" href="#">link</a></td>
</tr>
<tr>
<td width="5" id="Eight">&nbsp;</td>
<td width="297" class="rightcell"><a onMouseOver="changeCell('Eight');"
onMouseOut="resetCell();" href="#">link</a></td>
</tr>
<tr>
<td width="5" id="Nine">&nbsp;</td>
<td width="297" class="rightcell"><a onMouseOver="changeCell('Nine');"
onMouseOut="resetCell();" href="#">link</a></td>
</tr>
<tr>
<td width="5" id="Ten">&nbsp;</td>
<td width="297" class="rightcell"><a onMouseOver="changeCell('Ten');"
onMouseOut="resetCell();" href="#">link</a></td>
</tr>
</table>
</body>
</html>

KevinG
12-06-2002, 06:33 PM
i've just made css menu and it looks fine on my pc but a friend said it shows itself in green and blue in big text. can anyone tell me what i have done wrong?

KevinG
12-06-2002, 06:44 PM
here's a link to my new sub nav css rollover menu - http://www.designermortgages.com/customerservice.htm


and here is that css menu as found in my style sheet:

.menu {
font : normal 9px Verdana, Arial, Helvetica, sans-serif;
line-height : 16px;
}

.menu a,.menu a:link,.menu a:active,.menu a:visited {
display : block;
background : #990000;
color : #FFFFFF;
text-decoration : none;
line-height : 16px;
}

.menu a:hover {
background : #000000;
color : #FFFFFF;
cursor : pointer;
text-decoration : none;
}.whitetext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-style: normal; font-weight: normal; color: #FFFFFF; text-decoration: none}

KevinG
12-06-2002, 06:50 PM
just in case - heres my entire style sheet:

<style type="text/css">


.buttons { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; font-style: normal; color: #000000; background-color: #CCCCCC; background-repeat: no-repeat}

.headings { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-style: normal; color: #FFFFFF; text-decoration: none; font-weight: bold}

.formtext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-weight: bold; color: #FFFFFF; text-decoration: none}

.formboxes { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; font-style: normal; color: #000000; background-color: #FFFFFF; background-repeat: no-repeat}

.boxes { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: normal; color: #000000; text-decoration: none; background-color: #FFFFFF; background-repeat: no-repeat}

.buttons { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: normal; color: #000000; text-decoration: none}

.dropdownmenus { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: normal; color: #000000; text-decoration: none; background-color: #CCCCCC; background-repeat: no-repeat; white-space: normal; height: 1mm; padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px; vertical-align: top; top: 1px; clip: rect(1px 1px ); line-height: normal; background-position: 0px 0px; border-style: none; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px}

.hometext { font-family: Arial, Helvetica, sans-serif; font-size: 8pt; font-style: normal; color: #FFFFFF; font-weight: normal; text-decoration: blink}

.redlarge { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; font-weight: bold; color: #CC0000}

.smallsilver { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: normal; color: #666666}

.boldtext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-style: normal; font-weight: bold; color: #000000; text-decoration: none}

.smallblack { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: normal; color: #000000}


a.white:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: bold; color: #FFFFFF; text-decoration: none}
a.white:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: bold; color: #FFFFFF; text-decoration: none}
a.white:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: bold; color: #FFFFFF; text-decoration: underline}
a.white:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: bold; color: #FFFFFF; text-decoration: none}

a.red:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: bold; color: #990000; text-decoration: none}
a.red:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: bold; color: #990000; text-decoration: none}
a.red:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: bold; color: #999999; text-decoration: none}
a.red:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: bold; color: #990000; text-decoration: none}

.redbold { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-style: normal; font-weight: bolder; color: #990000; text-decoration: none}

.blackbold { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-style: normal; font-weight: bold; color: #000000; text-decoration: none}


a.black:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-style: normal; font-weight: bold; color: #000000; text-decoration: none}
a.black:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-style: normal; font-weight: bold; color: #000000; text-decoration: none}
a.black:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-style: normal; font-weight: bold; color: #000000; text-decoration: underline}
a.black:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-style: normal; font-weight: bold; color: #000000; text-decoration: none}

a.largered:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; font-weight: bold; color: #990000; text-decoration: none}
a.largered:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; font-weight: bold; color: #990000; text-decoration: none}
a.largered:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; font-weight: bold; color: #990000; text-decoration: underline}
a.largered:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; font-weight: bold; color: #990000; text-decoration: none}


.menu {
font : normal 9px Verdana, Arial, Helvetica, sans-serif;
line-height : 16px;
}

.menu a,.menu a:link,.menu a:active,.menu a:visited {
display : block;
background : #990000;
color : #FFFFFF;
text-decoration : none;
line-height : 16px;
}

.menu a:hover {
background : #000000;
color : #FFFFFF;
cursor : pointer;
text-decoration : none;
}.whitetext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-style: normal; font-weight: normal; color: #FFFFFF; text-decoration: none}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum