menu ad albero css/javascript

[marste881]

Ho trovato il seguente menu, molto utile per il mio lavoro, funziona perfettamente ma non so come far aprire la pagine con una sezione del menu già aperta
vi posto i codici:

HTML

<script type="text/javascript">

    window.onload = function() {
    new TreeMenu("menu1");
    
}
</script>


<ul id="menu1" class="tree-menu">
    <li><a href="javascript:void(0)">Progetto1</a>
        <ul>
            <li><a href="javascript:void(0)">PEEP</a>
                <ul>
                    <li><a href="javascript:void(0)">Proprieta'</a>
                        <ul>
                            <li><a href="#">Edifici Singoli</a></li>
                            <li><a href="#">Plurifamiliari</a></li>                        
                        </ul>
                    </li>
                    <li><a href="javascript:void(0)">Diritti di Superficie</a>
                        <ul>
                            <li><a href="#">Edifici Singoli</a></li>
                            <li><a href="#">Plurifamiliari</a></li>                        
                        </ul>
                    </li>
                    
                </ul>
            </li>
            <li><a href="javascript:void(0)">PIP</a>
                <ul>
                    <li><a href="javascript:void(0)">Proprieta'</a>
                        <ul>
                            <li><a href="#">Edifici Singoli</a></li>
                            <li><a href="#">Edifici a Piu' unita'</a></li>                        
                        </ul>
                    </li>
                    <li><a href="javascript:void(0)">Diritti di Superficie</a>
                        <ul>
                            <li><a href="#">Edifici Singoli</a></li>
                            <li><a href="#">Edifici a Piu' unita'</a></li>                        
                        </ul>
                    </li>
                    
                </ul>
            </li>
            
        </ul>
    </li>
     <li><a href="javascript:void(0)">Progetto1</a>
        <ul>
            <li><a href="javascript:void(0)">PEEP</a>
                <ul>
                    <li><a href="javascript:void(0)">Proprieta'</a>
                        <ul>
                            <li><a href="#">Edifici Singoli</a></li>
                            <li><a href="#">Plurifamiliari</a></li>                        
                        </ul>
                    </li>
                    <li><a href="javascript:void(0)">Diritti di Superficie</a>
                        <ul>
                            <li><a href="#">Edifici Singoli</a></li>
                            <li><a href="#">Plurifamiliari</a></li>                        
                        </ul>
                    </li>
                    
                </ul>
            </li>
            <li><a href="javascript:void(0)">PIP</a>
                <ul>
                    <li><a href="javascript:void(0)">Proprieta'</a>
                        <ul>
                            <li><a href="#">Edifici Singoli</a></li>
                            <li><a href="#">Edifici a Piu' unita'</a></li>                        
                        </ul>
                    </li>
                    <li><a href="javascript:void(0)">Diritti di Superficie</a>
                        <ul>
                            <li><a href="#">Edifici Singoli</a></li>
                            <li><a href="#">Edifici a Piu' unita'</a></li>                        
                        </ul>
                    </li>
                    
                </ul>
            </li>
            
        </ul>
    </li>
</ul>

CSS:

ul.tree-menu {    font-size: 12px;
    line-height: 16px;
    font-family: tahoma;
    margin: 0;
    padding: 0;
}
ul.tree-menu ul {
    margin: 0 0 0 20px;
    padding: 2px 0 0 0;
}
ul.tree-menu li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul.tree-menu li.section {
    background-image: url("folder.gif");
    background-repeat: no-repeat;
    background-position: top left;
    padding-top: 1px;
    padding-bottom: 1px;
}
ul.tree-menu li.section-open {
    background-image: url("folder-open.gif");
    background-repeat: no-repeat;
    background-position: top left;
    padding-top: 1px;
    padding-bottom: 1px;
}
ul.tree-menu li.box {
    background-image: url("doc.gif");
    background-repeat: no-repeat;
    background-position: top left;
    padding-top: 1px;
    padding-bottom: 1px;
}
ul.tree-menu a {
    margin-left: 20px;
    color: #0000ff;
    text-decoration: none;
    white-space: nowrap;
}
ul.tree-menu a:hover {
    margin-left: 20px;
    color: #0000ff;
    text-decoration: underline;
    white-space: nowrap;
}

JAVASCRIPT:

function TreeMenu(id) {

    this.init = function() {
        if (!document.getElementById(this.id)) {
            alert("Element '"+this.id+"' does not exist in this document. TreeMenu cannot be initialized");
            return;
        }
        this.parse(document.getElementById(this.id).childNodes, this.tree, this.id);
    }


    this.parse = function(nodes, tree, id) {
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].nodeType != 1) {
                continue;
            }
            if (nodes[i].tagName.toLowerCase() == "li") {
                nodes[i].id = id + "-" + tree.length;
                tree[tree.length] = new Array();
                if (nodes[i].childNodes && this.hasUl(nodes[i].childNodes)) {
                    nodes[i].className = "section";
                    var a;
                    if (a = this.getA(nodes[i].childNodes)) {
                        a.id = nodes[i].id + "-a";
                        eval("document.getElementById('"+a.id+"').onclick = function() {"+
                            "self.click('"+nodes[i].id+"');"+
                        "}");
                    }
                } else {
                    nodes[i].className = "box";
                }
            }
            if (nodes[i].tagName.toLowerCase() == "ul") {
                nodes[i].style.display = "none";
                id = id + "-" + (tree.length - 1);
                nodes[i].id = id + "-section";
                tree = tree[tree.length - 1];
            }
            if (nodes[i].childNodes) {
                this.parse(nodes[i].childNodes, tree, id);
            }
        }
    }


    this.hasUl = function(nodes) {
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].nodeType != 1) {
                continue;
            }
            if (nodes[i].tagName.toLowerCase() == "ul") {
                return true;
            }
            if (nodes[i].childNodes) {
                if (this.hasUl(nodes[i].childNodes)) {
                    return true;
                }
            }
        }
        return false;
    }


    this.getA = function(nodes) {
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].nodeType == 1) {
                if (nodes[i].tagName.toLowerCase() == "a") {
                    return nodes[i];
                }
                return false;
            }
        }
    }


    this.click = function(id) {
        e1 = document.getElementById(id + "-section");
        e2 = document.getElementById(id);
        if (e1.style.display == "none") {
            e1.style.display = "";
            e2.className = "section-open";
        } else {
            e1.style.display = "none";
            e2.className = "section";
        }
    }


    var self = this;
    this.id = id;
    this.tree = new Array();
    this.init();
}