Enjoy an ad free experience by logging in. Not a member yet?
Register .
PM User | 1
New Coder
Join Date: Aug 2012
Location: Brooklyn, New York
Posts: 11
Thanks: 3
Thanked 0 Times in 0 Posts
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>
PM User | 2
Senior Coder
Join Date: Jan 2011
Location: Missouri
Posts: 2,387
Thanks: 18
Thanked 350 Times in 349 Posts
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/
Users who have thanked sunfighter for this post:
PM User | 3
New Coder
Join Date: Aug 2012
Location: Brooklyn, New York
Posts: 11
Thanks: 3
Thanked 0 Times in 0 Posts
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)
PM User | 4
Registered User
Join Date: Jun 2011
Posts: 1,063
Thanks: 12
Thanked 241 Times in 240 Posts
You have everything wrapped with an
<a> tag that links to "mailto."
Code:
<div class="menubuttons">
<a a
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 a
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.
Last edited by Sammy12; 09-10-2012 at 11:06 PM ..
Jump To Top of Thread
Thread Tools
Rate This Thread
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
All times are GMT +1. The time now is 05:48 PM .
Advertisement
Log in to turn off these ads.
Before you post, read our: 
