Dropdown-menü positionieren
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
absolut definierten objekte
ausrichtung
code
effekt
eingehen
folgenden bereich
hauptpunkt
http
listen
navigation
problem
rechts positionieren
tip
url
verbesserung
verfeinerung
versetzen
verweis
verzicht
vielzahl
-
Hallo,
ich hab mir aus dem Internet eine Vorlage für ein Dropdownmenü genommen und ein bisschen daran herumgebastelt.
Hier ist der Link dazu:
http://www.fuerderer.12hp.de/public/dropdownmenu.html
Zum großen Teil bin ich damit zufrieden.
Allerdings erscheinen die Untermenüs bisher immer ganz links unter dem Hauptpunkt. Ich würde sie gerne auch mal mittig oder rechts positionieren.
Dabei soll sich aber sonst nichts ändern.
Problem dabei:
Der Rahmen um die Menüs ist absolut positioniert. Ich finde keine Möglichkeit, so die Ausrichtung zu ändern. Wenn ich aber die absolute Positionierung durch eine andere ersetze, wird der Satz unter den Menüs zu weit nach unten verschoben.
Hat jemand eine Idee, wie man das lösen könnte? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo fuerderer,
zunächst möchte ich auf dein verwendeten Code eingehen. Das Problem lässt sich leider nicht so einfach lösen und ist von bestimmten Bedingungen abhängig.
Du kannst die absolut definierten Objekte mit margin versetzen, eine andere Möglichkeit ist mir nicht bekannt. In deinem Beispiel müsstest du in Zeile 34 deines CSS für folgenden Bereich
also das margin in folgendes ändern:#menu div {
margin: 0 0 0 163px
Das wäre aber nicht geschickt, denn so wird ein späterer längerer Unter-Menüpunkt das wieder verschieben. Also müsste für die darunter folgenden Links wieder eine feste Breite definiert werden. Also also keine sehr schöne Lösung. Mir fällt jetzt aber auch keine Möglichkeit ein dies ohne absolute Definition zu realisieren.
Da würde ich eher auf den Schönheitsfehler verzichten und es links positioniert lassen.
Jetzt aber noch 2 Tipps für dich. Zu allererst solltest du dein CSS in eine externe Datei auslagern, das erspart dir später mögliche Änderungen in vielen einzelnen Dateien, da du diese ja überall einbinden kannst. Das realisierst du im<head></head>
<link lang="de" media="screen" rel="stylesheet" type="text/css" hreflang="de" href="css/screen.css">
Die andere Verbesserung wäre der Verzicht auf den per Javascript realisierten Hover-Effekt. Dies lässt sich deutlich besser nur mit HTML und CSS umsetzen. Auch sei hier der Verweis auf das arbeiten mit Listen erwähnt. Schöner, schneller, bedienerfreundlicher.
<nav> <ul> <li> <a href="#">Menüpunkt 1</a> </li> <li> <a href="#">Menüpunkt 2</a> <ul> <li><a href="#">Untermenü 1</a></li> <li><a href="#">Untermenü 2</a></li> <li><a href="#">Untermenü 3</a></li> <li><a href="#">Untermenü 4</a></li> </ul> </li> </ul> </nav>
Dies ist mal so das Grundgerüst. Der Hover-Effekt wird natürlich mittels CSS realisiert, welches du, inkusive funktionalen Beispiel, hier findest : http://daswing.lima-city.de/menu-hover/
Bei Fragen steht dir wie immer das Forum offen.
MfG daswing
Beitrag zuletzt geändert: 15.1.2014 22:37:15 von daswing -
Ich mach es mal kurz:
Dieses Menü ist es nicht wert, daß man Zeit in seine Verfeinerung steckt.
Die Navigation ist, neben den Inhalten, der wichtigste Teil einer Webseite.
Das hier verwendete Menü ist, sofern kein Javascript verfügbar ist, nicht nutzbar. Es gibt nicht mal ein eingeschränktes Fallback. Ohne JS, keine Navigation.
Bevor hier also noch weiter Zeit verschwendet wird, würde ich, wenn Du nicht selber was entwickeln willst/kannst, empfehlen, mal bei Stu Nicholls zu schauen, der eine Vielzahl toller Menüs gebaut hat, die zuverlässig, weil nur mit CSS realisiert, funktionieren.
Beitrag zuletzt geändert: 15.1.2014 23:11:27 von fatfreddy -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
