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

jQuery和css3超酷顶部隐藏菜单3d旋转显示特效

发布时间:2018/07/02 来源:互联网 浏览: 关键词:jquery CSS3 3D 菜单导航 旋转 
jQuery和css3超酷顶部隐藏菜单3d旋转显示特效 jQuery和css3超酷顶部隐藏菜单3d旋转显示特效
阿里云

简要教程

这是一款效果炫酷的jQuery和css3顶部隐藏菜单3d旋转显示特效插件。关于如何制作一些有创意的导航栏效果大家都各有想法。在这款插件中使用了3d旋转的方式来显示隐藏的顶部菜单,效果非常的酷。

这个插件的灵感来自于 Taasky 。它是一个IOS app的侧边栏导航效果。你也可以在 dribbble 找到它。

插件中的使用的svg icons来自于Vlad Cristea,你可以在GraphicBurger免费下载它们。

HTML

使用<header>元素包住logo和用于触发显示导航栏的按钮。在<main>标签中你可以放置你的页面内容。顶部导航栏将使用无序列表制作,使用<nav>标签将它包住。

<headerclass="cd-header">
    <ahref="#0"class="cd-logo"><imgsrc="img/cd-logo.svg"alt="Logo"></a>
    <ahref="#0"class="cd-3d-nav-trigger">Menu<span></span></a>
</header>
<main>
    <!-- all your content here -->
</main>
<navclass="cd-3d-nav-container">
    <ulclass="cd-3d-nav">
        <liclass="cd-selected">
            <ahref="#0">Dashboard</a>
        </li>
        <!-- other list items here -->
    </ul>
    <spanclass="cd-marker color-1"></span><!-- marker for the selected navigation item -->
</nav>

CSS

插件中使用CSS3 Transformations来完成顶部导航栏的3d旋转动画。

让我们通过一种gif图片来看看这个过程:

顶部导航栏3d旋转效果

开始时,我们通过设置translateY(-100%)和visibility(hidden)将顶部导航栏隐藏,同时无序列表将被旋转(rotateX(90deg)和 transform-origin: bottom center)。当用户点击了触发按钮,.nav-is-visible class被添加到“main”、“header”和“nav”元素中。.cd-3d-nav被旋转回0度。并且使用CSS3 Transitions来使动画平滑过渡。

.cd-header {
  transition: transform0.5s;
}
.cd-header.nav-is-visible{
  transform:translateY(80px);
}
.cd-3d-nav-container {
  /* this is the 3D navigation container */
  position:fixed;
  top:0;
  left:0;
  visibility:hidden;
  /* enable a 3D-space for children elements */
  perspective:1000px;
  transform:translateY(-100%);
  transition: transform0.5s0s, visibility0s0.5s;
}
.cd-3d-nav-container.nav-is-visible{
  visibility:visible;
  transform:translateY(0);
  transition: transform0.5s0s, visibility0.5s0s;
}
.cd-3d-nav {
  /* this is the 3D rotating navigation */
  transform-origin:centerbottom;
  transform:rotateX(90deg);
  transition: transform0.5s;
}
main {
  transition: transform0.5s;
}
main.nav-is-visible{
  transform:translateY(80px);
}

span .cd-marker被用来作为导航栏下面的滑动指示条。为了改变标记的颜色,我们创建了.color-n class。这些class用于改变.cd-marker的颜色。由于我们设置background-color : currentColor,因此改变这个颜色也会改变背景颜色。另外,我们为 .cd-marker::before元素设置border-bottom-color: inherit,这会使这些元素随父元素的颜色一起变化。

.cd-marker{
  background-color: currentColor;
}
.cd-marker::before {
    /* triangle at the bottom of nav selected item */
    height:0;
    width:0;
    border:10pxsolidtransparent;
    border-bottom-color: inherit;
}
/* these are the colors of the markers - line + arrow */
.color-1{
  color:#9a57bd;
}
.color-2{
  color:#c96aa4;
}
/* other classes here */

JAVASCRIPT

我们使用jQuery来在用户点击触发按钮时添加、移除.nav-is-visible class。另外,当用户选择一个菜单项,span.cd-marker的位置将被改变,所以要使它和被选择的项左对齐,还有添加 .color-n 来改变它的背景色。

jQuery(document).ready(function($){
    //toggle 3d navigation
    $('.cd-3d-nav-trigger').on('click',function(){
        toggle3dBlock(!$('.cd-header').hasClass('nav-is-visible'));
    });
 
    //select a new item from the 3d navigation
    $('.cd-3d-nav a').on('click',function(){
        varselected = $(this);
        selected.parent('li').addClass('cd-selected').siblings('li').removeClass('cd-selected');
        updateSelectedNav('close');
    });
 
    $(window).on('resize',function(){
        window.requestAnimationFrame(updateSelectedNav);
    });
 
    functiontoggle3dBlock(addOrRemove) {
        if(typeof(addOrRemove)==='undefined') addOrRemove =true;  
        $('.cd-header').toggleClass('nav-is-visible', addOrRemove);
        $('main').toggleClass('nav-is-visible', addOrRemove);
        $('.cd-3d-nav-container').toggleClass('nav-is-visible', addOrRemove);
    }
 
    //this function update the .cd-marker position
    functionupdateSelectedNav(type) {
        varselectedItem = $('.cd-selected'),
            selectedItemPosition = selectedItem.index() + 1,
            leftPosition = selectedItem.offset().left,
            backgroundColor = selectedItem.data('color');
 
        $('.cd-marker').removeClassPrefix('color').addClass('color-'+ selectedItemPosition).css({
            'left': leftPosition,
        });
        if( type =='close') {
            $('.cd-marker').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
                toggle3dBlock(false);
            });
        }
    }
 
    $.fn.removeClassPrefix =function(prefix) {
        this.each(function(i, el) {
            varclasses = el.className.split(" ").filter(function(c) {
                returnc.lastIndexOf(prefix, 0) !== 0;
            });
            el.className = $.trim(classes.join(" "));
        });
        returnthis;
    };
});

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top