...

View Full Version : Two level menu



petho
06-24-2009, 04:00 AM
Hi,

I've created a two level menu for my webpage as per the code below, and it's not quite working as I had hoped.

I would like the second level of buttons (submenu) to disappear once the cursor is no longer hovering over them - rather than appearing until another button in the top level is hovered over. Can someone please help me modify the javascript below to do that?

Thanks in advance.





<HTML>

<HEAD>

<script type="text/javascript">
var mastertabvar=new Object()
mastertabvar.baseopacity=0
mastertabvar.browserdetect=""
function showsubmenu(masterid, id){
if (typeof highlighting!="undefined")
clearInterval(highlighting)
submenuobject=document.getElementById(id)
mastertabvar.browserdetect=submenuobject.filters? "ie" : typeof submenuobject.style.MozOpacity=="string"? "mozilla" : ""
hidesubmenus(mastertabvar[masterid])
submenuobject.style.display="block"
instantset(mastertabvar.baseopacity)
highlighting=setInterval("gradualfade(submenuobject)",50)
}
function hidesubmenus(submenuarray){
for (var i=0; i<submenuarray.length; i++)
document.getElementById(submenuarray[i]).style.display="none"
}
function hidesubmenu(id){
document.getElementById(id).style.display="none"
}
function instantset(degree){
if (mastertabvar.browserdetect=="mozilla")
submenuobject.style.MozOpacity=degree/100
else if (mastertabvar.browserdetect=="ie")
submenuobject.filters.alpha.opacity=degree
}
function gradualfade(cur2){
if (mastertabvar.browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (mastertabvar.browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (typeof highlighting!="undefined") //fading animation over
clearInterval(highlighting)
}
function initalizetab(tabid) {
mastertabvar[tabid]=new Array()
var menuitems=document.getElementById(tabid).getElementsByTagName("li")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab
mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel") //store ids of submenus of tab menu
if (menuitems[i].className=="selected")
showsubmenu(tabid, menuitems[i].getAttribute("rel"))
menuitems[i].getElementsByTagName("a")[0].onmouseover=function(){
showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
}
}
}
}
</script>
<style type="text/css">
.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Arial;
border-bottom: 0px solid #99CC00;
list-style-type: none;
margin-bottom: 1px;
text-align: right; /*set to left, center, or right to align the menu as desired*/
}
.basictab li{
display: inline;
margin: 0;
}
.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 0px;
border: 1px solid gray;
background-color: #99CC00;
color: #000000;
}
.basictab li a:visited{
color: #grey; /*main heading text colour*/
}
.basictab li a:hover{
text-decoration: none;
background-color: #800000;
color: white;
}
/*
.basictab li a:active{
color: #800000;
}
.basictab li a.selected {
position: relative;
top: 1px;
padding-top: 4px;
background-color: #99CC00;
color: #800000;
}
*/
.submenustyle{
padding: 3px 0;
font: 12px Arial;
border-top-width: 0;
width: auto;
text-align: right;
display: none;
filter:alpha(opacity=0);
-moz-opacity:0;
}
* html .submenustyle{ /*IE only width definition*/
width: 100%;
}
.submenustyle a{
border-right: 1px dashed grey;
padding: 1px 5px;
text-decoration: none;
color: #800000;
}
.submenustyle a:hover{
background-color: beige;
}
</style>

</HEAD>

<BODY onresize="window.location.href = window.location.href">

<TABLE cellSpacing=1 cellPadding=1 width=960 border=0>
<TR>
<TD vAlign=top>
<ul id="maintab" class="basictab">
<li rel="heading_cost"><A href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cost&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</A>
<li rel="heading_time"><A href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</A>
<li rel="heading_quality"><A href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Quality&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</A>
<li rel="heading_integration"><A href="#">&nbsp;&nbsp;&nbsp;&nbsp;Integration&nbsp;&nbsp;&nbsp;&nbsp;</A></li>
</ul>
<div id="heading_cost" class="submenustyle" onmouseout="hidesubmenu(this.id);">
<a
href="http://enapsom1.transdom.electranet.private:50200/logon/logonServlet?redirectURL=%2F%2Fen-adlpap-02.transdom.electranet.private:8000%2Fsap%2Fbw%2FBEx%3Fsap-language=EN%26bsplanguage=EN%26CMD=LDOC%26TEMPLATE_ID=PS_P_C05_900_DASH"
>FY Summary</a>
<a
href="http://enapsom1.transdom.electranet.private:50200/logon/logonServlet?redirectURL=%2F%2Fen-adlpap-02.transdom.electranet.private:8000%2Fsap%2Fbw%2FBEx%3Fsap-language=EN%26bsplanguage=EN%26CMD=LDOC%26TEMPLATE_ID=PS_P_C05_901_DASH"
>FY Variances</a>
<a
href="http://enapsom1.transdom.electranet.private:50200/logon/logonServlet?redirectURL=%2F%2Fen-adlpap-02.transdom.electranet.private:8000%2Fsap%2Fbw%2FBEx%3Fsap-language=EN%26bsplanguage=EN%26CMD=LDOC%26TEMPLATE_ID=PS_P_C05_910_DASH"
>Project Financials</a>
<a
href="http://enapsom1.transdom.electranet.private:50200/logon/logonServlet?redirectURL=%2F%2Fen-adlpap-02.transdom.electranet.private:8000%2Fsap%2Fbw%2FBEx%3Fsap-language=EN%26bsplanguage=EN%26CMD=LDOC%26TEMPLATE_ID=PS_P_C05_902_DASH"
>Project Variances</a>
<a
href="http://enapsom1.transdom.electranet.private:50200/logon/logonServlet?redirectURL=%2F%2Fen-adlpap-02.transdom.electranet.private:8000%2Fsap%2Fbw%2FBEx%3Fsap-language=EN%26bsplanguage=EN%26CMD=LDOC%26TEMPLATE_ID=PS_P_C05_902_DASH"
>EV Report</a>
<a
href="http://enapsom1.transdom.electranet.private:50200/logon/logonServlet?redirectURL=%2F%2Fen-adlpap-02.transdom.electranet.private:8000%2Fsap%2Fbw%2FBEx%3Fsap-language=EN%26bsplanguage=EN%26CMD=LDOC%26TEMPLATE_ID=PS_P_C05_902_DASH"
>Business Plan</a>
<a
href="http://enapsom1.transdom.electranet.private:50200/logon/logonServlet?redirectURL=%2F%2Fen-adlpap-02.transdom.electranet.private:8000%2Fsap%2Fbw%2FBEx%3Fsap-language=EN%26bsplanguage=EN%26CMD=LDOC%26TEMPLATE_ID=PS_P_C05_902_DASH"
>Compare Business Plans</a>
</div>
<div id="heading_time" class="submenustyle">
<a
href="http://enapsom1.transdom.electranet.private:50200/logon/logonServlet?redirectURL=%2F%2Fen-adlpap-02.transdom.electranet.private:8000%2Fsap%2Fbw%2FBEx%3Fsap-language=EN%26bsplanguage=EN%26CMD=LDOC%26TEMPLATE_ID=PS_P_C05_907_DASH"
>Project Milestones</a>
<a
href="http://enapsom1.transdom.electranet.private:50200/logon/logonServlet?redirectURL=%2F%2Fen-adlpap-02.transdom.electranet.private:8000%2Fsap%2Fbw%2FBEx%3Fsap-language=EN%26bsplanguage=EN%26CMD=LDOC%26TEMPLATE_ID=PS_P_C05_871_DASH"
>Project Gate Reviews</a>
</div>
<div id="heading_quality" class="submenustyle">
<A href="#">Reporting Quality</A>
<A href="#">Forecast Quality</A>
</div>
<div id="heading_integration" class="submenustyle">
<a
href="http://enapsom1.transdom.electranet.private:50200/logon/logonServlet?redirectURL=%2F%2Fen-adlpap-02.transdom.electranet.private:8000%2Fsap%2Fbw%2FBEx%3Fsap-language=EN%26bsplanguage=EN%26CMD=LDOC%26TEMPLATE_ID=PS_P_C05_950_DASH"
>Project Snapshot</a>
</div>
<script type="text/javascript">
//initialize tab menu, by passing in ID of UL
initalizetab("maintab")
</script>

</TD>

</TR>

</TABLE>

abduraooft
06-24-2009, 09:22 AM
Relying completely on javascript is not a good idea, since it may cause accessibility issues for those who have no javascript support. I'd recommed a CSS based one instead. Take a look at http://htmldog.com/articles/suckerfish/dropdowns/

PS: please edit your above post and add
][/COLOR] tags around your code.

petho
06-25-2009, 04:01 AM
I agree - some users have accessibility issues. However, I'm not really sure how to use the CSS method. Are you able to assist? Or otherwise, since the javascript option is sooo close to working, is it just best that I try and fix that?

Cheers.

abduraooft
06-25-2009, 10:03 AM
However, I'm not really sure how to use the CSS method. Are you able to assist? Have you checked that link and examples there?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum