...
PDA

dynamic menu help...

pelicanPaul
02-12-2007, 06:45 PM
Hi,

I have a dynamic menu that is from a HALO menu in Dreamweaver MX.

see: http://www.adobe.com/devnet/dreamweaver/articles/dissecting_halo.html

It works fine. but I need to make it so the glink (Global Link) link stays in the HOVER state until the function closesubnav is called. I am stumped. Any ideas? Right now when one rolls over a globalLink it opens a subglobalLink div when one rolls over the subglobalLink links the globalLink changes back to the A color. I need to keep the globalLink on the HOVER state.

thanks,

Paul

Here is the code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Dynamic Menu </title>

<style type="text/css">
body {
font: 10pt Verdana, sans-serif;
background-color: #8181C3;
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
color: #333333;
}

/************* globalNav styles ****************/


#globalLink1{
position: absolute;
top: 50px;
left: 240px;
height: 50px;
width: 150px;
background-image: url(images/navbar_bkg.jpg);
padding: 0px;
margin: 0px;
}

#globalLink1:hover{
background-image:url(images/nav_services-o.jpg);
color:#660000;
}

#globalLink2{
position: absolute;
top: 50px;
left: 390px;
height: 50px;
width: 150px;
background-image: url(images/nav_portfolio.jpg);
padding: 0px;
margin: 0px;
}

#globalLink2:hover{
background-image: url(images/nav_portfolio-o.jpg);
}

#globalLink3{
position: absolute;
top: 50px;
left: 540px;
height: 50px;
width: 150px;
background-image: url(images/nav_clients.jpg);
padding: 0px;
margin: 0px;
}

#globalLink3:hover{
background-image: url(images/nav_clients-o.jpg);
}

#globalLink4{
position: absolute;
top: 50px;
left: 690px;
height: 50px;
width: 150px;
background-image: url(images/nav_about.jpg);
padding: 0px;
margin: 0px;
}

#globalLink4:hover{
background-image: url(images/nav_about-o.jpg);
}

#globalLink5{
position: absolute;
top: 50px;
left: 840px;
height: 50px;
width: 150px;
background-image: url(images/nav_contact.jpg);
padding: 0px;
margin: 0px;
}

#globalLink5:hover{
background-image: url(images/nav_contact-o.jpg);
}


a.glink, a.glink:visited{
font-size: 11px;
color:#FFFFFF;
position: absolute;
top: 0px;
width: 135px;
height: 50px;
text-align: right;
text-decoration: none;
margin: 0px;
line-height: 85px;
}

a.glink:hover{
text-decoration: none;
color:#660000;
}

.skipLinks {display: none;}

/************ subglobalNav styles **************/

.subglobalNav{
position: absolute;
top: 100px;
left: 275px;
width: 700px;
height: 20px;
padding: 0px;
color:#660000;
visibility: hidden;
}

.subglobalNav a:link, .subglobalNav a:visited {
font-size: 80%;
color:#660000;
text-aline:center;
}

.subglobalNav a:hover{
color:#333333;
background-image:url(images/images/sublogo.gif)}
.skipLinks {display: none;}

#subglobal4{
margin-left: 175px;
}


</style>
<!--[if lt IE 7]><![endif]-->
<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 5;

//menu constructor
function menu(allitems,thisitem,startstate){
callname= "gl"+thisitem;
divname="subglobal"+thisitem;
this.numberofmenuitems = allitems;
this.caller = document.getElementById(callname);
this.thediv = document.getElementById(divname);
this.thediv.style.visibility = startstate;
}

//menu methods
function ehandler(event,theobj){
for (var i=1; i<= theobj.numberofmenuitems; i++){
var shutdiv =eval( "menuitem"+i+".thediv");
shutdiv.style.visibility="hidden";
}
theobj.thediv.style.visibility="visible";
}

function closesubnav(event){
if ((event.clientY <48)||(event.clientY > 107)){
for (var i=1; i<= numofitems; i++){
var shutdiv =eval('menuitem'+i+'.thediv');
shutdiv.style.visibility='hidden';
}
}
}
// -->
</script>

</head>

<body>
<div id= "container">
<div id="globalLink1">
<a href="services.html" id="gl1" class="glink" onMouseOver="ehandler(event,menuitem1);">SERVICES</a>
</div>
<div id="globalLink2">
<a href="portfolio.html" id="gl2" class="glink" onMouseOver="ehandler(event,menuitem2);">PORTFOLIO</a>
</div>
<div id="globalLink3">
<a href="clients.html" id="gl3" class="glink" onMouseOver="ehandler(event,menuitem3);">CLIENTS</a>
</div>
<div id="globalLink4">
<a href="about.html" id="gl4" class="glink" onMouseOver="ehandler(event,menuitem4);">ABOUT </a> </div>
<div id="globalLink5">
<a href="contact.html" id="gl5" class="glink" onMouseOver="ehandler(event,menuitem5);">CONTACT</a> </div>
<!--end globalLinks-->

<div id="subglobal1" class="subglobalNav">
<a href="cabinetry.html">Cabinetry</a> | <a href="construction.html">Construction</a><a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> </div>
<div id="subglobal2" class="subglobalNav">
<a href="featured.html">Featured Project</a> | <a href="kitchens.html">Kitchens</a> | <a href="baths.html">Baths</a> | <a href="livingareas.html">Living Areas</a> | <a href="commercial.html">Commercial Spaces</a><a href="#"></a><a href="#"></a><a href="#"></a> </div>
<div id="subglobal3" class="subglobalNav">
<div align="center"><a href="#"></a> <a href="#"></a> <a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a> </div>
</div>
<div id="subglobal4" class="subglobalNav">
<div align="center"><a href="history.html">History</a> | <a href="people.html">People</a><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a> </div>
</div>
<div id="subglobal5" class="subglobalNav">
<div align="right"><a href="inquiry.html">inquiry</a> | <a href="dirctions.html">directions</a><a href="#"></a><a href="#"></a><a href="#"></a> <a href="#"></a><a href="#"></a> </div>
</div>
<div id="subglobal6" class="subglobalNav">
<a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a> </div>
<div id="subglobal7" class="subglobalNav">
<a href="#"></a><a href="#"></a><a href="#"></a> <a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a> </div>

</div>

<script type="text/javascript">
<!--
var menuitem1 = new menu(7,1,"hidden");
var menuitem2 = new menu(7,2,"hidden");
var menuitem3 = new menu(7,3,"hidden");
var menuitem4 = new menu(7,4,"hidden");
var menuitem5 = new menu(7,5,"hidden");
var menuitem6 = new menu(7,6,"hidden");
var menuitem7 = new menu(7,7,"hidden");
// -->
</script>
</body>
</html>
MikeFoster
02-12-2007, 08:35 PM
Hi pelicanPaul,

Try this:

//menu constructor
function menu(allitems,thisitem,startstate)
{
callname= "gl"+thisitem;
divname="subglobal"+thisitem;
this.numberofmenuitems = allitems;
this.caller = document.getElementById(callname);
this.thediv = document.getElementById(divname);
this.thediv.style.visibility = startstate;
this.item = thisitem;
}

//menu methods
function ehandler(event,theobj)
{
var e;
for (var i=1; i<= theobj.numberofmenuitems; i++) {
var shutdiv = window["menuitem" + i].thediv; //eval( "menuitem"+i+".thediv");
shutdiv.style.visibility="hidden";
e = document.getElementById('gl' + i);
if (e) e.className = 'glink'; // default glink class
}
theobj.thediv.style.visibility="visible";
e = document.getElementById('gl' + theobj.item);
if (e) e.className = 'glinkActive'; // active glink class
}


For a quick test I also added this:

a.glinkActive:hover{
text-decoration: none;
color:#660000;
}

a.glinkActive, a.glinkActive:visited{
font-size: 11px;
color:#FFFFFF;
position: absolute;
top: 0px;
width: 135px;
height: 50px;
text-align: right;
text-decoration: none;
margin: 0px;
line-height: 85px;
background: blue;
}
pelicanPaul
02-13-2007, 01:46 AM
thanks... but what is wanted is when the person rolls over the gllink it changes color into the Hover state until one rolls to a new glink... not sur if this is possible... a HOVER state is a HOVER state. It needs to be tricked into thinking it is still in the HOVER state... thanks..

a.glink, a.glink:visited{
font-size: 11px;
color:#FFFFFF;
position: absolute;
top: 0px;
width: 135px;
height: 50px;
text-align: right;
text-decoration: none;
margin: 0px;
line-height: 85px;
}

a.glink:hover{
text-decoration: none;
color:#660000;
}
pelicanPaul
02-13-2007, 01:56 AM
<a href="services.html" id="gl1" class="glink" onMouseOver="ehandler(event,menuitem1);this.style.color='#660000'">SERVICES</a>

outside the function but then it has no way of knoing when to go back to the regular A #FFF color..

Paul
MikeFoster
02-13-2007, 06:03 AM
You said:
I need to keep the globalLink on the HOVER state.
and that's what I showed you how to do. I may not have provided the exact css for glinkActive that you need - but you can do that ;)
pelicanPaul
02-13-2007, 03:03 PM
got it...
:cool:

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum