我们需要在一个有限尺寸的页面上展示多个导航菜单,可以使用下拉菜单、弹出式菜单等等。今天我要给大家演示的是可以使用CSS动画和jQuery来实现的弹出式全屏导航菜单效果。
HTML
在HTML结构中,我们需要一个触发菜单的按钮,如:.cd-bouncy-nav-trigger
就是一个用来触发弹出式菜单的按钮。
.cd-bouncy-nav-modal
是一个弹出模态窗口,默认隐藏。它用来全屏展示菜单列表,当然也有关闭按钮.cd-close
。
<section class="cd-section">
<a class="cd-bouncy-nav-trigger" href="https://zhishitu.com">点击查看分类</a>
</section> <!-- .cd-section -->
<div class="cd-bouncy-nav-modal">
<nav>
<ul class="cd-bouncy-nav">
<li><a href="https://zhishitu.com">Category 1</a></li>
<li><a href="https://zhishitu.com">Category 2</a></li>
<li><a href="https://zhishitu.com">Category 3</a></li>
<li><a href="https://zhishitu.com">Category 4</a></li>
<li><a href="https://zhishitu.com">Category 5</a></li>
<li><a href="https://zhishitu.com">Category 6</a></li>
</ul>
</nav>
<a href="https://zhishitu.com" class="cd-close">Close modal</a>
</div>
知识兔CSS
我们使用CSS3的transitions动画效果,默认情况下,菜单是隐藏的,当点击.cd-bouncy-nav-trigger
按钮后,.fade-in
添加到.cd-bouncy-nav
中,设置它的透明度和可见性。
.cd-move-in
用来设置菜单项的动画效果。
.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
的点击事件,以及控制.fade-in
/.fade-out
样式的添加和删除操作。
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;
}
}
}
});
知识兔