zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Aufklappbare Navigation mit CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.09.2006, 17:29
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.08.2006
Beiträge: 55
webnet befindet sich auf einem aufstrebenden Ast
Standard Aufklappbare Navigation mit CSS

Im Internet stosse ich immer wieder auf schöne Navigationen, jedoch sind diese meist mit Tabellen und JavaScripts aufgebaut.

Sinnvoller wäre ja eine Navigation mit Listen (li). So setze ich die Navigation eigentlich auch immer um.

Im Anhang findet ihr zwei Screenshots.

Diese Navigation klappt sich beim hover nach rechts auf. (Nav1)
Bei einem Klick wird diese dann angezeigt wie eine kalssische Listen-Navigation. (Nav2)

Leider ist dieses Beispiel mit Tabellen und JavaScripts gelöst. Die Schaltflächen sind Bilder. Also alles andere als barrierefrei.

Habt ihr nun so eine ähnliche Navigation schon gsehen die mit CSS und Listen umgesetzt ist? Oder habt ihr anhaltspunkte dazu?
Angehängte Grafiken
Dateityp: jpg nav1.jpg (14,5 KB, 35x aufgerufen)
Dateityp: jpg nav2.jpg (7,7 KB, 24x aufgerufen)

Geändert von webnet (20.09.2006 um 17:33 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.09.2006, 19:10
doppel-e is scho recht
neuer user
 
Registriert seit: 04.09.2006
Beiträge: 42
britneyfreek befindet sich auf einem aufstrebenden Ast
Pfeil

du meinst wohl sowas: http://de.selfhtml.org/css/layouts/a...nav_modern.htm
anleitung dort: http://de.selfhtml.org/css/layouts/n...ten.htm#modern
__________________
. Bierspiel - mitmachen!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.09.2006, 21:02
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.08.2006
Beiträge: 55
webnet befindet sich auf einem aufstrebenden Ast
Standard

Danke, das ist es aber nicht ganz. Sobald ein submenü active ist sollten die Einträge aufgeklappt bleiben.

Siehe meine beiden Screenshots.

Nun, nach langer suche glaube ich wohl, das es ohne tabellen oder aufwändiges JS nicht möglich ist. Das ganze sollte ja barrierefrei bleiben.
Mit Zitat antworten
  #4 (permalink)  
Alt 20.09.2006, 21:05
doppel-e is scho recht
neuer user
 
Registriert seit: 04.09.2006
Beiträge: 42
britneyfreek befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von webnet
[...] aufwändiges JS nicht möglich ist. Das ganze sollte ja barrierefrei bleiben.
was hast du gegen js? wer vor js noch angst hat und es ausschaltet ist selber schuld.
__________________
. Bierspiel - mitmachen!
Mit Zitat antworten
  #5 (permalink)  
Alt 20.09.2006, 21:33
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.08.2006
Beiträge: 55
webnet befindet sich auf einem aufstrebenden Ast
Standard

Hm weil überall steht es fördere nicht gerade die barrierefreiheit.
Und die Menüs sollten ja als Liste aufgebaut werden.

Leider surfen doch noch einige Leute ohne JS.

Ist einfach gesagt als getan. Wenns nach mir gienge würde ich alle zu FF, Opera 9, oder Safari zwingen.

Denn ohne diesen IE kram wäre vieles einfacher...
Jedoch ist der IE noch stark verbreitet, wie auch die "halb-profis" die ohne JS surfen.
Mit Zitat antworten
  #6 (permalink)  
Alt 20.09.2006, 21:54
doppel-e is scho recht
neuer user
 
Registriert seit: 04.09.2006
Beiträge: 42
britneyfreek befindet sich auf einem aufstrebenden Ast
Standard

wo ich gerade nochmal drüber nachdenk: mein tipp von oben ist doch komplett ohne js...
__________________
. Bierspiel - mitmachen!
Mit Zitat antworten
  #7 (permalink)  
Alt 20.09.2006, 22:30
Neuer Benutzer
neuer user
 
Registriert seit: 20.09.2006
Beiträge: 3
lamar befindet sich auf einem aufstrebenden Ast
Ausrufezeichen Dropdown Links

Hier ein paar Links von gut erklärten Beispielen!!
http://www.alistapart.com/articles/dropdowns/

http://tutorials.alsacreations.com/deroulant/
http://www.dynamicdrive.com/dynamici...rome/index.htm

Ein Programm zum erstellen solcher Menüs:
http://www.opencube.com/imenus.asp
Mit Zitat antworten
  #8 (permalink)  
Alt 20.09.2006, 22:45
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.08.2006
Beiträge: 55
webnet befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von britneyfreek
wo ich gerade nochmal drüber nachdenk: mein tipp von oben ist doch komplett ohne js...
ohne dir nahe treten zu wollen, aber sowas "kann" ich schon.
Es geht hier mehr darum bei Hover -> submenü rechts.
bei klick submenü unten wie ne normale liste.

n Beispiel:
Normaler "a" status:
Level1 a
Level1 b
Level1 c
Level1 d
Level1 e

Status hover auf b
Level1 a
Level1 b level2 a
Level1 c level2 b
Level1 d level2 c
Level1 e

Bei klick auf b oder irgend wo bei level2:
Level1 a
Level1 b
...level2 a
...level2 b
...level2 b
...level2 c
Level1 c
Level1 d
Level1 e


Soweit klar? Ich hoffe ich konnte mich ausdrücken.
Joa sowas such ich eigentlich, wenn möglich nur mit ner Liste und CSS gelöst.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit CSS Dropline menü horst77 CSS 1 12.08.2009 12:49
CSS Navigation (Farben probleme) Siwolk CSS 5 07.05.2008 21:14
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 16:29
CSS Navigation mit "umschlossener" Grafik name CSS 6 24.09.2007 23:33
Problem mit ie6 und css navigation Sinclair CSS 0 29.03.2007 17:00


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:21 Uhr.