By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,700 Members | 1,579 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,700 IT Pros & Developers. It's quick & easy.

Tree Menu Help

P: n/a
Jo
I don't know if this can be done.. But here is what i am trying to
do...
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.
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Jo wrote:
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.


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.html" and "where8.html", then run "where1.html" and change the
"1" to "8" in the URL.
<style type="text/css">
input {background:transparent;border:1px solid;height:1.5em;}
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;}
div#menu span:hover{cursor:pointer;}
</style>

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

function isSupported(el){
return !!(d.getElementById && d.getElementsByTagName &&
el ?
el.nodeName && typeof el.parentNode!="undefined" :
true);
}

function isVisible(el){return el.style.display!="none";}
function setVisible(el,bVis){el.style.display=bVis?"":"none ";}
function setToggleFor(menu){
return function(evt){setVisible(menu, !isVisible(menu));}
}

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

return function(containerID){
var spans, el, links, refhref;
if(isSupported()&&
(container=d.getElementById(containerID))&&
isSupported(container)){

//set the behaviors
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){
spans[ii].onclick=setToggleFor(el);
setVisible(el, false);
}
}

//clean sailing
if(typeof window.onunload=="function"){
window.onunload=function(oldHandler, newHandler){
this.onunload=function(evt){newHandler();oldHandle r();}
}(window.onunload, clean);
}else
window.onunload=clean;

//show the current position
refhref=location.href.match(/([^\/]+)\??[^\/]+$/)[1];
links=container.getElementsByTagName("a");
for(var j=0; j<links.length; j++){
if(links[j].href.indexOf(refhref)!=-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>

<form action="#"
method="post"
onsubmit="this.action=this.elements['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.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>
HTH
Yep.
Jul 20 '05 #2

P: n/a
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>
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.