CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)
-   -   Disjointed, clickable text rollover (http://www.codingforums.com/showthread.php?t=272653)

rapha 09-09-2012 06:06 PM
Disjointed, clickable text rollover
 
I have text-based navigation. Rolling over "contact" displays the address (layer) over all the other menu buttons. I would like the email address and the phone number to be rollovers (changing color from grey to red) and as well clickable links. Problem: roll-out makes the address disappear, which is intended but it's impossible to click address/phone links. Would it work if the roll-out effect (disappearing) would be delayed? Is there a CSS only solution?

Here's the page: http://http://raphaelzwyer.com/testRapha/rollover_test.html

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>raphaelzwyer</title>
    <style type="text/css">
      * {
                margin: 0;
                padding: 0;
                border: none;}
    @font-face {
                font-family: 'BotonReg';
                src: url('fonts/BotonReg.eot');
                src: url('fonts/BotonReg.eot?#iefix') format('embedded-opentype'),
                url('fonts/BotonReg.woff') format('woff'),
                url('fonts/BotonReg.ttf') format('truetype'),
                url('fonts/BotonReg.svg#BotonReg') format('svg');
                font-weight: normal;
                font-style: normal;
                font-variant: normal;}
    @font-face {
                font-family: 'BotonMed';
                src: url('fonts/BotonMed.eot');
                src: url('fonts/BotonMed.eot?#iefix') format('embedded-opentype'),
                url('fonts/BotonMed.woff') format('woff'),
                url('fonts/BotonMed.ttf') format('truetype'),
                url('fonts/BotonMed.svg#BotonMed') format('svg');
                font-weight: normal;
                font-style: normal;
                font-variant: normal;}
    html, body {
                background-color: #FFFFFF;
                margin-top: auto;
                margin-right: auto;
                margin-bottom: auto;
                margin-left: auto;
                color: #a9a9a9;
                height: 100%;
                width: 100%;
                font-family: "BotonReg", "Courier", "Courier New", "Bookman Old Style", serif;
                font-size: 16px;
                overflow-y: scroll;
                letter-spacing: 0.065em;
                -webkit-font-smoothing: antialiased;
                font-smoothing: antialiased;
                font-smooth: 1em;
                text-shadow: 0 1px 1px rgba(255,255,255,.3);}
    a {
                text-decoration: none;
                color: #a9a9a9;}
    a:hover {
                text-decoration: none;
                color: #be1f2d;}
    a:focus {
                text-decoration: none;
                color: #be1f2d;}
    li {
                list-style-type: none;
                display: inline;}
    .clear {       
                clear: both;}       
    #container {
                position: relative;
                top: 0px;
                margin: 0px auto;
                width: 860px;
                min-height: 100%;
                height: auto !important;
                height: 100%;
                border: none;}
    #topmenu {
                position: relative;
                top: 0px;
                left: 212px;
                width: 660px;
                height: 48px;}
    .menubuttons {
                position: relative;
                top: 0px;
                width: 100px;
                height: 36px;
                background-image: url("images/menubg.png");
                background-repeat: repeat-x;
                padding: 10px 0px 0px 0px;
                float: left;}
    .menubuttons:hover {
                position: relative;
                top: 0px;
                width: 100px;
                height: 36px;
                background-image: url("images/menubg_h.png");
                background-repeat: repeat-x;
                padding: 10px 0px 0px 0px;
                float: left;}
    .menubuttonactive {
                position :relative;
                top: 0px;
                width: 100px;
                height: 36px;
                background-image: url("images/menubg_a.png");
                background-repeat: repeat-x;
                padding: 10px 0px 0px 0px;
                float: left;}
    .menubuttonactive a {
                color: #be1f2d;}
    #addressbox {
                position: absolute;
                top: 0px;
                width: 548px;
                left: 212px;
                height: 22px;
                background-image: url("images/menubg.png");
                background-repeat: repeat-x;
                padding: 10px 0px 0px 0px;
                letter-spacing: 0.062em;
                text-align: right;
                float: left;
                z-index: 900;}
    #addressbox:hover {
                position: relative;
                top: 0px;
                width: 548px;;
                height: 22px;
                background-image: url("images/menubg_h.png");
                background-repeat: repeat-x;
                float: left;
                z-index: 900;
                color: #be1f2d;}
    #addressboxbelow {
                position: absolute;
                top: 36px;
                width: 548px;
                left: 212px;
                height: 22px;
                background-image: url("images/menubg_h.png");
                background-repeat: repeat-x;
                text-align: right;
                float: left;
                z-index: 900;}
    #contactrollover {
                position: relative;
                top: 0px;
                margin: 0px 0px -36px 0px;
                width: 100px;
                left: 0px;
                float: left;
                z-index: 900;}
    #contactrollover div {
                width: 100px;
                height: 50px;
                float: left;}
    #contactrollover a span {
                display: none;
                color: #a9a9a9;}
    #contactrollover a {
                display: block;}
    #contactrollover a:hover span {
          display: block;
          position: absolute;
          top: 0px;
          left: -560px;}
    .buttonspaces {
                height: 36px;
                list-style: none;
                float: left;}
      </style>
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>

    </head>

    <body onload="MM_preloadImages('images/menubg_b.png','images/th_att_b.png','images/th_bmw_b.png','images/th_directv_b.png','images/th_giostra_b.png')">

    <div id="container">

        <div id="topmenu">
            <ul id="menulist">
                        <li class="menubuttonactive"><a href="portfolio.html">portfolio</a></li>
            <li class="buttonspaces"><img src="images/spacer.png" width="68" height="36" alt="spacer" /></li>
                        <li class="menubuttons"><a href="about.html">about</a></li>
                        <li class="buttonspaces"><img src="images/spacer.png" width="12" height="36" alt="spacer" /></li>
                        <li class="menubuttons"><a href="downloads/raphael_zwyer_CV.pdf" target="_new">resume</a></li>
            <li class="buttonspaces"><img src="images/spacer.png" width="180" height="36" alt="spacer" /></li>
                        <li id="contactrollover"><div class="menubuttons"><a href="mailto:info@raphaelzwyer.com">contact<span id="addressbox"><p>917-650-9534, info@raphaelzwyer.com<br/ ></p>143 leonard street, apartment 5, brooklyn ny 11206</span></a></div></li>
        </ul> <!-- end of menulist -->
      </div> <!-- end of topmenu -->

    </div> <!-- end of container -->

    <script type="text/javascript" src="js/raphaelzwyer.js"></script>

    </body>
    </html>

sunfighter 09-09-2012 07:11 PM
It looks like your working on the site.
Your dorpdown code looks like this:
Code:
<li id="contactrollover">
        <div class="menubuttons">
                <a href="mailto:info@raphaelzwyer.com">contact
                        <span id="addressbox">
                                <p><span>917-650-9534</span>, info@raphaelzwyer.com<br />
                                143 leonard street, apartment 5, brooklyn ny 11206</p>
                        </span>
                </a>
        </div>
</li>
You have a hover rule for contactrollover, menubuttons, and addressbox. Can't work with that.

Son of sucker fish is down or gone so I'm sending you here to see how a css horizontal menu with a drop down is made and styled. http://www.devinrolsen.com/pure-css-horizontal-menu/

rapha 09-10-2012 09:23 PM
Thanks, sunfighter!

I added padding to the right of the popup. Works fine now. Thanks, guys! Check: raphaelzwyer.com/testRapha/portfolio.html

The only drawback: I can't figure out how to make the phone link work independently from the email link.

(hope I didn't post the reply twice, doesn't appear on my account)

Sammy12 09-10-2012 10:54 PM
You have everything wrapped with an <a> tag that links to "mailto."

Code:
<div class="menubuttons">
    <a href="mailto:info@raphaelzwyer.com" target="_new">contact
        <span id="addressbox">
            <p id="email">info@raphaelzwyer.com</p>
            <p id="phone">917-650-9534</p>
            <p id="address">143 leonard street, apartment 5, brooklyn ny 11206</p>
        </span>
    </a>
</div>
You would need to move the <a> inside to only work on "info@raphaelzwyer.com":

Code:
<div class="menubuttons">
    <span class="rollspan">contact
        <span id="addressbox">
            <p id="email"><a href="mailto:info@raphaelzwyer.com" target="_new">info@raphaelzwyer.com</a></p>
            <p id="phone">917-650-9534</p>
            <p id="address">143 leonard street, apartment 5, brooklyn ny 11206</p>
        </span>
    </span>
</div>
I replaced the original <a> with <span>, therefore we have to make it act like it was an <a>:
Code:
.rollspan:hover {
    color: #BE1F2D;
}
.rollspan {
    display: block;
    cursor: pointer;
    color: darkGray;
}
You can copy and replace the html in your file and add the CSS somewhere and it should be good to go.


All times are GMT +1. The time now is 05:43 AM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.