Thema: Fixiertes Menü

Hi Leute,

ich habe vor mir ein solches Menü zu machen, welches ihr hier betrachten könnt: klick mich

Das Menü bzw Toolbar, wie viele es nennen, ist unten fixiert.
Habe mir deren Code angeguckt und versucht selbst ein solches zu programmieren.

Klappt alles zwar wunderbar, aber ich verstehe nicht, wie sie es realisiert haben, dass ein Menü hoch- und runter klappt, wenn man auf den Buttons klickt.

Je nach dem, ob das Menü oben oder unten ist, ändert sich der Wert

<div class="" id="templates-hide" style="left: 238px; height: 432px;">

...zu...

<div class="" id="templates-hide" style="left: 238px; height: 0px;">

....oder andersherum.

Ich kann im Code nicht entnehmen, wie das zu entstande kommt.
Irgendwo ist noch ein Code verborgen, der diesen Wert kontrolliert.

Ich weiß aber weder welcher noch wie ich mein Ziel mit dem Menü erreichen soll.
Wäre nett, wenn erfahrene Coder mir dabei helfen, mein Menü zu vollenden.

Nehmt es mir nicht übel Leute, aber wieso verweist in jedem Thread jeder auf irgendein Extension hin, statt auf das eigentliche Problem einzugehen.
Ich will etwas über den Code wissen und nicht ein Extension installieren.

Naja nichts für ungut!...

Nun zum Topic...

Ich habe begriffen, dass man <div> mit Java bewegen kann.
Wenn ich also folgenden Code habe:
<div class="" id="templates-hide" style="left: 238px; height: 432px;">

...kann ich per Java-Anweisung den Height auf

<div class="" id="templates-hide" style="left: 238px; height: 0px;">

..bringen.

Da meine Java-Kenntnisse sehr gering sind, würde ich gerne wissen, wie das möglich wäre. Man solle also hier in dem Beispiel: klick mich im Toolbar unten auf Joomla-Templates klicken. Dadurch wird sicher per IF-Abfrage überprüft, ob Menü bereits geöffnet oder geschlossen ist. Ist es geschlosssen, so bekommt <div class="" id="templates-hide" den Wert height: 432px. Ist er offen, bekommt er null. Das ganze wird dann in schöner Animation dargestellt.

Könnt ihr mir bei der Realisierung dieses Codes behilflich sein?

Ich bin es nochmal:

Diesen weißen Toolbar unten möchte ich realisieren: KLICK MICH

Habe die HTML und CSS übernommen und alles erscheint schön und gut.
Jedoch fehlt mir der Code (glaube Javascript), der dafür zuständig ist, die Menüs unten hoch und runterklappen zu lassen.

Sorry für das 3Fache Posten hintereinander, ich hoffe dafür gebt ihr mir keine Verwarnung. Ich entschuldige mich im vorraus. Da dieser Beitrag hier sehr lang ist und ich nicht an auf die max. Zeichen in einem Beitrag zustoßen wollte.


Also ich habe HTML CSS und Javascript vorbereitet.
Jedoch klappt es nicht mit dem javascript. Ich weiß nicht so recht, wo der Fehler liegt, dass auf der Seite keine Reaktion stattfindet.

Ich poste hier lieber die gesamten Codes:

1)
In Head-Bereich habe ich eingefügt:

PHP-Code:

<script type="text/javascript" src="http://mysite.de/demo.js"></script> 


2)
HTML:

PHP-Code:

<?php
/* Toolbar*/ ?>
<div id="nav-bar-toolbar">

        <img src="http://www.html.de/images/logo.png" id="logo-img-toolbar" alt="LOGO" />
        <div id="selector-templates-toolbar">Button1</div>
        <div id="selector-extensions-toolbar">Button2</div>

</div>

<div id="templates-hide-toolbar" class="unvisible-toolbar">
   <div id="list-templates-toolbar">
       <div class="column-toolbar">

                <h2>Text</h2>
                    
        </div>
    </div>
</div>

3)
Javascript:

PHP-Code:

window.addEvent("domready",function(){
    var templates = $('templates-hide-toolbar');
    var templatesWrap = $('list-templates-toolbar');
    var extensions = $('extensions-hide-toolbar');
    var extensionsWrap = $('list-extensions-toolbar');
    var templateSelector = $('selector-templates-toolbar');
    var extensionSelector = $('selector-extensions-toolbar');
    var iframe = $('loader-toolbar');
    var navbar = $('nav-bar-toolbar');
    var mouseOverTemplates = false;
    var mouseOverExtensions = false;
    var tooltip = $('tooltip-toolbar');
    var submenuFx = [];
    var submenuItems = $$('ul.submenu li-toolbar');
    var mouseOverSubmenu = [];
    
    if(!window.opera){
        iframe.setStyle("height",(window.getHeight()-48)+"px");
    }else{
        iframe.setStyle("height",(navbar.getCoordinates().top)+"px");    
    }
    
    iframe.src = (toLoad != 'null') ? toLoad : $$('ul.thumbs li a')[0].href;
    
    templates.setStyle("left",templateSelector.getCoordinates().left - 1);
    extensions.setStyle("left",templateSelector.getCoordinates().left - 1);
    
    $$('.list-submenu').each(function(el,i){
        submenuFx[i] = new Fx.Tween(el,{duration:300});
        submenuFx[i].start("width",0);
        (function(){el.setProperty("class","list-submenu");}).delay(50);
        mouseOverSubmenu[i] = false;
    });
    
    submenuItems.each(function(el,i){
        el.addEvent("mouseenter",function(){
            submenuFx.each(function(elm,j){
                if(j == i) {
                    elm.start("width",242);
                }
                else{
                    elm.start("width",0);
                }
            });

            if(i == 0){
                $$('.list-submenu')[i].setStyle("left",el.getPosition().x + 50 + "px");
                $$('.list-submenu')[i].setStyle("top",($$('ul.submenu li')[0].getPosition().y-42)+"px");
            }else{
                $$('.list-submenu')[i].setStyle("left",el.getPosition().x + 50 + "px");
                $$('.list-submenu')[i].setStyle("top",($$('ul.submenu li')[0].getPosition().y+8)+"px");
            }
        });
        
        el.addEvent("mouseleave",function(){
            (function(){
                 if(!mouseOverSubmenu[i]) submenuFx[i].start("width",0);
             }).delay(50);
        });
    });    

    $$('.list-submenu').each(function(el,i){
        el.addEvent("mouseenter", function(){
            mouseOverSubmenu[i] = true;
        });    
        
        el.addEvent("mouseleave", function(){
            mouseOverSubmenu[i] = false;
            submenuFx[i].start("width",0);
        });
    });
    
    /*$$('ul.submenu').addEvent("mouseleave",function(){
        mouseOverSubmenu.each(function(elm,i){
            if(!elm) submenuFx[i].start("width",0);
        });
    });*/
    
    var tmplFx = new Fx.Tween(templates,{duration:300,transition:Fx.Transitions.Quart.easeInOut});
    var extFx = new Fx.Tween(extensions,{duration:300,transition:Fx.Transitions.Quart.easeInOut});
    tmplFx.start("height",0);
    extFx.start("height",0);
    (function(){
        templates.removeProperty("class");
        extensions.removeProperty("class");        
    }).delay(100);
    
    templateSelector.addEvent("click", function(){
        if(!mouseOverTemplates){
            tmplFx.start("height",templatesWrap.getSize().y);
            mouseOverTemplates = true;
            extFx.start("height",0);
            mouseOverExtensions = false;
        }else{
            tmplFx.start("height",0);        
            mouseOverTemplates = false;
        }    
    });

    extensionSelector.addEvent("click", function(){
        if(!mouseOverExtensions){
            extFx.start("height",extensionsWrap.getSize().y);
            tmplFx.start("height",0);
            $$('.list-submenu').fireEvent("mouseleave");
            mouseOverExtensions = true;
            mouseOverTemplates = false;
        }else{
            extFx.start("height",0);    
            mouseOverExtensions = false;    
        }    
    });
    
    $$('ul.thumbs li a').each(function(el){
        el.getParent().addEvent("mouseenter", function(e){
            var tooltip_content = el.getParent().getElement(".unvisible")
            if(tooltip_content){
                tooltip.innerHTML = tooltip_content.innerHTML;
                tooltip.removeProperty("class");
                tooltip.setStyle("left",el.getPosition().x+100+"px");
                tooltip.setStyle("top",e.page.y-190+"px");    
            }
        });
    
        el.getParent().addEvent("mouseleave", function(e){    
            tooltip.setProperty("class","unvisible");
            tooltip.setStyle("left","-10000px");
        });
    });
    
    $$('ul.thumbs li a').each(function(el){
        el.getParent().addEvent("click", function(e){
            e.stop();
            iframe.src = el.getProperty("href");
            tmplFx.start("height",0);
            $$('.list-submenu').fireEvent("mouseleave");
            extFx.start("height",0);
            mouseOverTemplates = false;
            mouseOverExtensions = false;
        });
    });
    
    $$('#list-extensions a').each(function(el){
        el.getParent().addEvent("click", function(e){
            e.stop();
            iframe.src = el.getProperty("href");
            tmplFx.start("height",0);
            $$('.list-submenu').fireEvent("mouseleave");
            extFx.start("height",0);
            mouseOverTemplates = false;
            mouseOverExtensions = false;
        });
    });
    
    $(document.body).addEvent("click",function(e){
        if(e.target != templateSelector && e.target != extensionSelector){
            tmplFx.start("height",0);
            $$('.list-submenu').fireEvent("mouseleave");
            extFx.start("height",0);
            mouseOverTemplates = false;
            mouseOverExtensions = false;
        }
    });
}); 


Hoffe das macht die Zusammenarbeit mit der Community einfacher.