现在的位置: 首页 > web前端 > 正文

弹出式全屏导航菜单

2020年02月12日 web前端 ⁄ 共 2479字 ⁄ 字号 评论关闭

我们需要在一个有限尺寸的页面上展示多个导航菜单,可以使用下拉菜单、弹出式菜单等等。今天我要给大家演示的是可以使用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 --><p 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></p>

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; } } }});

以上就上有关弹出式全屏导航菜单的相关介绍,要了解更多javascript,HTML5,CSS3内容请登录学步园。

抱歉!评论已关闭.