Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts

    css rollover menu

    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.

  • #2
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    looks like i'm going to have to go the image route

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Location
    Raleigh, NC
    Posts
    484
    Thanks
    0
    Thanked 0 Times in 0 Posts
    which rollovers on cnn are you referring to?
    -WebMark Art
    Programming is 80% thinking and 20% spelling

  • #4
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    the blue one on the right. i made a small version using images and its nowhere near as good as cnn's.

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Posts
    262
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Right menu or left menu?

    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>
    Last edited by tommysphone; 12-06-2002 at 04:06 PM.
    Therapy is expensive, popping bubble wrap is cheap, you choose.

  • #6
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?

  • #7
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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}

  • #8
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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}


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •