https://wiki.stephanschlegel.de/index.php?action=history&feed=atom&title=CSS_Transitions_-_Snippets 2026-05-06T23:28:34Z Versionsgeschichte dieser Seite in Wikizone MediaWiki 1.35.14 https://wiki.stephanschlegel.de/index.php?title=CSS_Transitions_-_Snippets&diff=22336&oldid=prev 2017-05-29T13:19:32Z

<p>Die Seite wurde neu angelegt: „Bootstrap Dropdown mit FadeIn Transition &lt;syntaxhighlight lang=&quot;css&quot;&gt; <span dir="auto"><span class="autocomment">Bootstrap Dropdown Tweak: </span> .dropdown .dropdown-menu{ display: block; opacity…“</span></p> <p><b>Neue Seite</b></p><div>Bootstrap Dropdown mit FadeIn Transition<br /> <br /> &lt;syntaxhighlight lang=&quot;css&quot;&gt;<br /> /* Bootstrap Dropdown Tweak */<br /> .dropdown .dropdown-menu{<br /> display: block;<br /> opacity: 0;<br /> <br /> -moz-transition: all 1000ms ease;<br /> -webkit-transition: all 1000ms ease;<br /> -o-transition: all 1000ms ease;<br /> -ms-transition: all 1000ms ease;<br /> transition: all 1000ms ease;<br /> }<br /> .dropdown:hover .dropdown-menu {<br /> display: block;<br /> opacity: 1;<br /> }<br /> &lt;/syntaxhighlight&gt;<br /> Alternative oder auch Fallback für jQuery (muß noch in eine modernizr Anfrage)<br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> $(function(){<br /> var $menu = $(&#039;.dropdown-menu&#039;);<br /> <br /> $(&#039;.dropdown-toggle&#039;).hover(<br /> function() {<br /> $menu.css(&#039;opacity&#039;,1);<br /> },<br /> function() {<br /> $menu.css(&#039;opacity&#039;,0);<br /> });<br /> })();<br /> &lt;/syntaxhighlight&gt;</div>

37.49.32.84