|
|||
CSS Dropdown-Menü? Wie gehts richtig?
Hi ich habe folgendes Problem, ich will das sich mein Dropdown-Menue nicht nach unten sondern zur Seite ausklappt. Praktisch wie hier nur eben unterhalb.
cssplay.co.uk/menus/cssplay-showup.html Mein bisheriges Dropdown-Menue findet ihr hier: [HTML] gf.net side menue - Pastebin.com Wie kann ich diesen Code umarbeiten? Denn wenn ich versuche alles in eine li zu schreiben klappt sich das Menue trotzdem nach unten auf und nicht zur Seite. Vielen Dank für Hilfe |
Sponsored Links |
|
|||
Da das Menü wohl etwas kompliziert erscheint, habe ich dir mal die Lösung vorgegeben und alles farblich markiert und mit Rahmen versehen.
Auf diese Weise siehst du was sich wo auswirkt. HTML-Code:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Menübeispiel</title> <style> body { background-color:FFFFFF; } #navMenu { margin:0; padding:0; width:700px; height:30px; border: 1px solid blue; } #navMenu ul { border:1px; margin:0; padding:0; line-height:30px; } #navMenu ul li { margin:0; padding:0; list-style:none; float:left; position:relative; font-family:Verdana; color:orange; } #navMenu ul li a { font-family:Verdana; text-decoration:none; text-align:left; display:block; float:left; color: green; } #navMenu ul ul { border: 1px solid red; position:absolute; top:30px; left:-1px; heigth: 1.2em; width:600px; visibility:hidden; } #navMenu ul ul li{ padding:0 5px; } #navMenu ul li:hover ul, #navMenu li:hover { visibility:visible; background:lightgrey; } #navMenu ul li a:hover{ color:yellow; } </style> </head> <body> <div id="navMenu"> <ul> <li> <span class="std">MEHR</span> <ul> <li> <a class="std" href="#"></a> </li> <li> <a class="std" href="./projekte.html" target="_top">Projektanfrage</a> </li> <li> <a class="std" href="./cartoons.html" target="_top">Cartoons</a> </li> <li> <a class="std" href="./artikel.html" target="_top">Artikel</a> </li> <li> <a class="std" href="./ver-art.html" target="_top">Veröffentlichungen</a> </li> </ul> </li> </ul> </div> <div> <p>hallo</p> </div> </body> </html>
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
Sponsored Links |
|
|||
wobei er sich den NavMenu Container sparen kann und direkt das UL ansprechen kann, nicht wahr?
Font-Family gibt man nicht dem li UND dem a, poste dass einem Anfänger doch einfach direkt im Body, mehr CSS Angaben verwirren doch nur! Des weiteren würde ich einheitlich auf Abstände zw. CSS Eigenschaft und Wert achten, andere User werden dir danken! |
|
|||
Zitat:
Zitat:
Er soll ja was dabei lernen und sehen welche Auswirkungen Änderungen im CSS nach sich ziehen und zwar auf sein Menü bezogen. Sonst könnte man ja gleich alles neu schreiben und vorgeben wie es richtig geht, aber ob das dann so hilfreich ist? Zitat:
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
||||
auf diese Art das Submenü auszublenden ist leider keine gute Idee. Die screenreader lesen es dann nicht mehr vor.
Es ist doch so einfach ein submenü mittels pos. abs. und left-9999px auszublenden und dann per left:auto wieder einzublenden. [ot] *seufz* Immer wieder erstaunlich wie lange sich dieser display:none/visibility/hidden-Unfug hält. Geradezu unausrottbar, dabei ist es doch so einfach es zugänglicher zu machen. [/ot]
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus |
|
|||
Zum Ausblenden für Screenreader habe ich schomal geschrieben -- es kommt immer darauf an.
Das "Menü", das ich hier sehe, ist nicht nur für Screenreader, sondern auch für Tastaturbenutzer und per "touch" unzugänglich. Kann man sich das noch erlauben? Eine wirklich einfache Lösung wäre: Der "Trigger", der jetzt ein nutzloses span ist, wird ein Link, dessen Ziel eine Seite ist, auf der alle "Sublinks" gelistet werden. Für Maus-User ist das Dropdown dann eine schnelle Zusatz-Navigation, alle anderen haben den Link.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
@fricca
Du schreibst ja in deinem anderen post: Zitat:
Bis jetzt waren die Browser ja immer sehr tolerant was Abwärtskompatibilität angeht.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
|||
Touchscreens kennen bisher kein hover. Für einige Konstellationen wird bei manchen Geräten hover simuliert; wenn der Trigger kein Link ist weiß ich nicht, ob es überhaupt irgendwo eine Reaktion gibt.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Prima.
Für iOS-Geräte kann man ja zusätzlich dem Element onclick = "void(0)" mitgeben, wie Apple auf seiner Developper-Seite empfiehlt. Ist das eigentlich ein sinnvolles Vorgehen, das auch bei Android funktioniert? Oder hat man hier dann das Problem, das dass wieder nur eine Applekonforme Vorgehensweise ist?
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
Sponsored Links |
|
|||
Progressive Enhancement: Alle Menüpunkte sind ohne JavaScript und mit jedem Gerät erreichbar (siehe oben).
Dann schreibt man ein JavaScript, das bei Klick (und wenn man es angenehmer machen will: touchevents) das Submenü ein-/ausblendet.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
Stichwörter |
css, dropdown, html |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS Menü verändern | Severa | CSS | 1 | 12.09.2012 02:57 |
CSS Dropdown Menü "Position zerschießt Layout" | stingray | CSS | 3 | 24.06.2012 12:17 |
CSS Dropdown Menü | Moepmann123 | CSS | 9 | 03.07.2009 23:03 |
HTML Content vor Menü, CSS soll das ändern, wie? | Geldmichel | CSS | 6 | 08.12.2006 18:35 |
problem mit dem css menü | nevermind | CSS | 72 | 11.10.2005 17:31 |