这是一款效果非常炫酷的jQuery弹性模态窗口导航菜单插件。当一个网站在制作导航菜单时,一般有两种选择:列表形式或模态窗口。该jQuery插件将两者非常完美的结合到了一起,创建了一种带弹性动画效果的模态窗口导航菜单。插件中使用了CSS3 animations 和一些jQuery来制作这种弹性效果的导航菜单。
使用方法
HTML结构
该导航菜单的HTML结构非常简单:使用一个无序列表来制作导航菜单项,它内包裹在一个<nav>
元素中,然后<nav>
元素元素放置在一个div.cd-bouncy-nav-modal
中。
<div class="cd-bouncy-nav-modal">
<nav>
<ul class="cd-bouncy-nav">
<li><a href="#0">Item 1</a></li>
<!-- other list items here -->
</ul>
</nav>
<a href="#0" class="cd-close">Close modal</a>
</div>
CSS样式
在该弹性导航菜单插件中使用了 CSS3 transition 和CSS3 animations。默认情况下,导航菜单是被隐藏在窗口下面的(使用translateY(100vh)
)。当用户点击了.cd-bouncy-nav-trigger
按钮时,.cd-bouncy-nav
元素被添加上class .fade-in
,.cd-bouncy-nav
元素的透明度和可见性都被改变(这里使用CSS3 transitions来制作平滑的过渡效果)。然后使用cd-move-in
来制作导航菜单列表项的动画。
插件中使用CSS animations是为了制作弹性效果,CSS animations可以定义关键帧,这样我们可以灵活的控制动画效果。
为了增加动画效果,插件中使用animation-delay
来为不同的导航菜单列表项添加动画延时。
animation-fill-mode: forwards
是为了再弹性动画结束时,导航菜单列表项不会改变它们的位置(由于不同的animation-delay
值,我们不能直接为列表项设置translateY(0)
)。.cd-bouncy-nav-modal {
position: fixed;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s 0.6s, visibility 0s 0.9s;
}
.cd-bouncy-nav-modal.fade-in {
visibility: visible;
opacity: 1;
transition: opacity 0.1s 0s, visibility 0s 0s;
}
.cd-bouncy-nav li {
transform: translateY(100vh);
}
.fade-in .cd-bouncy-nav li {
animation: cd-move-in 0.4s;
animation-fill-mode: forwards;
}
@keyframes cd-move-in {
0% {
transform: translateY(100vh);
}
65% {
transform: translateY(-1.5vh);
}
100% {
transform: translateY(0vh);
}
}
JAVASCRIPT
该导航菜单插件中使用jQuery来监听.cd-bouncy-nav-trigger
元素(或.cd-close
元素)的点击事件,为它添加相应的.fade-in
/.fade-out
class来打开关闭模态窗口。
jQuery(document).ready(function($){
var is_bouncy_nav_animating = false;
//open bouncy navigation
$('.cd-bouncy-nav-trigger').on('click', function(){
triggerBouncyNav(true);
});
//close bouncy navigation
$('.cd-bouncy-nav-modal .cd-close').on('click', function(){
triggerBouncyNav(false);
});
$('.cd-bouncy-nav-modal').on('click', function(event){
if($(event.target).is('.cd-bouncy-nav-modal')) {
triggerBouncyNav(false);
}
});
function triggerBouncyNav($bool) {
//check if no nav animation is ongoing
if( !is_bouncy_nav_animating) {
is_bouncy_nav_animating = true;
//toggle list items animation
$('.cd-bouncy-nav-modal').toggleClass('fade-in', $bool).toggleClass('fade-out', !$bool).find('li:last-child').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
$('.cd-bouncy-nav-modal').toggleClass('is-visible', $bool);
if(!$bool) $('.cd-bouncy-nav-modal').removeClass('fade-out');
is_bouncy_nav_animating = false;
});
//check if CSS animations are supported...
if($('.cd-bouncy-nav-trigger').parents('.no-csstransitions').length > 0 ) {
$('.cd-bouncy-nav-modal').toggleClass('is-visible', $bool);
is_bouncy_nav_animating = false;
}
}
}
});
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!