当前位置:主页 > 网页特效 > 菜单导航 >

jQuery和CSS3全屏推拉式滑动菜单特效

发布时间:2018/07/04 来源:互联网 浏览: 关键词:jquery CSS3 菜单导航 滑动菜单 
jQuery和CSS3全屏推拉式滑动菜单特效 jQuery和CSS3全屏推拉式滑动菜单特效
阿里云

简要教程

这是一款效果非常炫酷的jQuery和CSS3全屏推拉式滑动菜单特效插件。这个插件的效果是当点击了主菜单按钮时,全屏菜单从屏幕左侧滑出,主菜单按钮动态旋转更换图标。当再次点击主菜单按钮时,全屏菜单又从右向左滑会去。

下面是一张描述这个过程的动态gif图片:

jquery和css3全屏菜单效果

HTML结构

该全屏滑动菜单的HTML结构分为三个部分:包含可见内容的<main>元素,一个用于包含全屏导航菜单的div.cd-nav和一个用于触发事件的按钮.cd-nav-trigger。

.cd-nav中包含两个div.cd-half-block元素:第一个是包含菜单导航项的.cd-primary-nav,第二个是联系方式的内容.cd-contact-info。

<divid="cd-nav"class="cd-nav">
    <divclass="cd-navigation-wrapper">
        <divclass="cd-half-block">
            <h2>Navigation</h2>
  
            <nav>
                <ulclass="cd-primary-nav">
                    <li><ahref="#0"class="selected">The team</a></li>
                    <!-- list items here -->
                </ul>
            </nav>
        </div><!-- .cd-half-block -->
         
        <divclass="cd-half-block">
            <address>
                <ulclass="cd-contact-info">
                    <li><ahref="mailto:info@myemail.co">info@myemail.co</a></li>
                    <!-- other contact info here -->
                </ul>
            </address>
        </div><!-- .cd-half-block -->
    </div><!-- .cd-navigation-wrapper -->
</div><!-- .cd-nav -->        

在.cd-nav-trigger中包含一个span.cd-nav-icon,它用于创建按钮的汉堡包图标,它本身是汉堡包中间的那条线,而它的::before和::after伪元素分别用于创建上面和下面的线。还包含一个SVG元素,它用于创建图标的动画。

CSS样式

当用户点击.cd-nav-trigger主菜单按钮时,会在<body>元素上添加.navigation-is-open class。这个class会触发主菜单按钮动画和全屏菜单的滑动动画。

对于主菜单按钮的动画可以分为三个部分:

  • 汉堡包图标被转换为箭头图标:.cd-nav-icon::after和.cd-nav-icon::before伪元素分别旋转45度和-45度,并使它们的宽度增加50%。
  • 将.cd-nav-icon旋转180度。
  • 图标上的圆形进度条效果:开始的时候,图标的边框属性值为stroke-dasharray="157 157"和stroke-dashoffset="157",157是圆周的值。动画开始后,stroke-dashoffset的值被设置为0。

主按钮图标的每一步动画都使用CSS3 Transitions来使动画效果平滑过渡。

下面是这个动画过程的gif动态示意图:

jquery和css3全屏菜单主按钮动画效果

.cd-nav-trigger {
  transition: transform0.5s;
}
.navigation-is-open .cd-nav-trigger {
  /* rotate trigger when navigation becomes visible */
  transform:rotate(180deg);
}
.cd-nav-trigger .cd-nav-icon::before,
.cd-nav-trigger .cd-nav-icon:after {
  /* upper and lower lines of the menu icon */
  width:100%;
  height:100%;
  transition: transform0.5s, width0.5s,top0.3s;
}
.cd-nav-trigger .cd-nav-icon::before {
  transform-origin:righttop;
  transform:translateY(-6px);
}
.cd-nav-trigger .cd-nav-icon::after {
  transform-origin:rightbottom;
  transform:translateY(6px);
}
.navigation-is-open .cd-nav-trigger .cd-nav-icon::after,
.navigation-is-open .cd-nav-trigger .cd-nav-icon::before {
  /* animate arrow --> from hamburger to arrow */
  width:50%;
  transition: transform0.5s, width0.5s;
}
.navigation-is-open .cd-nav-trigger .cd-nav-icon::before {
  transform:rotate(45deg);
}
.navigation-is-open .cd-nav-trigger .cd-nav-icon::after {
  transform:rotate(-45deg);
}
.cd-nav-triggercircle{
  /* circle border animation */
  transition: stroke-dashoffset0.4s0s;
}
.navigation-is-open .cd-nav-triggercircle{
  stroke-dashoffset:0;
  transition: stroke-dashoffset0.4s0.3s;
}   

对于全屏菜单的滑动进入屏幕的效果,<main>元素和.cd-navigation-wrapper元素都在X轴上translate100%的距离。为了制作更为逼真的推拉效果,插件中的transition时间函数使用的是cubic bezier curve,这个函数曲线允许你设置4个参数(曲线两端分别有两个控制点),可以通过调整这些控制点来定制transition时的动画效果。

下图中展示了你设置自定义cubic-bezier timing functions和线性(linear)动画的区别:

cubic-bezier timing曲线

JAVASCRIPT

该全屏推拉式滑动菜单使用jQuery来监听主菜单按钮的点击事件,并为相应的元素添加或移除.navigation-is-openclass。

jQuery(document).ready(function($){
    varisLateralNavAnimating =false;
     
    //open/close lateral navigation
    $('.cd-nav-trigger').on('click',function(event){
        event.preventDefault();
        //stop if nav animation is running
        if( !isLateralNavAnimating ) {
            if($(this).parents('.csstransitions').length > 0 ) isLateralNavAnimating =true;
             
            $('body').toggleClass('navigation-is-open');
            $('.cd-navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
                //animation is over
                isLateralNavAnimating =false;
            });
        }
    });
});  

共有人阅读,期待你的评论!评论
Top