Mootools endless menu

by basmaat

HTML

<script src="http://blog.medianotions.de/assets/demos/mootools-nested-accordion_1.2/mootools-1.2.js"></script>
        <h1>Verschachteltes<br /> Mootols-Accordion</h1>
                
        <dl class="accordion">
            <dt class="accordion_toggler_1">Fische</dt>
            <dd class=" accordion_content_1">
                <dl>
                    <dt class="accordion_toggler_2">Knochenfische</dt>
                    <dd class=" accordion_content_2">
                        <dl>
                            <dt class="accordion_toggler_3">Aalartige</dt>
                            <dd class="accordion_content accordion_content_3"><p>Beispiel-Inhalt: <a href="http://de.wikipedia.org/wiki/Kategorie:Aalartige">Aalartige</a></p></dd>

                            <dt class="accordion_toggler_3">Barschartige</dt>
                            <dd class="accordion_content accordion_content_3"><p>Beispiel-Inhalt: <a href="http://de.wikipedia.org/wiki/Kategorie:Barschartige">Barschartige</a></p></dd>
                            
                            <dt class="accordion_toggler_3">Hechtartige</dt>
                            <dd class="accordion_content accordion_content_3"><p>Beispiel-Inhalt: <a href="http://de.wikipedia.org/wiki/Kategorie:Hechtartige">Hechtartige</a></p></dd>
                            
                            <dt class="accordion_toggler_3">Störartige</dt>
                            <dd class="accordion_content accordion_content_3"><p>Beispiel-Inhalt: <a href="http://de.wikipedia.org/wiki/Kategorie:Störartige">Störartige</a></p></dd>    
                        </dl>                        
                    </dd>
            
                    <dt class="accordion_toggler_2">Knorpelfische</dt>
                    <dd class=" accordion_content_2">
                        <dl>
                            <dt class="accordion_toggler_3">Ammenhaiartige</dt>
                            <dd class="accordion_content...

CSS

/* @group Reset */

*
{
    margin: 0;
    padding: 0;
    
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
    line-height: 15px;
}

/* @end */

/* @group Allgemeine Dedinitionen */

body
{
    margin: 20px auto;
    padding: 20px;
    
    width: 250px;
    border: 1px solid #509bba;
}

h1 
{
    margin-bottom: 15px;
    
    font-size: 20px;
    line-height: 22px;
    font-weight: normal;
    
    color: #509bba;
}

/* @end */

/* @group Accordion */

dl.accordion
{
    width: 250px;
    
    border-left: 1px solid #e6e2af;
    border-right: 1px solid #e6e2af;
    border-bottom: 1px solid #e6e2af;
}

/* @group Ebene 1 */

dl.accordion dt
{
    position: relative;
    height: 20px;
    padding: 5px 0 2px 25px;
    
    font-weight: bold;
    
    color: white;
    background: #00506c url(icon_accordion_closed.png) no-repeat;
    
    cursor: pointer;
    border-top: 1px solid #e6e2af;
}

* html dl.accordion dt
{
    cursor: hand;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_accordion_closed.png', sizingMethod='crop');
    background-image: none;
}

dl.accordion dt.open
{
    background-image: url(icon_accordion_open.png);
}

* html dl.accordion dt.open
{
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_accordion_open.png', sizingMethod='crop');
    background-image: none;
}

dl.accordion dd
{
    position: relative;
    overflow: hidden;
    background: #efecca;
}

/* @group Inhalt */

dl.accordion dd.sub_accordion
{
    
}

dl.accordion dd.accordion_content
{
    padding: 0 10px 0 25px;
}

dl.accordion dd.accordion_content p
{
    padding: 5px 0 7px 0;
}

/* @end */

/* @end */

/* @group Ebene 2 */

dl.accordion dd dl dt
{
    padding-left: 45px;
    background-color: #217492;
    background-position: 20px 0;
}

dl.accordion dd dl dd.accordion_content
{
    padding-left: 45px;
}

/* @end */

/* @group Ebene 3 */

dl.accordion dd dl dd dl dt
{
    padding-left: 65px;
    background-color:...

JavaScript

//
// Verschachteltes Mootools-Accordion
// Nested Mootools Accordion
// 
// von / by Bogdan Günther
// http://www.medianotions.de
//

window.addEvent('domready', function() {
    
    // Anpassung IE6
    if(window.ie6) var heightValue='100%';
    else var heightValue='';
    
    // Selektoren der Container für Schalter und Inhalt
    var togglerName='dt.accordion_toggler_';
    var contentName='dd.accordion_content_';
    
    
    // Selektoren setzen
    var counter=1;    
    var toggler=$$(togglerName+counter);
    var content=$$(contentName+counter);
    
    while(toggler.length>0)
    {
        // Accordion anwenden
        new Accordion(toggler, content, {
            opacity: false,
            display: -1,
            alwaysHide: true,
            onComplete: function() { 
                var element=$(this.elements[this.previous]);
                if(element && element.offsetHeight>0) element.setStyle('height', heightValue);            
            },
            onActive: function(toggler, content) {
                toggler.addClass('open');
            },
            onBackground: function(toggler, content) {
                toggler.removeClass('open');
            }
        });
        
        // Selektoren für nächstes Level setzen
        counter++;
        toggler=$$(togglerName+counter);
        content=$$(contentName+counter);
    }
});