how do you achieve the effects when you hover the links at top(HOME,ABOUT , JOBS) which you can see in http://www.webdesignerwall.com/ , can someone give me a hint ? or any? please
all answers are appreciated :)
A:
It is probably a script on the Home, About and Jobs links that makes a floating div tag visible on mouseover and invisible on mouseout.
Here is a simple code example achieving a similar effect:
<html>
<body>
<a onmouseover="document.getElementById('my-hidden-div').style.display='block'" onmouseout="document.getElementById('my-hidden-div').style.display='none'">Hover Over This</a>
<div style="display:none" id="my-hidden-div">and I appear.</div>
</body>
</html>
quadelirus
2009-12-16 15:49:45
+1
A:
There are many, many ways this could be acheived. The simplest would be to have each navigation item change the above image to reflect its corresponding graphic.
<div class="hoverImages">
<img src="blank.jpg" style="display:none;" />
</div>
<ul>
<li class="home">Home</li>
<li class="about">About</li>
<li class="contact">Contact</li>
</ul>
-- jQuery
$("li.home").hover(
function () {
$(".hoverImages img").attr("src", "hoverHome.jpg").show();
},
function () {
$(".hoverImages img").hide();
}
);
Jonathan Sampson
2009-12-16 15:50:27
A:
Using jQuery you would just do something like
$(#MenuId).hover(function() { // show hidden image},
function() { // hide hidden image});
rosscj2533
2009-12-16 15:53:59
A:
by the fact that you can rollover the whole area when on rollover i would suggest that it is simply an alternative background that appears on rollover using css. the elements themselves might then be positioned absolutely within the navigation container.
Josh
2009-12-16 15:54:41
A:
In this particular instance, the developer placed a span tag inside the li elements that make up the menu. That span has (most notably) these properties:
- height: 33px;
- top: -26px;
- left: this varies to position the spans properly
- position: absolute;
After that, just some JavaScript to make the span appear/disappear.
Tegeril
2009-12-16 15:56:10
+2
A:
Each link (#nav li a) contains the nav item text plus an additional span which is set to "display:none" by default. The span also has a set of other styles relating to its position and background-image (which is the text that appears).
On #nav li a:hover the span becomes display:block, which makes it visible at the defined position. No scripting needed.
HTML
<ul id="nav">
<li><a href="index.html">Home <span></span></a></li>
<li><a href="about.html">About <span></span></a></li>
<li><a href="jobs.html">Jobs <span></span></a></li>
</ul>
CSS:
#nav li a span{display:none}
#nav li a:hover span{display:block}
This is a completely stripped down version of course, you will need to add your own positioning and other styles as appropriate.
akamike
2009-12-16 15:58:38
thanks, Ive been a lazy dude when I asked this, only problem right now is dealing with IE6 not supporting for :hover. but using jquery might be a solution
arnold
2010-01-20 06:31:22
+1
A:
The way it's achieved is by using an empty <span>.
It's positioned off screen by default and move into view on hover
Like so:
<ul>
<li><a href="#">Link<span> </span></a></li>
<li><a href="#">Link<span> </span></a></li>
<li><a href="#">Link<span> </span></a></li>
</ul>
And the CSS:
ul li a {
display: relative;
}
ul li a span {
position: absolute;
top: -50px; /* or however much above the a you need it to be */
left: -1000em;
}
ul li a:hover span {
left: 0;
}
Jonny Haynes
2009-12-16 15:58:44
+3
A:
A lot of people here are far too quick to whip out the scripting languages. Tsk, tsk. This is achievable through CSS. I'd even be inclined to say that there is no need for additional mark-up. One could use a background image on the :hover state. Simple.
Kin
2009-12-16 16:03:08
A:
A pure CSS solution is explained on Eric Meyer site: Pure CSS Popups 2.
mouviciel
2009-12-16 16:03:45