弹出式全屏导航菜单

我们需要在一个有限尺寸的页面上展示多个导航菜单，可以使用下拉菜单，弹出式菜单等等。今天我要给大家演示的是可以使用CSS动画和jQuery的来实现的弹出式全屏导航菜单效果。

_ECSHOP演示查看                             下载源码

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的过渡动画效果，默认情况下，菜单是隐藏的，点击当.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'