mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 10:05 Benutzername: Passwort: Auto-Login

Thema: Navigationsmenü soll bei Klick ausklappen vom 07.02.2014


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Navigationsmenü soll bei Klick ausklappen
Autor Nachricht
Fluffy_x3
Threadersteller

Dabei seit: 16.07.2012
Ort: -
Alter: 29
Geschlecht: Weiblich
Verfasst Fr 07.02.2014 10:46
Titel

Navigationsmenü soll bei Klick ausklappen

Antworten mit Zitat Zum Seitenanfang

Hallo,

ich bin gerade dabei eine Unternavigation (Subnavigation) in HTML und CSS umzusetzen. Allerdings komme ich gerade nicht weiter.

Und zwar möchte ich, dass bei einem Klick auf einen Navigationspunkt (ul > li) anschließend das nachfolgende Unterseitenmenü ausklappt. Ich gehe davon aus, dass das über JavaScript gelöst werden muss - ich komm nur nicht drauf wie.

Ich hab das hier mal im JSFiddle eingebaut, damit ihr euch das bildlich vorstellen könnt > HIER

Wäre super wenn mir da jemand weiterhelfen könnte und schonmal vielen Dank im Voraus. Lächel
  View user's profile Private Nachricht senden
SimonDerDude

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: Männlich
Verfasst Fr 07.02.2014 10:56
Titel

Antworten mit Zitat Zum Seitenanfang

Du kannst den :focus-Zustand des Links so misshandeln, dass das benachbarte (a:focus + ul) Element angezeigt wird.

Zuletzt bearbeitet von SimonDerDude am Fr 07.02.2014 10:57, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Fluffy_x3
Threadersteller

Dabei seit: 16.07.2012
Ort: -
Alter: 29
Geschlecht: Weiblich
Verfasst Fr 07.02.2014 11:27
Titel

Antworten mit Zitat Zum Seitenanfang

SimonDerDude hat geschrieben:
Du kannst den :focus-Zustand des Links so misshandeln, dass das benachbarte (a:focus + ul) Element angezeigt wird.


wie genau meinst du dass mit dem misshandeln des :focus-Zustand des Links? Ich find auf der Webseite nichts zu a:focus + ul
  View user's profile Private Nachricht senden
SimonDerDude

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: Männlich
Verfasst Fr 07.02.2014 11:36
Titel

Antworten mit Zitat Zum Seitenanfang

Fluffy_x3 hat geschrieben:
SimonDerDude hat geschrieben:
Du kannst den :focus-Zustand des Links so misshandeln, dass das benachbarte (a:focus + ul) Element angezeigt wird.


... Ich find auf der Webseite nichts zu a:focus + ul

Da sind auch nur die Selektorketten erklärt.

Mit CSS ist es eine kleine "Schummelei". Das Verschachtelte ul wird außerhalb des Viewports positioniert (left: -9999px) oder wenn möglich mit einer Farbe überlagert (z-index).
Auf Klick (:focus) wird die Position oder Überlagerung korrigiert.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Morgo

Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 39
Geschlecht: Männlich
Verfasst Fr 07.02.2014 11:45
Titel

Antworten mit Zitat Zum Seitenanfang

Wobei man dazu noch erwähnen sollte, dass dann eine Bedienung über Tastatur nicht mehr sinnvoll möglich ist. Also nur machen, wenn du nicht auf WCAG Rücksicht nehmen musst.
  View user's profile Private Nachricht senden
Localfu

Dabei seit: 16.05.2011
Ort: Ratzeburg
Alter: 36
Geschlecht: Männlich
Verfasst Mi 05.03.2014 04:43
Titel

Mit JQuery

Antworten mit Zitat Zum Seitenanfang

Du kannst Untermenüs mit der Funktion slideToggle aus JQuery nutzen.

[code]
JQUERY:

$("#navigation ul li").click( function() {

$(this).find("ul").slideToggle();

});
[/code]
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Navigationsmenü bei überfahren im Firefox unten im IE rechts
Navigationsmenü Trick? (Master Page Item)
[HTML] Navigationsmenü: Button-Grafiken kontra Text-Links
Problem CSS Menü ausklappen
CSS Menü ausklappen Vertikal
[CSS] Menü nach oben ausklappen
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.