Hi again,
These are called dropline menus and aren't too hard to implement.
Here are two good tutorials:
http://net.tutsplus.com/tutorials/ht...rop-down-menu/
http://www.webstuffshare.com/2010/01...-css-tab-menu/
The second one is probably more like what you are looking for. Currently you need to click to have the text change, but it shouldn't be too hard to modify its behaviour so that it displays on hover instead.
By way of a further example, have a look at this very simple demo I made:
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>jQuery hover</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style>
#container1{width:150px; height:150px;background:green; margin:5px; float:left;}
#container2{width:150px; height:150px;background:yellow; margin:5px; float:left;}
#container3{width:150px; height:150px;background:red; margin:5px; float:left;}
#text{clear:both;width:460px; border:1px solid;black; margin-left:5px;padding:5px;}
</style>
</head>
<body>
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>
<div id="text">Watch this space</div>
<script>
$(document).ready(function() {
t = $("#text");
$("#container1").hover(function(){ t.text("You last hovered over the green div").fadeIn("slow")});
$("#container2").hover(function(){ t.text("You last hovered over the yellow div").fadeIn("slow")});
$("#container3").hover(function(){ t.text("You last hovered over the red div").fadeIn("slow")});
});
</script>
</body>
</html>
If this suits your needs, we could spice it up a little with some fade in / fade out effects
Posting Permissions
Reply With Quote
Bookmarks