Home → WordPress →

80/20 Theme Wordpress Menü weich einblenden

• Edit

Lars

28 Nov, 2013 04:26 PM

Hallo,

möchte gerne die Submenüs der horizontale Navigation weich einblenden lassen. Alle Versuche mittels CSS3 (transition: opacity) sind leider gescheitert.

Wie kann ich die Menüs weich einblenden lassen oder auch ausklappen?

Viele Grüße
Lars

1. Support Staff 1 Posted by RockSolid Theme... on 29 Nov, 2013 09:10 AM

   

   Vielen Dank für Ihre Frage.

   Ihre Frage betrifft eine individuelle Anpassung. In unseren Support-Richtlinien weisen wir darauf hin, dass wir leider keine Hilfe bei Umbauten leisten können. Dennoch versuchen wir Ihnen, in diesem Fall, im Rahmen unserer Möglichkeiten weiterzuhelfen:

   Das Kernproblem bei diesem Fall ist, dass sich die display Eigenschaft nicht animieren lässt (mit Transitions). Die Opacity-Eigenschaft ist ebenso wenig geeignet, weil sich unter dem Dropdown liegende Inhalte nicht mehr richtig anklicken lassen würden. Eine Möglichkeit wäre die maximale Höhe zu animieren (denn die Höhe lässt sich nicht auf auto animieren).

   Beispiel:
   

   #nav-main > ul > li > ul {
       display: block;
       max-height: 0;
       overflow: hidden;
       padding: 0;
       opacity: 0;
       -webkit-transition: max-height 0, padding 0, opacity 0.3s;
       -webkit-transition-delay: 0.3s, 0.3s, 0s;
       -moz-transition: max-height 0 0.3s, padding 0 0.3s, opacity 0.3s;
       -o-transition: max-height 0 0.3s, padding 0 0.3s, opacity 0.3s;
       transition: max-height 0 0.3s, padding 0 0.3s, opacity 0.3s;
   }
   #nav-main > ul > li:hover > ul {
       max-height: 9999px;
       padding: 1em;
       opacity: 1;
       -webkit-transition: opacity 0.2s;
       -moz-transition: opacity 0.2s;
       -o-transition: opacity 0.2s;
       transition: opacity 0.2s;
   }
   

   Wenn Sie die Höhe ebenfalls animieren möchten, müssen Sie die max-height ebenfalls animieren und der Höhe Ihres Dropdown annähern (statt 9999px). Alternativ können Sie auf CSS-Animations setzen – damit lassen sich alle Eigenschaften animieren, allerdings ist der Browser-Support etwas eingeschränkter.

   Bitte beachten Sie, dass wir zu diesem Thema keine weiteren Fragen beantworten werden.

   • Edit

2. 2 Posted by lars-email on 30 Nov, 2013 07:24 AM

   
   Ganz vielen Dank für ihre Unterstützung

    

   Nachdem ihr CSS Beispiel zuerst ebenfalls nicht funktionierte habe ich es einmal mit dem Browser IE10 und Chrome probiert und siehe da, hier geht alles reibungslos.

   Nur der Firefox (Version 25.0.1) macht Probleme, vermutlich ein Bug von Firefox.

    

   Viele Grüße

   Lars

    

   Gesendet: Freitag, 29. November 2013 um 10:10 Uhr
   Von: "RockSolid Themes" <[email blocked]>
   An: "[email blocked]" <[email blocked]>
   Betreff: 80/20 Theme Wordpress Menü weich einblenden [WordPress]

   // Please reply above this line
   ==================================================
   From: RockSolid Themes (Support staff)
   Subject: 80/20 Theme Wordpress Menü weich einblenden
   
   Vielen Dank für Ihre Frage.
   
   Ihre Frage betrifft eine individuelle Anpassung. In unseren
   [Support-Richtlinien](http://rocksolidthemes.com/support-richtlinien) weisen wir darauf hin,
   dass wir leider keine Hilfe bei Umbauten leisten können. Dennoch versuchen
   wir Ihnen, in diesem Fall, im Rahmen unserer Möglichkeiten weiterzuhelfen:
   
   Das Kernproblem bei diesem Fall ist, dass sich die `display` Eigenschaft
   nicht animieren lässt (mit Transitions). Die Opacity-Eigenschaft ist ebenso
   wenig geeignet, weil sich unter dem Dropdown liegende Inhalte nicht mehr
   richtig anklicken lassen würden. Eine Möglichkeit wäre die maximale Höhe zu
   animieren (denn die Höhe lässt sich nicht auf `auto` animieren).
   
   Beispiel:
   ```
   #nav-main > ul > li > ul {
   display: block;
   max-height: 0;
   overflow: hidden;
   padding: 0;
   opacity: 0;
   -webkit-transition: max-height 0, padding 0, opacity 0.3s;
   -webkit-transition-delay: 0.3s, 0.3s, 0s;
   -moz-transition: max-height 0 0.3s, padding 0 0.3s, opacity 0.3s;
   -o-transition: max-height 0 0.3s, padding 0 0.3s, opacity 0.3s;
   transition: max-height 0 0.3s, padding 0 0.3s, opacity 0.3s;
   }
   #nav-main > ul > li:hover > ul {
   max-height: 9999px;
   padding: 1em;
   opacity: 1;
   -webkit-transition: opacity 0.2s;
   -moz-transition: opacity 0.2s;
   -o-transition: opacity 0.2s;
   transition: opacity 0.2s;
   }
   ```
   
   Wenn Sie die Höhe ebenfalls animieren möchten, müssen Sie die
   `max-height` ebenfalls animieren und der Höhe Ihres Dropdown annähern (statt 999px).
   Alternativ können Sie auf CSS-Animations setzen – damit lassen sich alle
   Eigenschaften animieren, allerdings ist der Browser-Support etwas
   eingeschränkter.
   
   Bitte beachten Sie, dass wir zu diesem Thema keine weiteren Fragen
   beantworten werden.
   
   
   
   View this discussion at our support site online:
   http://help.rocksolidthemes.com/discussions/wordpress/868-8020-theme-wordpress-men-weich-einblenden
   
   
   --
   
   RockSolid Themes
   MADE/YOUR/DAY OG
   5323 Ebenau
   Ebenau 1
   Austria
   
   [email blocked]
   http://rocksolidthemes.com
   
   ---
   
   Reply with #ignore to stop receiving notifications for this discussion.
    
   • Edit