Menüelemente versetzt

  • Hallo liebe wordpresser,
    hab mich nun doch überwunden und hier im Forum angemeldet.
    Ich sitze an einem Problem, dass ich nach tagelangem googlen und wikipedisieren einfach nicht lösen kann.

    Ich baue zur Zeit ein Blog, bei dem das Menü(horizontal im Header, Menüelemente sind Kategorien) etwas modifiziert werden soll. Die Menüpunkte sollen abwechselnd etwas höher bzw. etwas niedriger stehen, um etwas "chaos" auszudrücken.

    Das Problem ist, dass ich für diesen Blog ein Theme baue und dieses spezielle Menü nicht hart einprogrammieren darf.

    Weis jemand eine gescheite Lösung? Eventuell anpassen mit JS bei Laufzeit?<-- bin kein JSler, daher keine Ahnung, ob es möglich ist.

    Eins noch: das Menü wird mittels wp_nav_menu() in Wordpress erstellt.

    Ich wäre allen Hinweisen und Anregungen extremst Dankbar.


    Gruss Peter

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Das lässt sich per CSS realisieren, Stichwort "Pseudoelemente". wp_nav-menu gibt Listenelemente aus, welche du per :nth-child verschieden formatieren kannst, beispielsweise jedes gerade (even) oder ungerade (odd), jedes zweite (2n), das zweite (2) Element, usw..

    Beispiel:

    Code
    .nav li:nth-child(even) {
    margin-top: 0;
    }
    
    
    .nav li:nth-child(odd) {
    margin-top: 5px;
    }

    Chris Coyier hat dazu einige interessante Beispiele.

    Meine Webseite | WordPress, Webdesign und mehr...

  • Astrein! DANKE reap705. Ich hab mir einen Wolf nach 20.-Zeiligen scripten, irgendwelchen addons und plugins und Weltwunderlösungen gesucht. Dabei ist es so einfach.

    Musste
    #nav .nav li:nth-child(even){ margin-top:5px;} nehmen, weil mein menü in einem #nav-div steckt.

    Supi! Danke

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!