大佬教程收集整理的这篇文章主要介绍了如何使用CSS3动画动画下拉菜单?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用Animate.css的CSS3效果.
我试过这个,但不行.
HTML
<a href="#" data-dropdown="dropdownalerts" data-options="is_hover:true"><%=fa_icon "bell"%></a> <ul id="dropdownalerts" class="f-dropdown text-left animated bounceInDown" data-dropdown-content> <li><%=link_to "Facebook","#"%></li> <li><%=link_to "Email","#" %></li> </ul>
JS
$(document).ready(function(){ $('a').hover(function(){ $("ul").addClass('animated bounceInDown'); }); });
您可以在Zapping.io上找到一个实时版本
jsFiddle example here – 悬停方式
jQuery的
$(document).ready(function(){ $('a').hover(function() { $("ul").addClass('animated bounceInDown'); },function(){ $("ul").removeClass('animated bounceInDown'); }); });
如果要在悬停时添加延迟,请使用以下内容:
jsFiddle example – 悬停方式延时.
$(document).ready(function(){ $('a').hover(function() { $("ul").addClass('animated bounceInDown'); },function(){setTimeout(function(){ $("ul").removeClass('animated bounceInDown'); },750);}); });
这些例子假设你想要在悬停上触发动画.如果您希望在点击时触发,请改用:
jsFiddle example点击方法 – 查看下面的替代非JS方法.
$(document).ready(function(){ $('a').click(function() { $("ul").toggleClass('animated bounceInDown'); }); });
替代方法 – 没有JS / jQuery
如果您不想使用JavaScript / jQuery,可以使用CSS中的复选框.
这实际上是在以下之间切换:选中,从而激活动画.
jsFiddle example – 它适用于所有当前的浏览器.
HTML
<label id="click" for="dropdown">Click here</label> <input style="display:none" type="checkbox" id="dropdown"> <ul id="dropdownalerts" class="f-dropdown text-left" data-dropdown-content> <li>Facebook</li> <li>Email</li> </ul>
CSS – (只是其中的一部分)请参阅上面的示例以获取完整的CSs.
input[type=checkbox]:checked ~ #dropdownalerts { display:inline-block; -webkit-animation: bounceInDown 1s both; -moz-animation: bounceInDown 1s both; -o-animation: bounceInDown 1s both; animation: bounceInDown 1s both; }
以上是大佬教程为你收集整理的如何使用CSS3动画动画下拉菜单?全部内容,希望文章能够帮你解决如何使用CSS3动画动画下拉菜单?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。