DIV in Animation bewegen

[farhady]

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
bzw. ich habe deren Code zum größten Teil übernommen.

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.

Nach langer Recherche habe ich verstanden, dass dies durch eine Relation mit einem javascript zustande kommt.

Könnt ihr mir bitte dabei helfen, ein solches Script zu bewerkstelligen.
Wie gesagt, habe viele Codes von dieser Seite übernommen: klick mich
Vielleicht hilft das euch zur Orientierung.:razz:
Wäre über jede Hilfe dankbar, da ich wirklich ein Java-Anfänger bin.
Daher würde ich euch auch bitten, für einen Anfänger zu schreiben.

 

[farhady]

Sorry für Doppel-Post!

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:

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

2)
HTML:

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

        <img src="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:

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.