Die Auswahl des übergeordneten Menüs sollte das untergeordnete Menü anzeigen

Lesezeit: 2 Minuten

Die Auswahl des ubergeordneten Menus sollte das untergeordnete Menu anzeigen
Rizwan Taj

Speisekarte

Ich entwickle eine WordPress-Site und versuche, mein Menü wie im Bild gezeigt anzuzeigen. Wie kann ich das Untermenü anzeigen, wenn das übergeordnete Menü ausgewählt ist?

  • bis jetzt habe ich es mit css #catmenus ul li.current-menu-item a:hover > ul li { display:block !important;} versucht, aber das funktioniert nicht

    – Rizwan Taj

    22. Februar 2012 um 9:57 Uhr

Sie können Ihre Haupt-Top-Links so mit sekundären verschachtelten erstellen

<ul class="primary">
   <li>Tutorial</li>
      <ul class="secondary">
         <li>Photoshop</li>
         <li>Illustrator</li>
         <li>Flash</li>
         <li>HTML</li>
         <li>PHP</li>
         <li>Wordpress</li>
         <li>jQuery</li>
         <li>more...</li>
      </ul>
   <li>Wallpaper</li>
   <li>Get A Quote</li>
   <li>Photography</li>
   <li>Freelance</li>
</ul>

dann wäre Ihr Styling so (dies verwendet nur CSS3, nicht JS)

<style>
   ul.primary {
      width: -- ;
      height: -- ;
      margin: -- ;
      overflow: hidden;
   }

   ul.primary > li {
      width: -- ;
      height: -- ;
      margin: -- ;
      float: left;
      list-style: none;
   }

   ul.seconday {
      opacity: 0;
      width: -- ;
      height: -- ;
      margin: -- ; /* when this is used with position: relative you can adjust where the drop down is placed. */
      position: relative; /* need to set this to relative to position properly */

      /* css3 transition */
      transition: all .5s ease-in;
      -webkit-transition: all .5s ease-in;
      -moz-transition: all .5s ease-in;
      -ms-transition: all .5s ease-in;
      -o-transition: all .5s ease-in;
   }

   ul.primary > li:hover ul.secondary {
      opacity: 1;
   }
</style>

  • und wenn Sie versuchen, jedes Untermenü anzuzeigen, je nachdem, auf welcher Seite Sie sich befinden, müssen Sie eine Klasse an das Body-Tag pro Seite anhängen (WordPress macht dies automatisch) und dann den obigen Code korrigieren, um jedes auf bestimmten Seiten anzuzeigen.

    – Jake Chapman

    22. Februar 2012 um 9:54 Uhr

1004150cookie-checkDie Auswahl des übergeordneten Menüs sollte das untergeordnete Menü anzeigen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy