1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Wo sind die Custom-Menu li´s?

Dieses Thema im Forum "Allgemeines" wurde erstellt von filscoon, 23. Mai 2013.

Schlagworte:
  1. filscoon

    filscoon Member

    Registriert seit:
    2. April 2013
    Beiträge:
    16
    Zustimmungen:
    0
    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.
     
  2. filscoon

    filscoon Member

    Registriert seit:
    2. April 2013
    Beiträge:
    16
    Zustimmungen:
    0
    hm..weiß denn niemand wo ich diesen code in wp finden kann?
     
  3. alchymyth

    alchymyth Well-Known Member

    Registriert seit:
    7. Juni 2009
    Beiträge:
    3.959
    Zustimmungen:
    1
    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.


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

    filscoon Member

    Registriert seit:
    2. April 2013
    Beiträge:
    16
    Zustimmungen:
    0
    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 :).
     
  5. alchymyth

    alchymyth Well-Known Member

    Registriert seit:
    7. Juni 2009
    Beiträge:
    3.959
    Zustimmungen:
    1
    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.
     
  6. filscoon

    filscoon Member

    Registriert seit:
    2. April 2013
    Beiträge:
    16
    Zustimmungen:
    0
    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:

    Den Anhang 7520 betrachten

    Den Anhang 7520 betrachten
    --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 :)!
     
  7. pixselig

    pixselig Well-Known Member

    Registriert seit:
    8. Mai 2012
    Beiträge:
    2.296
    Zustimmungen:
    5
    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> ;)
     
  8. filscoon

    filscoon Member

    Registriert seit:
    2. April 2013
    Beiträge:
    16
    Zustimmungen:
    0
    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?
     
  9. pixselig

    pixselig Well-Known Member

    Registriert seit:
    8. Mai 2012
    Beiträge:
    2.296
    Zustimmungen:
    5
    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.
     
  10. filscoon

    filscoon Member

    Registriert seit:
    2. April 2013
    Beiträge:
    16
    Zustimmungen:
    0
    Oh danke für den Hinweiß, dann machen wirs eben so: [​IMG][/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!
     
  11. Monika

    Monika Well-Known Member
    Ehrenmitglied

    Registriert seit:
    4. Juni 2005
    Beiträge:
    14.126
    Zustimmungen:
    2
    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:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    aussieht

    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    ist es das was du suchst?
     
  12. filscoon

    filscoon Member

    Registriert seit:
    2. April 2013
    Beiträge:
    16
    Zustimmungen:
    0
    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 :)!
     
  13. pixselig

    pixselig Well-Known Member

    Registriert seit:
    8. Mai 2012
    Beiträge:
    2.296
    Zustimmungen:
    5
    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
     
  14. Tutrix

    Tutrix Well-Known Member

    Registriert seit:
    21. Mai 2010
    Beiträge:
    3.662
    Zustimmungen:
    7
    was zum lesen klick mich

    uns sonst wie pixselig schon schreibt mit .js klick mich
    da gibts auch fertige Menüs für WP
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden