tag:help.rocksolidthemes.com,2012-07-23:/discussions/wordpress/868-8020-theme-wordpress-men-weich-einblendenRockSolid Themes: Discussion 2013-12-02T07:44:23Ztag:help.rocksolidthemes.com,2012-07-23:Comment/302538042013-11-29T09:10:39Z2013-11-29T09:11:29Z80/20 Theme Wordpress MenĂ¼ weich einblenden<div><p>Vielen Dank für Ihre Frage.</p>
<p>Ihre Frage betrifft eine individuelle Anpassung. In unseren
<a href=
"http://rocksolidthemes.com/support-richtlinien">Support-Richtlinien</a>
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:</p>
<p>Das Kernproblem bei diesem Fall ist, dass sich die
<code>display</code> 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 <code>auto</code> animieren).</p>
<p>Beispiel:<br></p>
<pre>
<code>#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;
}</code>
</pre>
<p>Wenn Sie die Höhe ebenfalls animieren möchten,
müssen Sie die <code>max-height</code> 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.</p>
<p>Bitte beachten Sie, dass wir zu diesem Thema keine weiteren
Fragen beantworten werden.</p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/302538042013-11-30T07:24:37Z2013-11-30T15:29:12Z80/20 Theme Wordpress MenĂ¼ weich einblenden<div><div>
<div>
<div>Ganz vielen Dank für ihre Unterstützung</div>
<div> </div>
<div>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.</div>
<div>Nur der Firefox (Version 25.0.1) macht Probleme, vermutlich
ein Bug von Firefox.</div>
<div> </div>
<div>Viele Grüße</div>
<div>Lars</div>
<div>
<div name="quote">
<div><b>Gesendet:</b> Freitag, 29. November 2013 um 10:10
Uhr<br>
<b>Von:</b> "RockSolid Themes"
<tender2+d8c669e373b82bb1bd3d47ce247678e80b44da8c1@tenderapp.com><br>
<b>An:</b> "lars-email@gmx.de" <lars-email@gmx.de><br>
<b>Betreff:</b> 80/20 Theme Wordpress Menü weich
einblenden [WordPress]</div>
<div name="quoted-content">// Please reply above this line<br>
==================================================<br>
From: RockSolid Themes (Support staff)<br>
Subject: 80/20 Theme Wordpress Menü weich einblenden<br>
<br>
Vielen Dank für Ihre Frage.<br>
<br>
Ihre Frage betrifft eine individuelle Anpassung. In unseren<br>
[Support-Richtlinien](<a href=
"http://rocksolidthemes.com/support-richtlinien">http://rocksolidthemes.com/support-richtlinien</a>)
weisen wir darauf hin,<br>
dass wir leider keine Hilfe bei Umbauten leisten können.
Dennoch versuchen<br>
wir Ihnen, in diesem Fall, im Rahmen unserer Möglichkeiten
weiterzuhelfen:<br>
<br>
Das Kernproblem bei diesem Fall ist, dass sich die `display`
Eigenschaft<br>
nicht animieren lässt (mit Transitions). Die
Opacity-Eigenschaft ist ebenso<br>
wenig geeignet, weil sich unter dem Dropdown liegende Inhalte nicht
mehr<br>
richtig anklicken lassen würden. Eine Möglichkeit
wäre die maximale Höhe zu<br>
animieren (denn die Höhe lässt sich nicht auf `auto`
animieren).<br>
<br>
Beispiel:<br>
```<br>
#nav-main > ul > li > ul {<br>
display: block;<br>
max-height: 0;<br>
overflow: hidden;<br>
padding: 0;<br>
opacity: 0;<br>
-webkit-transition: max-height 0, padding 0, opacity 0.3s;<br>
-webkit-transition-delay: 0.3s, 0.3s, 0s;<br>
-moz-transition: max-height 0 0.3s, padding 0 0.3s, opacity
0.3s;<br>
-o-transition: max-height 0 0.3s, padding 0 0.3s, opacity 0.3s;<br>
transition: max-height 0 0.3s, padding 0 0.3s, opacity 0.3s;<br>
}<br>
#nav-main > ul > li:hover > ul {<br>
max-height: 9999px;<br>
padding: 1em;<br>
opacity: 1;<br>
-webkit-transition: opacity 0.2s;<br>
-moz-transition: opacity 0.2s;<br>
-o-transition: opacity 0.2s;<br>
transition: opacity 0.2s;<br>
}<br>
```<br>
<br>
Wenn Sie die Höhe ebenfalls animieren möchten,
müssen Sie die<br>
`max-height` ebenfalls animieren und der Höhe Ihres Dropdown
annähern (statt 999px).<br>
Alternativ können Sie auf CSS-Animations setzen – damit
lassen sich alle<br>
Eigenschaften animieren, allerdings ist der Browser-Support
etwas<br>
eingeschränkter.<br>
<br>
Bitte beachten Sie, dass wir zu diesem Thema keine weiteren
Fragen<br>
beantworten werden.<br>
<br>
<br>
<br>
View this discussion at our support site online:<br>
<a href=
"http://help.rocksolidthemes.com/discussions/wordpress/868-8020-theme-wordpress-men-weich-einblenden">
http://help.rocksolidthemes.com/discussions/wordpress/868-8020-theme-wordpress-men-weich-einblenden</a><br>
<br>
<br>
--<br>
<br>
RockSolid Themes<br>
MADE/YOUR/DAY OG<br>
5323 Ebenau<br>
Ebenau 1<br>
Austria<br>
<br>
support@rocksolidthemes.com<br>
<a href=
"http://rocksolidthemes.com">http://rocksolidthemes.com</a><br>
<br>
---<br>
<br>
Reply with #ignore to stop receiving notifications for this
discussion.<br>
</div>
</div>
</div>
</div>
</div></div>lars-email