SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Italy
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding sublevels to foldout menu

    Hi all,
    i've found this nice foldout menu (click-show-hide menu) at
    http://gosu.pl/dhtml/mygosumenu.html
    that you can test it here:
    http://gosu.pl/demo/mygosumenu/1.3/example2.html
    and this is the full code:
    Code:
    /*
     * DO NOT REMOVE THIS NOTICE
     *
     * PROJECT:   mygosuMenu
     * VERSION:   1.3.3
     * COPYRIGHT: (c) 2003,2004 Cezary Tomczak
     * LINK:      http://gosu.pl/dhtml/mygosumenu.html
     * LICENSE:   BSD (revised)
     */
    
    function ClickShowHideMenu(id) {
        this.box1Hover = true;
        this.box2Hover = true;
        this.highlightActive = false;
    
        this.init = function() {
            if (!document.getElementById(this.id)) {
                alert("Element '"+this.id+"' does not exist in this document. ClickShowHideMenu cannot be initialized");
                return;
            }
            this.parse(document.getElementById(this.id).childNodes, this.tree, this.id);
            this.load();
            if (window.attachEvent) {
                window.attachEvent("onunload", function(e) { self.save(); });
            } else if (window.addEventListener) {
                window.addEventListener("unload", function(e) { self.save(); }, false);
            }
        }
    
        this.parse = function(nodes, tree, id) {
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].nodeType != 1) {
                    continue;
                }
                if (nodes[i].className) {
                    if ("box1" == nodes[i].className.substr(0, 4)) {
                        nodes[i].id = id + "-" + tree.length;
                        tree[tree.length] = new Array();
                        eval('nodes[i].onmouseover = function() { self.box1over("'+nodes[i].id+'"); }');
                        eval('nodes[i].onmouseout = function() { self.box1out("'+nodes[i].id+'"); }');
                        eval('nodes[i].onclick = function() { self.box1click("'+nodes[i].id+'"); }');
                    }
                    if ("section" == nodes[i].className) {
                        id = id + "-" + (tree.length - 1);
                        nodes[i].id = id + "-section";
                        tree = tree[tree.length - 1];
                    }
                    if ("box2" == nodes[i].className.substr(0, 4)) {
                        nodes[i].id = id + "-" + tree.length;
                        tree[tree.length] = new Array();
                        eval('nodes[i].onmouseover = function() { self.box2over("'+nodes[i].id+'", "'+nodes[i].className+'"); }');
                        eval('nodes[i].onmouseout = function() { self.box2out("'+nodes[i].id+'", "'+nodes[i].className+'"); }');
                    }
                }
                if (this.highlightActive && nodes[i].tagName && nodes[i].tagName == "A") {
                    if (document.location.href == nodes[i].href) {
                        nodes[i].className = (nodes[i].className ? ' active' : 'active')
                    }
                }
                if (nodes[i].childNodes) {
                    this.parse(nodes[i].childNodes, tree, id);
                }
            }
        }
    
        this.box1over = function(id) {
            if (!this.box1Hover) return;
            if (!document.getElementById(id)) return;
            document.getElementById(id).className = (this.id_openbox == id ? "box1-open-hover" : "box1-hover");
        }
    
        this.box1out = function(id) {
            if (!this.box1Hover) return;
            if (!document.getElementById(id)) return;
            document.getElementById(id).className = (this.id_openbox == id ? "box1-open" : "box1");
        }
    
        this.box1click = function(id) {
            if (!document.getElementById(id)) {
                return;
            }
            var id_openbox = this.id_openbox;
            if (this.id_openbox) {
                if (!document.getElementById(id + "-section")) {
                    return;
                }
                this.hide();
                if (id_openbox == id) {
                    if (this.box1hover) {
                        document.getElementById(id_openbox).className = "box1-hover";
                    } else {
                        document.getElementById(id_openbox).className = "box1";
                    }
                } else {
                    document.getElementById(id_openbox).className = "box1";
                }
            }
            if (id_openbox != id) {
                this.show(id);
                var className = document.getElementById(id).className;
                if ("box1-hover" == className) {
                    document.getElementById(id).className = "box1-open-hover";
                }
                if ("box1" == className) {
                    document.getElementById(id).className = "box1-open";
                }
            }
        }
    
        this.box2over = function(id, className) {
            if (!this.box2Hover) return;
            if (!document.getElementById(id)) return;
            document.getElementById(id).className = className + "-hover";
        }
    
        this.box2out = function(id, className) {
            if (!this.box2Hover) return;
            if (!document.getElementById(id)) return;
            document.getElementById(id).className = className;
        }
    
        this.show = function(id) {
            if (document.getElementById(id + "-section")) {
                document.getElementById(id + "-section").style.display = "block";
                this.id_openbox = id;
            }
        }
    
        this.hide = function() {
            document.getElementById(this.id_openbox + "-section").style.display = "none";
            this.id_openbox = "";
        }
    
        this.save = function() {
            if (this.id_openbox) {
                this.cookie.set(this.id, this.id_openbox);
            } else {
                this.cookie.del(this.id);
            }
        }
    
        this.load = function() {
            var id_openbox = this.cookie.get(this.id);
            if (id_openbox) {
                this.show(id_openbox);
                document.getElementById(id_openbox).className = "box1-open";
            }
        }
    
        function Cookie() {
            this.get = function(name) {
                var cookies = document.cookie.split(";");
                for (var i = 0; i < cookies.length; i++) {
                    var a = cookies[i].split("=");
                    if (a.length == 2) {
                        a[0] = a[0].trim();
                        a[1] = a[1].trim();
                        if (a[0] == name) {
                            return unescape(a[1]);
                        }
                    }
                }
                return "";
            }
            this.set = function(name, value) {
                document.cookie = name + "=" + escape(value);
            }
            this.del = function(name) {
                document.cookie = name + "=; expires=Thu, 01-Jan-70 00:00:01 GMT";
            }
        }
    
        var self = this;
        this.id = id;
        this.tree = new Array();
        this.cookie = new Cookie();
        this.id_openbox = "";
    }
    
    if (typeof String.prototype.trim == "undefined") {
        String.prototype.trim = function() {
            var s = this.replace(/^\s*/, "");
            return s.replace(/\s*$/, "");
        }
    }
    It's a great tool but has a limitation:it only allows 2 levels
    and actually follows this structure:
    Code:
    <div class="box1">Main item title</div>
    	<div class="section">
    		<div class="box2">item1</div>
    		<div class="box2">item2</div>
    		<div class="box2">item3</div>
    		<div class="box2">itemXXX</div>
    	</div>
    Now my request:is it possible to modify the code
    by adding at least another nested level (box3) ?
    I mean something like this:
    Code:
    <div class="box1">Main item title</div>
    	<div class="section">
    		<div class="box2">item1</div>
    		<div class="box2">item2</div>
    		<div class="box2">item3</div>
    			<div class="box3">subitem3_1</div>
    			<div class="box3">subitem3_2</div>
    		<div class="box2">itemXXX</div>
    	</div>
    Thanks in advance for your replies.

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •