弹出式全屏导航菜单
source link: https://www.helloweba.net/javascript/566.html?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
我们需要在一个有限尺寸的页面上展示多个导航菜单,可以使用下拉菜单、弹出式菜单等等。今天我要给大家演示的是可以使用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="#0">点击查看分类</a> </section> <!-- .cd-section --> <div class="cd-bouncy-nav-modal"> <nav> <ul class="cd-bouncy-nav"> <li><a href="#0">Category 1</a></li> <li><a href="#0">Category 2</a></li> <li><a href="#0">Category 3</a></li> <li><a href="#0">Category 4</a></li> <li><a href="#0">Category 5</a></li> <li><a href="#0">Category 6</a></li> </ul> </nav> <a href="#0" 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; } } } });
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK