Tree Menu Help

**Yann-Erwan Perio** · Jul 20 '05, 11:45 AM

Re: Tree Menu Help

Jo wrote:
[color=blue]
> I have a tree menu on a frameless page. I have the menu on the right
> hand side and a CGI web form post on the left. When i Post a form and
> it displays a new html page i would like to see a different branch
> expaned on the tree menu and close (who be a bonus) the other one
> that is open.[/color]

This depends on how your menu is implemented; basically you should just
analyze the querystring and expand the section (and parent sections) in
which a link appears to match the URL.

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.htm l" and "where8.htm l", then run "where1.htm l" and change the
"1" to "8" in the URL.

<style type="text/css">
input {background:tra nsparent;border :1px solid;height:1. 5em;}
div#menu{
border:thin outset;
background:tran sparent; color:#777;
font-family:Book Antiqua, serif;
position:absolu te;right:10%;to p:10%;
width:10em;
}
div#menu a {color:#777;tex t-decoration:none ;}
div#menu a:hover {color:#bbb;}
div#menu ul {list-style-type:none;margi n:0 1em;padding:0;}
div#menu span {font-weight:700;}
div#menu span:hover{curs or:pointer;}
</style>

<script type="text/javascript">
var setMenuBehavior =function(){
var d=document;
var container=null;

function isSupported(el) {
return !!(d.getElement ById && d.getElementsBy TagName &&
el ?
el.nodeName && typeof el.parentNode!= "undefined" :
true);
}

function isVisible(el){r eturn el.style.displa y!="none";}
function setVisible(el,b Vis){el.style.d isplay=bVis?"": "none";}
function setToggleFor(me nu){
return function(evt){s etVisible(menu, !isVisible(menu ));}
}

function clean(){
var spans=container .getElementsByT agName("span");
for(var ii=0; ii<spans.length ; ii++)
spans[ii].onclick=null;
}

return function(contai nerID){
var spans, el, links, refhref;
if(isSupported( )&&
(container=d.ge tElementById(co ntainerID))&&
isSupported(con tainer)){

//set the behaviors
spans=container .getElementsByT agName("span");
for(var ii=0; ii<spans.length ; ii++){
el=spans[ii];
while(el&&el.no deName.toLowerC ase()!="ul") el=el.nextSibli ng;
if(el){
spans[ii].onclick=setTog gleFor(el);
setVisible(el, false);
}
}

//clean sailing
if(typeof window.onunload =="function") {
window.onunload =function(oldHa ndler, newHandler){
this.onunload=f unction(evt){ne wHandler();oldH andler();}
}(window.onunlo ad, clean);
}else
window.onunload =clean;

//show the current position
refhref=locatio n.href.match(/([^\/]+)\??[^\/]+$/)[1];
links=container .getElementsByT agName("a");
for(var j=0; j<links.length ; j++){
if(links[j].href.indexOf(r efhref)!=-1){//link found
el=links[j].parentNode;
while(el && el.id!=containe rID){
if(el.nodeName. toLowerCase()== "ul") setVisible(el, true);
el=el.parentNod e;
}
break;
}
}
}
}
}();
</script>

<form action="#"
method="post"
onsubmit="this. action=this.ele ments['where'].value;return true">
<fieldset>
<legend>Where do you want to sail?</legend>
<input type="text" title="Where??? " name="where">
<input type="submit" value="Go!">
</fieldset>
</form>

<div id="menu">
<ul id="menu1">
<li><a href="where1.ht ml">Where 1</a></li>
<li><a href="where2.ht ml">Where 2</a></li>
<li>
<span>Menu 2</span>
<ul id="menu2">
<li><a href="where3.ht ml">Where 3</a></li>
<li><a href="where4.ht ml">Where 4</a></li>
</ul>
</li>
<li>
<span>Menu 3</span>
<ul id="menu3">
<li><a href="where5.ht ml">Where 5</a></li>
<li><a href="where6.ht ml">Where 6</a></li>
<li>
<span>Menu 4</span>
<ul id="menu4">
<li><a href="where7.ht ml">Where 7</a></li>
<li><a href="where8.ht ml">Where 8</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

<script type="text/javascript">
setMenuBehavior ("menu");
</script>

HTH
Yep.

**Yann-Erwan Perio** · Jul 20 '05, 11:46 AM

Re: Tree Menu Help

Yann-Erwan Perio wrote:
[color=blue]
> 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.htm l" and "where8.htm l", then run "where1.htm l" and change the
> "1" to "8" in the URL.[/color]

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:tran sparent; color:#777;
font-family:Book Antiqua, serif;
position:absolu te;right:10%;to p:10%;
width:10em;
}
div#menu a {color:#777;tex t-decoration:none ;}
div#menu a:hover {color:#bbb;}
div#menu ul {list-style-type:none;margi n:0 1em;padding:0;}
div#menu span {font-weight:700;curs or:hand;cursor: pointer;}
</style>

<script type="text/javascript">
var setMenuBehavior =function(){

function falseFunction() {return false;}
function isVisible(el){r eturn el.style.displa y!="none";}
function setVisible(el,b Vis){
if(bVis){
el.style.displa y="";
/*@cc_on@*/
/*@if (@_jscript_vers ion >= 5)
try{
el.style.visibi lity="hidden";
if(typeof el.filters!="un defined") {
if(el.filters.l ength==0){
el.style.zoom=" 1";
el.style.filter =
"progid:DXImage Transform.Micro soft.Fade(durat ion=0.3)";
}
el.filters[0].Apply();
el.style.visibi lity="visible";
el.filters[0].Play();
}
}catch (ex){
el.style.visibi lity="visible";
}
@end @*/
}else
el.style.displa y="none";
}
function setToggleFor(me nu){
return function(evt){ setVisible(menu , !isVisible(menu )); }
}

function clean(menuDiv){
var spans=menuDiv.g etElementsByTag Name("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,ar guments);
return g.apply(this,ar guments);
};
}(func, obj[evt]);
} else
obj[evt]=func;
}

return function(contai nerID){
var d=document, bCanRun=false;
var spans, container, el, links, ref;

// test if the script can run
if(d.getElement ById && d.getElementsBy TagName){
container=d.get ElementById(con tainerID);
if(container && container.nodeN ame &&
typeof container.paren tNode!="undefin ed" &&
typeof container.nextS ibling!="undefi ned"){
bCanRun = true;
}
}

if(bCanRun){
//set the behaviors for the submenu labels
spans=container .getElementsByT agName("span");
for(var ii=0; ii<spans.length ; ii++){
el=spans[ii];
while(el&&el.no deName.toLowerC ase()!="ul") el=el.nextSibli ng;
if(el){
setEvt(spans[ii], "onclick", setToggleFor(el ));
setEvt(spans[ii], "onselectstart" , falseFunction);
setVisible(el, false);
}
}

//clean sailing
setEvt(window, "onunload", function(evt){c lean(container) ;});

//show the current position
ref=location.hr ef.match(/([^\/]+)\??[^\/]+$/)[1];
links=container .getElementsByT agName("a");
for(var j=0; j<links.length ; j++){
if(links[j].href.indexOf(r ef)!=-1){//link found
el=links[j].parentNode;
while(el && el.id!=containe rID){
if(el.nodeName. toLowerCase()== "ul") setVisible(el, true);
el=el.parentNod e;
}
break;
}
}
}
}
}();
</script>

<div id="menu">
<ul id="menu1">
<li><a href="where1.ht ml">Where 1</a></li>
<li><a href="where2.ht ml">Where 2</a></li>
<li>
<span>Menu 2</span>
<ul id="menu2">
<li><a href="where3.ht ml">Where 3</a></li>
<li><a href="where4.ht ml">Where 4</a></li>
</ul>
</li>
<li>
<span>Menu 3</span>
<ul id="menu3">
<li><a href="where5.ht ml">Where 5</a></li>
<li><a href="where6.ht ml">Where 6</a></li>
<li>
<span>Menu 4</span>
<ul id="menu4">
<li><a href="where7.ht ml">Where 7</a></li>
<li><a href="where8.ht ml">Where 8</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

<script type="text/javascript">
setMenuBehavior ("menu");
</script>

Tree Menu Help

Tree Menu Help

Comment

Comment