CSS Transitions - Snippets
Aus Wikizone
Version vom 29. Mai 2017, 14:19 Uhr von 37.49.32.84 (Diskussion) (Die Seite wurde neu angelegt: „Bootstrap Dropdown mit FadeIn Transition <syntaxhighlight lang="css"> →Bootstrap Dropdown Tweak: .dropdown .dropdown-menu{ display: block; opacity…“)
Bootstrap Dropdown mit FadeIn Transition
/* Bootstrap Dropdown Tweak */
.dropdown .dropdown-menu{
display: block;
opacity: 0;
-moz-transition: all 1000ms ease;
-webkit-transition: all 1000ms ease;
-o-transition: all 1000ms ease;
-ms-transition: all 1000ms ease;
transition: all 1000ms ease;
}
.dropdown:hover .dropdown-menu {
display: block;
opacity: 1;
}
Alternative oder auch Fallback für jQuery (muß noch in eine modernizr Anfrage)
$(function(){
var $menu = $('.dropdown-menu');
$('.dropdown-toggle').hover(
function() {
$menu.css('opacity',1);
},
function() {
$menu.css('opacity',0);
});
})();