Wo sind die Custom-Menu li´s?

    Hallo habe zwei kurze fragen,
    Und zwar Benutze ich das Twenty Twelve Theme, habe ein Custom Menu angelegt und benutze dieses als Hauptnavigation. Nun möchte ich durch css3 transition in verbindung mit einem background-image einen Hover-Effekt erzielen.
    Jedoch finde ich die ganzen li´s meines custom-menus nicht Z.B:
    ( ul id="menu-hauptnavigation" class="nav-menu">
    <li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-62"> )

    Ich hab schon ziemlich gesucht, finde aber in keinem verzeichnis oder datei die li´s.


    Und ansonsten habe ich noch versucht lediglich zwischen den einzelnen Listenpunkten meiner beiden sidebarwidgets Archive und Kategorien einfache <hr>´s (Linien) einzufügen, die restlichen widgets sollten davon verschont bleiben.
    Ich weiß leider nicht wo hin ich den code einfügen muss um dies zu erreichen.

    Ich hoffe mir kann jemand helfen.

    • Gerade eben
    • 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

    die li's mit den css classes werden dynamisch erzeugt, und sind zB mit einem browser-inspection-tool wie zB Firebug im browser herauszufinden, wenn du das menu untersuchst.


    Zitat

    weiß denn niemand wo ich diesen code in wp finden kann?

    falls du einen link zu deiner seite angegeben haettest, haettest du evtl auch schon eine antwort bekommen :roll:

    Danke erstmal für deine Antwort, mit Firebug arbeite ich, dieser hilft mir jedoch in diesem Fall nicht weiter. Es geht mir momentan nicht um die style.css ich suche den html/php code und kann ihn nicht finden. Einen Link zu dieser Seite gibt es leider noch nicht, da es lokal läuft =). Das ist aber garkein Problem, denn wie ich schon beschrieben habe handelt es sich um das ganz normale twenty twelve theme in dem ich ein custommenü angelegt habe. Jetzt kommt es nurnoch darauf an in welcher Datei die Li's dieses custommenus zu finden sind. Genauso wie bei den beiden Sidebarwidgets, kann ich auch nicht finden. Ich hoffe jemand hilft mir noch :).

    der source-code fuer die menues und widgets ist irgendwo in den /wp-includes/ dateien;
    core-dateien sollten nicht bearbeitet werden.

    dass du den code nicht finden kannst, ist ein zeichen, dass du den auch nicht bearbeiten solltest.


    es waere einfacher, wenn du beschreiben wuerdest, was du anpassen willst, und warum du auf den code zugreifen willst.

    So.. ja du hast recht da pfusch ich nicht dran rum :).
    Oben habe ich es ja schon etwas angedeutet, ich beschreib es nun genauer:
    Ich habe für das komplette menü ein hintergrundbild möchte nun das wenn man über eines der Menüpunkte hovert ein anderes kleineres Bild hinter dem großen hintergrundbild durch css3 transision sich bis nach unter dem jeweiligen menüpunkt bewegt.
    Hier ein Bild zum Verständniss hier im fall Hover Menüpunkt 2:

    [ATTACH=CONFIG]7520[/ATTACH]

    [ATTACH=CONFIG]7520[/ATTACH]
    --Ich habe einmal das von mir per wordpress angelegte Custom Menu: <div class="menu-hauptnavigation-container"> diese class ist jedoch schon nichtmehr auffindbar.

    --Dann gibt es da noch die ul: <ul id="menu-hauptnavigation" class="nav-menu">
    habe ich nur die class: nav-menu in der header.php gefunden und zwar: <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?> Die id: menu-hauptnavigation ist nicht auffindbar.

    --und wie schon erwähnt kann ich die li's nirgends finden:
    <li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-20 current_page_item menu-item-62">

    </li>


    <li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-64">

    <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70">


    <li id="menu-item-102" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-102">

    <li id="menu-item-65" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-65">


    --das Hintergrundbild der Navigation hat eine eigene img class = navbackground


    Hier nochmal zusammengefasst was Firebug so ausspuckt:

    <hgroup><div id="headbar" class="headwidget" role="complementary">


    <nav class="main-navigation" role="navigation">

    <div class="menu-hauptnavigation-container">

    <ul id="menu-hauptnavigation" class="nav-menu">

    <li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-20 current_page_item menu-item-62">

    </li>


    <li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-64">

    <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70">


    <li id="menu-item-102" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-102">


    <li id="menu-item-65" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-65">


    </ul>


    </div>


    <img class="navbackground" width="664" height="71" .........


    Das was mir die header.php zum nav zeigt:


    <nav id="site-navigation" class="main-navigation" role="navigation">
    <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
    <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    </nav><!-- #site-navigation -->

    Hoffe du kannst helfen :)!

    Zitat filscoon: "Ich habe für das komplette menü ein hintergrundbild möchte nun das wenn man über eines der Menüpunkte hovert ein anderes kleineres Bild hinter dem großen hintergrundbild durch css3 transision sich bis nach unter dem jeweiligen menüpunkt bewegt.".

    Dein Problem hängt nicht wirklich mit irgendwelchen li-Elementen und deren Klassen zusammen (zumindest dann wenn ich dein Anliegen richtig verstehe).
    Was ich verstehe:
    Du hast ein Hintergrundbild für die GESAMTE Hauptnavigation definiert. Jetzt wilst du, dass wenn du über eines der Kinderelemente (li's) fährst (:hover) sich das Hintergrundbild des Elternelements (bzw. der gesamten Navigation) ändert.
    Wenn das stimmt: das ist prinzipiell mittels CSS(3) nicht möglich, da es keinen Elternselektor gibt (du hoverst (sorry für das Wort ;) ) ja nicht die gesamte Navigation sondern ja nur ein Kinderelement (li) von selbiger).
    Eine Lösung wäre es via javascript zu realisieren.
    Eventuell könnte man das ganze auch via einer Umstrukturierung der gesamten Navigation mittels absoluter/relativer Positionierung UND z-index umsetzen -> das wäre aber nicht sehr "sauber" und zudem sehr aufwendig.

    LG, pixselig

    PS: wenn du die CSS3-Eigenschaft "transition" für ein backgroundimage verwenden willst musst du das background-image auch via css einbauen und nicht via dem html-tag "<img> ;)

    hallo und danke für deine antwort, aber ich glaube du hast da etwas falsch verstanden, die gelbe Fläche im Bild ist das Große Backgroundbild das ich extra über Html geladen habe, die Kleine Grüne Fläche ist ein anderes Img das darunter liegt und sich von oben nach unten beim hovern bewegen soll, sprich: es soll weiter rauskucken beim hovern. Das hätte ich gerne über css3 geregelt. Hätte jemand eine Idee um dies zu realisieren?

    AW: Wo sind die Custom-Menu li´s?

    OK, mhmm - ich sehe halt auch weder ein Gelb noch ein Grün da dein Anhang falsch verlinkt ist.

    Oh danke für den Hinweiß, dann machen wirs eben so: [Blockierte Grafik: http://s14.directupload.net/images/130528/um94iyp2.jpg][/URL] also wie gesagt:
    ich habe für das komplette menü ein hintergrundbild (GELBE FLÄCHE) möchte nun das wenn man über eines der Menüpunkte hovert ein anderes kleineres Bild (GRÜNE FLÄCHE) hinter dem großen hintergrundbild durch css3 transision sich bis nach unter dem jeweiligen menüpunkt bewegt. Hier wird gerade Menüpunkt 2 gehovert. Danke für deine bisherige Gedult!

    ok du hast
    HauptnaviPunkt
    UnterPunkt1
    UnterPunkt2
    UnterPunkt3

    wenn ich nun eine Fläche über all diese Unterpunkte haben mag, dann muss Du die
    dem zweiten "ul" zuschreiben

    weil die Navi

    HTML
    <ul><li><a href="" >HauptnaviPunkt</a>
    <ul class="weißichnichtauswändig"><li><a href="">UnterPunkt1</a>
</li><li> usw


</li></ul>


    aussieht

    HTML
    ul.klassehauptnavi:hover ul{}

    ist es das was du suchst?

    Hat sich nichts getan, erst als ich noch das a hinzugefügt habe: .main-navigation ul a:hover
    Doch das Problem ist immer das selbe genau so wenn ich .main-navigation li a:hover benutze:
    1. Das hover Img nimmt zusatzliche breite ein und drängt bei jedem hovern die nachbarn zur seite.
    2. Die Hover Images sind über dem Navigationshintergrund, mein vorhaben ist jedoch: http://s14.directupload.net/images/130528/um94iyp2.jpg das man das hover element eben unter dem großen Background Image hat.
    3. Durch Z-index versucht zu lösen: dann ist das hovern eine Katastrophe und die Menüpunkte zittern vor sich her.

    ich weiß nicht o ich dich oder du mih falsch verstanden hast :) .. kenn mich noch nicht so aus, aber hier nochmalm zum Aufbau:
    --Ich habe einmal das von mir per wordpress angelegte Custom Menu: <div class="menu-hauptnavigation-container">
    --Dann gibt es da noch die ul: <ul id="menu-hauptnavigation" class="nav-menu">
    --Darin befinden sich die ganzen li's: </li>

    <li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-64">
    <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70">
    <li id="menu-item-102" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-102">
    <li id="menu-item-65" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-65">

    Ich habe nicht mehrere ul's..
    Weiß gerade garnicht wie ich vorgehen soll, danke für die Hilfe aufjedenfall :)!

    AW: Wo sind die Custom-Menu li´s?

    OK, jetzt habe ich es kappiert ;)
    Was aber leider nichts daran ändert, dass das mittels js zu realisieren ist.
    Grund: der link <a> innerhalb des listenelements <li> muss ja für ein funktionierendes Menü an der obersten Ebene liegen. Weiters ist damit ein hover-effekt für dieses Element kein Problem. Du willst jetzt aber ein nicht direkt damit in Zusammenhang stehendes Element (das Grüne) über ein hover des "li a" ansprechen. Und das wird so ohne weiteres nur mittels CSS nicht möglich sein - zumindest nicht ohne viel Engagement. Wenn du dich eingehender mit der Thematik auseinandersetzen willst dann sieh dir vor allem die css-selektoren an.
    Aber wie gesagt, einfacher wäre es sowieso mittels js.
    LG, pixselig

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden