Hauptmenü mit Untermenü

Airfighter76 · 21.04.2011

Hey,
wie schon der Titel sagt möchte ich, dass sich sobald man auf das Hauptmenüpunkt klickt sich ein Untermenü öffnet. Ich hab diesbezüglich schon ein paar fertige Lösungen im Netz gefunden (http://www.gosu.pl/menu/), jedoch lehne ich sie grundsätzlich ab, da ich keinen Code verwende den ich nicht verstehe. Bei mir sieht das aktuell so aus:

Code:

        <div onclick="open()">
            Überpunkt
            <div>
                Unterpunkt
            </div>
        </div>

Die Funktion open() ist in java-script und wird ausgeführt wenn man auf den Überpunkt klickt. Der Unterpunkt soll versteckt sein und sobald man auf den Überpunkt klickt wird er sichtbar. Jedoch fehlen mir hierfür die nötigen java-script Befehle. Hoffe ihr könnt mir helfen.

Stefan · 21.04.2011

Binde dir Prototype ein, und dann läuft das so:

HTML:

	<div onclick="$('unterpunkt').show()">
		Überpunkt
		<div id="unterpunkt" style="display:none">
			Unterpunkt
		</div>
	</div>

Den Quellcode findest du über einen Link in der Dokumentation, falls du den verstehen willst.

Wenn du noch script.aculo.us dazu nimmst, kannst du sogar Effekte wie

HTML:

	<div onclick="$('unterpunkt').appear()">
		Überpunkt
		<div id="unterpunkt" style="display:none">
			Unterpunkt
		</div>
	</div>

verwenden (Effekt-Demo gibts hier)

Freundliche Grüße

Stefan

Airfighter76 · 21.04.2011

Edit:

Airfighter76 · 21.04.2011

Ist es erlaubt wenn ich Codeschnipsel rauskopiere und das Copyright weg mache?

Stefan · 21.04.2011

Du meinst den Urheberhinweis? Der steht da nicht umsonst mit drin. Lass ihn doch einfach drin stehen, das tut dir doch nicht weh.

Zu deiner anderen Frage: Es geht auch ohne Zusatz"programme", aber wieso diesen Aufwand treiben? Bei komplizierteren Sachen wirst du dann später Unterschiede zwischen den Webbrowsern feststellen, die du berücksichtigen musst - nimm ein fertiges JavaScript Framework, das hat die Unterschiede alle schon berücksichtigt und musst dich dadrum nicht mehr kümmern.
Außerdem hast du, wie du oben ja siehst, einen schönen lesbaren Code. Das hilft bei der Fehlersuche ungemein.

Freundliche Grüße

Stefan

Airfighter76 · 23.04.2011

Danke für die schnelle Hilfe, ich machs dann vorerst so und evtl. wenn ich mehr Erfahrungen mit java-script habe werde ich mich mal dran setzen sowas selbst zu schreiben.

Airfighter76 · 25.04.2011

Bei mir funktioniert script.aculo.us nur im Internetexplorer und nicht in Firefox. Woran kanns liegen? Hav Version 1.8.3 von Chip.de

Bei mir im Code (hab den Inhalt und Klassen geändert) sieht das im Moment so aus.

Code:

        <div class="1" onclick="Effect.SlideDown('2'); $('0').fade(); return false;">
            Feststellen
        </div>

        <div id="2" style="display:none;">
            <div class="x" 
                Text
            </div>

        </div>

Ist nur ein Codeausschnitt.

Stefan · 25.04.2011

Airfighter76 schrieb:
Ist nur ein Codeausschnitt.

Wie wärs mit dem kompletten Code?

Wenn du da nen Fehler drin hast, dann musst du uns schon möglich machen, ihn zu finden

Airfighter76 · 26.04.2011

Hab dir den Code als Nachricht geschickt.

Flex · 27.04.2011

Poste ihn doch hier mal, das interssiert doch bestimmt mehrere.

Stefan · 27.04.2011

Das will er nicht, weil ihn sonst irgendwer kopieren könne...

Mir hat er auch nur den HTML-Quelltext geschickt, nicht die komplette Seite (JavaScript, CSS).
Wirklich weiterhelfen kann ich dir da leider nicht, mit meinen Prototype und script.aculo.us Versionen funktioniert alles einwandfrei.

Eine Frage habe ich aber noch: Wieso verwendest du script.aculo.us von Chip.de und nicht direkt von script.aculo.us?

Freundliche Grüße

Stefan

Airfighter76 · 27.04.2011

Gaensler nimmst du Firefox oder Internet Explorer? Weil wenn mein Code mit deiner script.aculo.us Version funktioniert, muss es an meiner script.aculo.us liegen. Und das mit dem Kopieren hat folgenden Grund, da ich ihn bei meiner Arbeit (ich bin Azubi) vorzeigen und wenn dann rauskommt, dass es genau den Code auch im Netz zum kopieren gibt, dann sieht das nicht so toll aus.

Stefan · 27.04.2011

Dann lad die Webseite irgendwo hoch, und lösche sie wieder, wenn wir den Fehler gefunden haben. Aber solange du uns nicht die notwendigen Sachen gibst, um den Fehler finden zu können, können wir dir schlecht weiterhelfen.

Du hast gesagt, dass das Problem im Firefox auftritt, dann habe ich es logischerweise auch im Firefox getestet

Freundliche Grüße

Stefan

Hauptmenü mit Untermenü

Airfighter76

Stefan

Airfighter76

Airfighter76

Stefan

Airfighter76

Airfighter76

Stefan

Airfighter76

Flex

Stefan

Airfighter76

Stefan

Hauptmenü mit Untermenü

ANGEBOTE & SPONSOREN

Neueste Beiträge

Statistik des Forums