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

2 menüs gleichzeitiger hover effekt...

Dieses Thema im Forum "Design" wurde erstellt von Linklabor, 21. Dezember 2016.

Schlagworte:
  1. Linklabor

    Linklabor Member

    Registriert seit:
    21. September 2016
    Beiträge:
    6
    Zustimmungen:
    0
    Hallo liebes Forum,
    ich habe folgendes Problem, es sind auf meiner Front-Page Seite ein Header-menü und ein Extra-menu die jeweils mit hover Effekt arbeiten und auch die gleiche Verlinkung haben.
    Vorstellen kann man sich das so, ein Header-menü wo die Schrift Farbe und Form wechselt beim hovern und ein Extra-menü was ein Farbband ist, wo wenn gehovert wird sich jeweilige Bereich vergrößert.
    Jetzt möchte ich es aber so haben, dass wenn <a> Header-menü gehovert wird das entsprechende <a> Extra-menü mit hovert und auch anders herum.

    <nav>
    <div id="main-nav">
    <?php wp_nav_menu( array( 'theme_location' => 'header-menu','container' => '','fallback_cb' => '__return_false') ); ?>
    </div><!—Ende main-nav -->

    <div id="index-nav">
    <?php wp_nav_menu( array( 'theme_location' => 'extra-menu','container' => '','fallback_cb' => '__return_false') ); ?>
    </div><!—Ende index-nav -->
    </nav>

    Wie stelle ich das an?
    Danke schon mal in Voraus.
     
  2. Linklabor

    Linklabor Member

    Registriert seit:
    21. September 2016
    Beiträge:
    6
    Zustimmungen:
    0
    ich weiß wie es gehen würde, wäre es HTLM und CSS.

    <ul>
    <li id="red"><a href="#"><em>Red</em></a></li>
    <li id="yellow"><a href="#"><em>Yellow</em></a></li>
    <li id="orange"><a href="#"><em>Orange</em></a></li>
    <li id="green"><a href="#"><em>Green</em></a></li>
    <li id="blue"><a href="#"><em>Blue</em></a></li>
    </ul>ul li a
    {
    width: 100px;
    height: 100px;
    display: block;
    }
    ul li a em
    {
    position: relative;
    }
    ul li#red a
    {
    background: url(images/red.gif) bottom center no-repeat;
    }
    ul li#red a:hover
    {
    background-position: top center;
    }
    ul li#red a em
    {
    top: 150px;

    }
     
  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