Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „mootools, kann mir jmd helfen?“

Tequila_sunrise

Gelegenheitspixler

Hallo

Ich wollte jetzt langsam mal mit meiner neuen Homepage anfangen, genauer gesagt mit der Navigation. Ich wollte es so machen: Es gibt ca. 6 Oberpunkte, neben denen jeweils ein Pfeil ist und wenn man auf den Pfeil kklickt, klappen unterhalb des Oberpunktes noch weitere Sachen aus. Wie eine Dropdown Navigation, die man aber selber öffnen und schließen kann (bei denen, die ich kenne öffnet sie sich, wenn der Mauszieger drüber geht und schließt sich, wenn der Zeiger wieder weg ist)

hier eine kleine Skizze:



Ich habe gehört, dass man das mit Mootools oder so lösen könnte. Kann mir das jemand erklären/helfen/machen? Bei google habe ich nichts gutes Gefunden.

Wichtig ist mir, dass man es per Button öffnen und schließen kann. (Hab ich schonmal bei einem Browsergame gesehen)

Gruß

Tequila
 

kleinerVampir

Aktives Mitglied

mootools - d.h. du realisierst das ganze per javascript - dann kannst du dir auch eine vorhandene navi in dem stil suchen , welche auf js aufgebaut wurde und einfach dort im script onmouseover / onmouseout durch onklick events ersetzen - das hat dann den selben effekt - sprich es tut sich nichts mehr beim "überfahren" mit der maus , sondern erst beim klicken.

Edit: alternative 2 wäre eine CSS Lösung bei der du :hover durch blindlinks ersetzt - dadurch öffnet / schließt sich das uch alles nur durch klicks
 

Tequila_sunrise

Gelegenheitspixler

ja ich habe gehört, dass es damit funktionieren sollte. Wichtig ist mir auch, dass man beim Öffnen/Schließen der Navigationspunkte nicht die ganze Seite neu laden muss.

Ich blick da aber irgendwie nicht durch (auf der Website, welche Dateien ich runterladen muss usw., könnte auch mit meinem nicht-perfekten Englisch zusammenhängen :) )

welche dateien muss ich runterladen und welche muss ich dann editieren?
 

kleinerVampir

Aktives Mitglied

Hier findest du ein Beispiel für ein Dropdown - Javascript Menü. Den Quelltext kannst du dir dort auch anschauen. Ich denke mal das sollte genau das sein was du suchst. Falls nicht, dann schau dich doch einfach mal um. Es gibt eine Menge vorgefertigter Menüs schon im Web, genuso wie die Entsprechenden Generatoren dafür. Alternative Suchbegriffe für Google wären "DHTML Menue Generator" bzw. "Javascript Menue Generator". Denn wenn es mit deinem Englisch so schlecht ausschaut, dürfte dir auch das beste Tutorial nichts bringen, da 99% auf Englisch sind. Ich würde dir in dem Fall auf jedenfall zu einem Generator raten.

LG kleinerVampir
 

Tequila_sunrise

Gelegenheitspixler

also so schlecht ist mein Englisch nun auch net, aber Deutsch verstehe ich doch um einiges besser :wink:

Ich habe mir jetzt mal dieses Tutorial angeguckt, das duddle gepostet hat.

Braucht man für dieses Tutorial nur die beiden Dateien "prototype.lite.js" und "moo.fx.js". Die sind nämich in Ordnern, kann ich die einfach rausnhemen?

Ich habe dann genau denselben Code genommen, der am Ende des Tutorials steht:
(Die 2 Dateien sind auch richtig platziert ;))
Code:
<head>
        <title>moo.fx Effects Test</title>
       
        <script type="text/javascript" src="prototype.lite.js"></script>
        <script type="text/javascript" src="moo.fx.js"></script>
        <script type="text/javascript">
                // Initialise the effects
                var containerHeight;           
               
                window.onload = function() {
                        containerHeight = new fx.Height('container', {duration: 400});
                }
        </script>
</head>

<body>
        <div id="wrapper">
                <p onclick="containerHeight.toggle();">Lorem ipsum.</p>
                <div id="container">
                        

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus sed metus quis arcu tempus condimentum. Aenean eu odio. Mauris vehicula dui ut massa. In ac.</p>
                        

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus sed metus quis arcu tempus condimentum. Aenean eu odio. Mauris vehicula dui ut massa. In ac.</p>
                        

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus sed metus quis arcu tempus condimentum. Aenean eu odio. Mauris vehicula dui ut massa. In ac.</p>
                </div>
        </div>
</body>
</html>


wenn ich die seite dann anschaue, kan ich nichts ungewöhnliches entdecken. Eigentlich sollte ja etwas pasieren, wenn man auf Lorem Ipsum klickt, oder?

Code:
<p onclick="containerHeight.toggle();">Lorem ipsum.</p>


Dann hab ich mir noch den Link
von KleinerVampir angeguckt. Das wird aber später schwerer einzubinden sein, oder? :?:

Sorry, falls die Fragen etwas dämlich sind, aber irgendwie haperts bei mir immer bei bestimmten Sachen (z.b. dieser hier :wink: )

Gruß

Tequila
 

Tequila_sunrise

Gelegenheitspixler

Hab sie geöffnet, kam folgendes;

Fehler: fx.Height is not a constructor
Quelldatei:
Zeile: 14

Hier die Zeile 14 des Codes:

Code:
containerHeight = new fx.Height('container', {duration: 400});
 

Tequila_sunrise

Gelegenheitspixler

also ich habe folgende Ordnerstruktur

/homepage/index.html
/homepage/moofx/prototype.lite.js
/homepage/moofx/source/moo.fx.js


so hab ich's verlinkt:

<script type="text/javascript" src="/moofx/prototype.lite.js "></script>
<script type="text/javascript" src="/moofx/source/moo.fx.js"></script>
<script type="text/javascript">

der andere code steht ja schon oben.
 

Tequila_sunrise

Gelegenheitspixler

ich steh' gerade voll aufm schlauch, was soll ich dann an der einbindung ändern?


<script type="text/javascript" src="/moofx/prototype.lite.js "></script>
<script type="text/javascript" src="/moofx/source/moo.fx.js"></script>
<script type="text/javascript">

Gruß

Tequila
 
J

jonas93

Guest

Du musst einfach den / am Anfang weglassen:

Code:
<script type="text/javascript" src="moofx/prototype.lite.js "></script> 
<script type="text/javascript" src="moofx/source/moo.fx.js"></script> 
<script type="text/javascript">

Beginnt eine Pfadangabe mit einem / ist sie absolut relativ zum Basis-URI, bei dir also zum localhost, du könntest also auch absolut relativ zum Basis-URI referenzieren:

Code:
<script type="text/javascript" src="/homepage/moofx/prototype.lite.js "></script> 
<script type="text/javascript" src="/homepage/moofx/source/moo.fx.js"></script> 
<script type="text/javascript">

Mehr zum referenzieren, verweisen:

Viele Grüsse
Jonas
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.853
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben