Yann-Erwan Perio wrote:
Here's a quick example working fine on IE6, Mozilla 1.6a and Opera 7.21,
with a simple menu. Just copy-paste it into two files and name them
"where1.html" and "where8.html", then run "where1.html" and change the
"1" to "8" in the URL.
I've been a little bit sloppy with the provided script, so I've written
another version; it remains quite simple (no object orientation and few
common menu features) but the code is a bit more satisfactory.
<style type="text/css">
div#menu{
border:thin outset;
background:transparent; color:#777;
font-family:Book Antiqua, serif;
position:absolute;right:10%;top:10%;
width:10em;
}
div#menu a {color:#777;text-decoration:none;}
div#menu a:hover {color:#bbb;}
div#menu ul {list-style-type:none;margin:0 1em;padding:0;}
div#menu span {font-weight:700;cursor:hand;cursor:pointer;}
</style>
<script type="text/javascript">
var setMenuBehavior=function(){
function falseFunction(){return false;}
function isVisible(el){return el.style.display!="none";}
function setVisible(el,bVis){
if(bVis){
el.style.display="";
/*@cc_on@*/
/*@if (@_jscript_version >= 5)
try{
el.style.visibility="hidden";
if(typeof el.filters!="undefined") {
if(el.filters.length==0){
el.style.zoom="1";
el.style.filter=
"progid:DXImageTransform.Microsoft.Fade(duration=0 .3)";
}
el.filters[0].Apply();
el.style.visibility="visible";
el.filters[0].Play();
}
}catch (ex){
el.style.visibility="visible";
}
@end @*/
}else
el.style.display="none";
}
function setToggleFor(menu){
return function(evt){ setVisible(menu, !isVisible(menu)); }
}
function clean(menuDiv){
var spans=menuDiv.getElementsByTagName("span");
for(var ii=0; ii<spans.length; ii++){
spans[ii].onclick=null;
spans[ii].onselectstart=null;
}
}
function setEvt(obj, evt, func){
if(obj[evt]) {
obj[evt]=function(f,g){
return function(){
f.apply(this,arguments);
return g.apply(this,arguments);
};
}(func, obj[evt]);
} else
obj[evt]=func;
}
return function(containerID){
var d=document, bCanRun=false;
var spans, container, el, links, ref;
// test if the script can run
if(d.getElementById && d.getElementsByTagName){
container=d.getElementById(containerID);
if(container && container.nodeName &&
typeof container.parentNode!="undefined" &&
typeof container.nextSibling!="undefined"){
bCanRun = true;
}
}
if(bCanRun){
//set the behaviors for the submenu labels
spans=container.getElementsByTagName("span");
for(var ii=0; ii<spans.length; ii++){
el=spans[ii];
while(el&&el.nodeName.toLowerCase()!="ul") el=el.nextSibling;
if(el){
setEvt(spans[ii], "onclick", setToggleFor(el));
setEvt(spans[ii], "onselectstart", falseFunction);
setVisible(el, false);
}
}
//clean sailing
setEvt(window, "onunload", function(evt){clean(container);});
//show the current position
ref=location.href.match(/([^\/]+)\??[^\/]+$/)[1];
links=container.getElementsByTagName("a");
for(var j=0; j<links.length; j++){
if(links[j].href.indexOf(ref)!=-1){//link found
el=links[j].parentNode;
while(el && el.id!=containerID){
if(el.nodeName.toLowerCase()=="ul") setVisible(el, true);
el=el.parentNode;
}
break;
}
}
}
}
}();
</script>
<div id="menu">
<ul id="menu1">
<li><a href="where1.html">Where 1</a></li>
<li><a href="where2.html">Where 2</a></li>
<li>
<span>Menu 2</span>
<ul id="menu2">
<li><a href="where3.html">Where 3</a></li>
<li><a href="where4.html">Where 4</a></li>
</ul>
</li>
<li>
<span>Menu 3</span>
<ul id="menu3">
<li><a href="where5.html">Where 5</a></li>
<li><a href="where6.html">Where 6</a></li>
<li>
<span>Menu 4</span>
<ul id="menu4">
<li><a href="where7.html">Where 7</a></li>
<li><a href="where8.html">Where 8</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
setMenuBehavior("menu");
</script>