Hover over nav to reveal more info

tyutghf · Aug 9, 2012

I am trying to get fancy with my website but each tutorial I find to achieve a similar effect needs me to use lists. Here's what I want to try and achieve

http://s8.postimage.org/y9meu1cwl/SECTOR_MAIN_IMAGES.jpg

When a visitor first comes to my site they will see an initial image, text and button. When they hover over a menu item the main image changes along with the text and button, they should be able to move their mouse away from the menu item to be able to click the button.

Is jquery the best way for this or should I try with css?

Thanks for any help

ggriffit · Aug 9, 2012

why don't you look at the source of the page and see how they are doing it ? I do something similar on my sites home page (

http://www.greggriffiths.org)

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006

http://www.greggriffiths.org/livelink/

vacunita · Aug 9, 2012

What source? the link is an image.

Anyway...

I am trying to get fancy with my website but each tutorial I find to achieve a similar effect needs me to use lists.

What's wrong with lists? Its the semantically correct way of building menus.

Anyway, the base of it should work with or without lists.

Try this for instance:

Code:

[b][COLOR=#000080]<!DOCTYPE[/color][/b] [COLOR=#009900]HTML[/color] [COLOR=#009900]PUBLIC[/color] [COLOR=#FF0000]"-//W3C//DTD HTML 4.01 Transitional//EN"[/color] [COLOR=#FF0000]"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd"[/URL][/color][b][COLOR=#000080]>[/color][/b]
[b][COLOR=#0000FF]<html>[/color][/b]
[b][COLOR=#0000FF]<head>[/color][/b]
[b][COLOR=#0000FF]<title>[/color][/b]Hover Link[b][COLOR=#0000FF]</title>[/color][/b]
[b][COLOR=#0000FF]<script[/color][/b] [COLOR=#009900]type[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"text/javascript"[/color] [b][COLOR=#0000FF]>[/color][/b]
var selOpt = 'opt1';
function showDesc(optionObj,optShow)
{
[tab][tab]
[tab]//alert(optShow);
[tab]if(optShow != selOpt)
[tab]{
[tab][tab]var selObj = document.getElementById(optShow);
[tab][tab]var hideObj = document.getElementById(selOpt);
[tab]}
[tab]selObj.style.display = 'block';
[tab]hideObj.style.display = 'none';
[tab]selOpt = optShow;
[tab]
[tab][tab]
}
[b][COLOR=#0000FF]</script>[/color][/b]
[b][COLOR=#0000FF]<style[/color][/b] [COLOR=#009900]type[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"text/css"[/color][b][COLOR=#0000FF]>[/color][/b]
body
{
[tab]background-color:#343434;   
[tab]margin:0px;
[tab]padding:0px;
}
#container
{
[tab]width:800px;
[tab]border:1px solid gray;
[tab]background-color: #ededed;  
}
#menu
{
[tab]overflow: hidden;
[tab]height:40px;
}

#menu ul
{
[tab]overflow: hidden;
[tab]list-style-type: none;
[tab]padding:0px;
[tab]margin: 0px;
[tab][tab]
}
#menu ul li
{
cursor: pointer;
float:left;
min-width: 120px;
height:40px;
text-align: center;
border-left: 2px groove #dedede;
line-height: 40px;
}

#menu ul li:hover
{
[tab]background-color: #004499;  
}

#menusection
{
border-top:1px solid #666666;   
height:300px;
}

#menusection div.descript
{
[tab]display:none;
[tab]overflow:hidden;
[tab]height: 300px;

}

#menusection div.opt1
{
color:#668800;
display:block;
}

#menusection div.opt2
{
[tab]color:#886600;  
}

#menusection div.opt3
{
[tab]color:#006699;  
}

#menusection div.opt4
{
[tab]color:#009966;  
}

#menusection div.descript div.splash
{
[tab]background-color:#668800;
[tab]width:550px;
[tab]height:300px;   
[tab]float:left;
}

#menusection div.descript div.descbox
{
[tab]float:left;
[tab]width:248px;[tab]
[tab]height:100%;
[tab]position: relative;
}

#menusection div.opt2 div.splash
{
[tab]background-color: #886600;[tab]  
}

#menusection div.opt3 div.splash
{
[tab]background-color: #006699;  
}

#menusection div.opt4 div.splash
{
[tab]background-color: #009966;  
}

#menusection div.descript div.descbox a.morelink
{
[tab]position: absolute;
[tab]bottom: 5px;
[tab]right: 10px;[tab]
[tab]color:inherit;
}
[b][COLOR=#0000FF]</style>[/color][/b]
[b][COLOR=#0000FF]<meta[/color][/b] [COLOR=#009900]name[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"date"[/color] [COLOR=#009900]content[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"2012-08-09T10:19:00-0500"[/color] [b][COLOR=#0000FF]>[/color][/b]
[b][COLOR=#0000FF]<meta[/color][/b] [COLOR=#009900]name[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"copyright"[/color] [COLOR=#009900]content[/color][COLOR=#990000]=[/color][COLOR=#FF0000]""[/color][b][COLOR=#0000FF]>[/color][/b]
[b][COLOR=#0000FF]<meta[/color][/b] [COLOR=#009900]name[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"keywords"[/color] [COLOR=#009900]content[/color][COLOR=#990000]=[/color][COLOR=#FF0000]""[/color][b][COLOR=#0000FF]>[/color][/b]
[b][COLOR=#0000FF]<meta[/color][/b] [COLOR=#009900]name[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"description"[/color] [COLOR=#009900]content[/color][COLOR=#990000]=[/color][COLOR=#FF0000]""[/color][b][COLOR=#0000FF]>[/color][/b]
[b][COLOR=#0000FF]<meta[/color][/b] [COLOR=#009900]name[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"ROBOTS"[/color] [COLOR=#009900]content[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"NOINDEX, NOFOLLOW"[/color][b][COLOR=#0000FF]>[/color][/b]
[b][COLOR=#0000FF]<meta[/color][/b] [COLOR=#009900]http-equiv[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"content-type"[/color] [COLOR=#009900]content[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"text/html; charset=UTF-8"[/color][b][COLOR=#0000FF]>[/color][/b]
[b][COLOR=#0000FF]<meta[/color][/b] [COLOR=#009900]http-equiv[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"content-type"[/color] [COLOR=#009900]content[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"application/xhtml+xml; charset=UTF-8"[/color][b][COLOR=#0000FF]>[/color][/b]
[b][COLOR=#0000FF]<meta[/color][/b] [COLOR=#009900]http-equiv[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"content-style-type"[/color] [COLOR=#009900]content[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"text/css"[/color][b][COLOR=#0000FF]>[/color][/b]
[b][COLOR=#0000FF]<meta[/color][/b] [COLOR=#009900]http-equiv[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"expires"[/color] [COLOR=#009900]content[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"0"[/color][b][COLOR=#0000FF]>[/color][/b]
[b][COLOR=#0000FF]</head>[/color][/b]
[b][COLOR=#0000FF]<body>[/color][/b]
[b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]id[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"container"[/color][b][COLOR=#0000FF]>[/color][/b]
[tab][b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]id[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"menu"[/color][b][COLOR=#0000FF]>[/color][/b]
[tab][tab][b][COLOR=#0000FF]<ul><li[/color][/b] [COLOR=#009900]onmouseover[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"showDesc(this,'opt1');"[/color][b][COLOR=#0000FF]>[/color][/b]Option 1[b][COLOR=#0000FF]</li><li[/color][/b] [COLOR=#009900]onmouseover[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"showDesc(this,'opt2');"[/color][b][COLOR=#0000FF]>[/color][/b]Option 2[b][COLOR=#0000FF]</li><li[/color][/b] [COLOR=#009900]onmouseover[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"showDesc(this,'opt3');"[/color][b][COLOR=#0000FF]>[/color][/b]Option 3[b][COLOR=#0000FF]</li><li[/color][/b] [COLOR=#009900]onmouseover[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"showDesc(this,'opt4');"[/color][b][COLOR=#0000FF]>[/color][/b]Option 4[b][COLOR=#0000FF]</li></ul>[/color][/b]
[tab][b][COLOR=#0000FF]</div>[/color][/b]
  [b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]id[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"menusection"[/color][b][COLOR=#0000FF]>[/color][/b]
[tab][b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]id[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"opt1"[/color] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"descript opt1"[/color][b][COLOR=#0000FF]>[/color][/b]
[tab][tab][b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"splash"[/color][b][COLOR=#0000FF]>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div>[/color][/b]
[tab][tab][b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"descbox "[/color][b][COLOR=#0000FF]>[/color][/b]
[tab][tab][tab][b][COLOR=#0000FF]<h1>[/color][/b]Header[b][COLOR=#0000FF]</h1>[/color][/b]
[tab][tab][tab][b][COLOR=#0000FF]<h3>[/color][/b]Sub header[b][COLOR=#0000FF]</h3>[/color][/b]
[tab][tab][tab][b][COLOR=#0000FF]<p>[/color][/b]Description goes here[b][COLOR=#0000FF]</p>[/color][/b]
[tab][tab][tab][b][COLOR=#0000FF]<a[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"morelink"[/color] [COLOR=#009900]href[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"#"[/color][b][COLOR=#0000FF]>[/color][/b]More Info[b][COLOR=#0000FF]</a>[/color][/b]
[tab][tab][b][COLOR=#0000FF]</div>[/color][/b]
[tab][b][COLOR=#0000FF]</div>[/color][/b]
[tab][b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]id[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"opt2"[/color] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"descript opt2"[/color][b][COLOR=#0000FF]>[/color][/b]
[tab][tab][b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"splash"[/color][b][COLOR=#0000FF]>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div>[/color][/b]
[tab][tab][b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"descbox"[/color][b][COLOR=#0000FF]>[/color][/b]
[tab][tab][tab][b][COLOR=#0000FF]<h1>[/color][/b]Header[b][COLOR=#0000FF]</h1>[/color][/b]
[tab][tab][tab][b][COLOR=#0000FF]<h3>[/color][/b]Sub header[b][COLOR=#0000FF]</h3>[/color][/b]
[tab][tab][tab][b][COLOR=#0000FF]<p>[/color][/b]Description goes here[b][COLOR=#0000FF]</p>[/color][/b]
[tab][tab][tab][b][COLOR=#0000FF]<a[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"morelink"[/color] [COLOR=#009900]href[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"#"[/color][b][COLOR=#0000FF]>[/color][/b]More Info[b][COLOR=#0000FF]</a>[/color][/b]
[tab][tab][b][COLOR=#0000FF]</div>[/color][/b]
[tab] [b][COLOR=#0000FF]</div>[/color][/b]
[tab][b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]id[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"opt3"[/color] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"descript opt3"[/color][b][COLOR=#0000FF]>[/color][/b]
[tab][tab][b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"splash"[/color][b][COLOR=#0000FF]>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div>[/color][/b]
[tab][tab][b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"descbox"[/color][b][COLOR=#0000FF]>[/color][/b]
[tab][tab][tab][b][COLOR=#0000FF]<h1>[/color][/b]Header[b][COLOR=#0000FF]</h1>[/color][/b]
[tab][tab][tab][b][COLOR=#0000FF]<h3>[/color][/b]Sub header[b][COLOR=#0000FF]</h3>[/color][/b]
[tab][tab][tab][b][COLOR=#0000FF]<p>[/color][/b]Description goes here[b][COLOR=#0000FF]</p>[/color][/b]
[tab][tab][tab][b][COLOR=#0000FF]<a[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"morelink"[/color] [COLOR=#009900]href[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"#"[/color][b][COLOR=#0000FF]>[/color][/b]More Info[b][COLOR=#0000FF]</a>[/color][/b]
[tab][tab][b][COLOR=#0000FF]</div>[/color][/b]
[tab][b][COLOR=#0000FF]</div>[/color][/b]
[tab][b][COLOR=#0000FF]<div[/color][/b]  [COLOR=#009900]id[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"opt4"[/color] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"descript opt4"[/color][b][COLOR=#0000FF]>[/color][/b]
[tab][tab][b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"splash"[/color][b][COLOR=#0000FF]>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div>[/color][/b]
[tab][tab][b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"descbox"[/color][b][COLOR=#0000FF]>[/color][/b]
[tab][tab][tab][b][COLOR=#0000FF]<h1>[/color][/b]Header[b][COLOR=#0000FF]</h1>[/color][/b]
[tab][tab][tab][b][COLOR=#0000FF]<h3>[/color][/b]Sub header[b][COLOR=#0000FF]</h3>[/color][/b]
[tab][tab][tab][b][COLOR=#0000FF]<p>[/color][/b]Description goes here[b][COLOR=#0000FF]</p>[/color][/b]
[tab][tab][tab][b][COLOR=#0000FF]<a[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"morelink"[/color] [COLOR=#009900]href[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"#"[/color][b][COLOR=#0000FF]>[/color][/b]More Info[b][COLOR=#0000FF]</a>[/color][/b]
[tab][tab][b][COLOR=#0000FF]</div>[/color][/b]
[tab][b][COLOR=#0000FF]</div>[/color][/b]  
  [b][COLOR=#0000FF]</div>[/color][/b]

 [b][COLOR=#0000FF]</div>[/color][/b]
[b][COLOR=#0000FF]</body>[/color][/b]
[b][COLOR=#0000FF]</html>[/color][/b]

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

ChrisHirst · Aug 10, 2012

tyutghf said:
When a visitor first comes to my site they will see an initial image, text and button. When they hover over a menu item the main image changes along with the text and button, they should be able to move their mouse away from the menu item to be able to click the button.

Well assuming I have guessed what you mean, because it is rather difficult to glean anything functional from a picture.

You are looking for would be a "disjointed rollover".

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

darryncooke · Aug 10, 2012

yup and what you are tying to do is achieved using CSS and JS.

Phil gave you a good start.

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Hover over nav to reveal more info

tyutghf

Technical User

ggriffit

Programmer

vacunita

Programmer

ChrisHirst

IS-IT--Management

darryncooke

Technical User

Similar threads

Part and Inventory Search

Sponsor