Safari Compliant Tree Menus

Ok so I wanted to make a quick and dirty CSS menu tree that allowed for some submenus to appear when the parrent was clicked on. I found some code that worked ok (http://forums.devshed.com/archive/t-93308) but of course, safari choose to be a pain in the arse. Two central things came up: 1) safari wasn't hiding the submenu 2) safari opened the page with the submenu exposed. Style tags to the rescue!

So the trick is to set the submenu to hidden when the page is opened and rewrite the html with the visibility flag set to visible. So basically three little addtions to the code found at the above url:

  • el.style.visibility = "visible";
  • style="visibility: hidden; display: none;" added to submenu tag

    Here's the code itself. YMMV

    [code]

    \n')
    document.write('.submenu{display: none;\n')
    document.write('\n')
    }

    function SwitchMenu(obj){
    if(document.getElementById){
    var el = document.getElementById(obj);
    var ar = document.getElementById("navcontainer").getElementsByTagName("div"); //name of main div
    if(el.style.display != "block"){
    for (var i=0; i

    Sort by:

    [/code]

    • Published 08/02/2004 by arthur  
    ::    Categories: code snipits