Gestaltungsfragen Dropdownmenü in Protostar

    Hallo, ich sitze gerade an unserer neuen, von 2.5 auf 3.4.5 aktualisierten Homepage. Benutze dafür das Protostar-Template, welches natürlich kopiert wurde,damit es bei Joomlaupdates nicht überschrieben wird.


    Ich hänge jetzt bei der oberen Navigationsleiste ("Home", "Über uns"...) fest. Hier möchte ich gerne
    a) die Einträge, die beim Überfahren in den aufgeklappten Menüs, farblich voneinander trennen. Geht das mittels leichter Korrektur an der template.css? Und wenn ja, wo?
    b) Die Menüeinträge werden wunderbar im Dropdown angezeigt. Was links bei "Über uns" noch gut aussieht, ist bei "Login" doof. Denn die Einträge verschwinden aus dem Browserfenster. Was könnte man da korrigieren? Vielleicht die Ausrichtung, so das die Einträge nicht nach links weitergehen sondern nach rechts? Und geht das irgendwie so einzurichten, dass es automatisch die Ausrichtung bei Fensterplatzmangel ändert, oder kann man das nur manuell machen?


    Hier kurz die Daten: www.gartenfreunde-bs.de/lvbs34/ ; Benutzer: helper; PW: helper12345
    Hinweis: Die HP ist noch Baustelle (daher das Login), da fehlen noch teilweise notwendige Extensions. Auch Designsünden aus meinen J!-Anfangsphasen stecken drin. :rolleyes:

  • Zum hilfreichsten Beitrag springen

    a) verstehe ich nicht, die Hovers werden ja farblich anders dargestellt
    b) du kannst die Menüstruktur für den Login so ändern, dass im Hauptmenü nur der erste Eintrag dargestellt wird (Ebene 1), die Unterpunkte (Ebene 2) packst du in ein anderes Menümodul, welches zB in der rechten Spalte nur dem eingeloggten Benutzer angezeigt wird.

    Danke Curly schon mal für deine Antworten.


    Am besten ich zeige das mal in "hochprofessioneller" Zichnung, was ich meine:


    Bild 1: So, evtl. in dezenteren Farben, habe ich mir das geöffnete Menü vorgestellt.
    Bild 2: Das Untermenü (mit evtl. weiteren Untermenüs) soll von rechts nach links neben dem ersten Teil des "Login"-Menüs auftauchen.

    • Hilfreich

    Hallo


    Zu a)

    Versuche es mal damit:

    Code
    .navigation .nav-child li:nth-child(2n+1) a {
 background: red;
}




    Zu b)


    Das ist etwas komplizierter. Ich würde es "manuell" lösen, z.B. mit folgender Ergänzung im template.css:


    Allerdings müsste man da mit einer Medienabfrage arbeiten, damit das ganze einigermassen "responsive" bleibt. Wobei ich gerade sehe, dass du die Anzeige bei mobilen Geräten eh noch überarbeiten musst... ;)

    Hallo Anka, zunächst erst einmal vielen Dank für deine Zeit und vor allem deine Lösungsansätze.


    Punkt b) ist genau das was ich gesucht habe. Das klappt wunderbar. Gleichzeitig habe ich herausgefunden, dass man mit der Herausnahme des "nowrap" in Zeile 7207 (.navigation .nav-child a) sogar einen Zeilenumbruch in den Dropdownmenüs erzwingen kann.


    Punkt a) hat leider nur teilweise geklappt. Die erste Ebene wurde tatsächlich wie gewünscht in wechselnden Markierungen gezeichnet, allerdings nicht bei den etwaigen Menüs in Ebene 2 oder tiefer. Da werden die Menüeinträge, die die farbliche Markierung aufweisen, die nachfolgende Menüebene komplett mit dieser Farbe ausgefüllt. Siehe hierzu meine Grafik. Das sollte auch in wechselnden Farbgebungen sein.


    Anzeige bei mobilen Geräten: Danke für den Hinweis, aber ich habe mich bewusst dazu entschlossen, das Hauptaugenmerk auf die Desktopvariante zu legen, da der Großteil der Benutzer mit Windows-Computern surft. Was natürlich nicht heißen soll das ich das "Mobile" weglasse. Da das meine erste (echte) "responsive" wird kann es sein, dass ich in dieser Angelegenheit euch noch mal fragen muss.

    Hallo,
    gerade wenn die Website überwiegend vom PC aus besucht wird liegt im ersten Moment der Ansatz am nächsten, ein Webdesign zuerst für große Bildschirme zu erstellen und dieses Design dann für kleinere Formate anzupassen. Ich würde mir an deiner Stelle aber trotzdem die Vorteile und die Nachteile des Ansatzes “Mobile First” einmal ansehen.
    VG Astrid