Tree Menu Help

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Jo

    Tree Menu Help

    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.
  • Yann-Erwan Perio

    #2
    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.

    Comment

    • Yann-Erwan Perio

      #3
      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>

      Comment

      Working...