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

jQuery和CSS3超酷3D页面切换导航菜单插件

发布时间:2018/07/25 来源:互联网 浏览: 关键词:jquery 菜单导航 CSS3 3D 
jQuery和CSS3超酷3D页面切换导航菜单插件 jQuery和CSS3超酷3D页面切换导航菜单插件
阿里云

简要教程

这是一款效果非常酷的jQuery和CSS3 3D页面切换导航菜单特效插件。该导航菜单插件是汉堡包隐藏菜单,每个菜单项的图标使用SVG来制作,鼠标滑过图标时有动画效果,点击某一个菜单项后,页面会在3D空间进行切换,效果非常炫酷。

插件中为了使页面加载时用户能更注意导航菜单的存在,将页面的内容沿Z轴往里面缩小,这里使用的是CSS transformations,而不是使用3D translations,但是得到的结果是一样的。

当你选择了某个菜单项,插件会切换页面的颜色为该菜单项的背景颜色。

制作方法

HTML结构

该导航菜单插件的HTML结构分为三个部分:.cd-nav-trigger是用于触发隐藏菜单的汉堡包图标按钮。.cd-section包含了页面中的主要内容。.cd-nav-container是导航菜单。

<ahref="#cd-nav"class="cd-nav-trigger">
  Menu<span><!-- used to create the menu icon --></span>
</a><!-- .cd-nav-trigger -->
  
<main>
  <sectionclass="cd-section index cd-selected">
    <header>
      <divclass="cd-title">
        <h2><!--  title here  --></h2>
        <p><!--  brief description here  --></p>
      </div><!-- .cd-title -->
    </header>
  
    <divclass="cd-content">
      <!-- your content here -->
    </div>
  </section><!-- .cd-section -->
</main>
  
<navclass="cd-nav-container"id="cd-nav">
  <header>
    <h3>Navigation</h3>
    <ahref="#0"class="cd-close-nav">Close</a>
  </header>
  
  <ulclass="cd-nav">
    <liclass="cd-selected"data-menu="index">
      <ahref="index.html">
        <span>
          <!-- svg icon here -->
        </span>
  
        <em><!--  title here  --></em>
      </a>
    </li>
  
    <lidata-menu="projects">
      <!-- .... -->
    </li>
  
    <!-- other list items here -->
  </ul><!-- .cd-3d-nav -->
</nav>       

代码最后额外的div.cd-overlay元素是用来制作阴影层,它只有在导航菜单显示时才可见。

CSS样式

为了实现动画效果,插件在<main>元素和<nav>元素中分别使用了 CSS3 Transformations。默认情况下,导航菜单位置是固定的,并且并放置在页面的右边,在屏幕的可视区域之外(使用translateX(100%))。当用户点击了导航菜单按钮,<nav>元素被添加class .is-visible,这个class 会使用translateX(0)将导航菜单移入屏幕中。同时,<main>元素会被添加class .scale-down,该class会将<main>元素缩小一些(scale(.9))。以上这些动画都使用 CSS3 Transitions 来制作平滑的过渡效果。

.cd-nav-container {
  position:fixed;
  top:0;
  right:0;
  width:80%;
  height:100%;
  transform:translateX(100%);
  transition: transform0.4s;
}
.cd-nav-container.is-visible{
  transform:translateX(0);
}
  
main {
  transition: transform0.4s;
}
main.scale-down {
  transform:scale(0.9);
}   

当用户从导航菜单中选择一个菜单项时,会创建一个新的.cd-section元素,并插入到DOM中。

接着,.cd-selected class会被添加到.cd-section元素上,这时,旧的.cd-section元素会被移除。新的.cd-section元素(它初始化时被移到右侧的屏幕之外)将被使用(translateX(0)移回屏幕之内,并覆盖旧的内容(z-index: 2)。

注意:你不会看见旧的section移动到右边的动画,因为插件中为.cd-section为transformations设置了transition延时0.4秒。

.cd-section {
  position:absolute;
  z-index:1;
  top:0;
  left:0;
  height:100%;
  width:100%;
  overflow-y:auto;
  transform:translateX(100%);
  transition: transform0s0.4s;
}
.cd-section.cd-selected {
  position:relative;
  z-index:2;
  transform:translateX(0);
  transition: transform0.4s0s;
}  

JAVASCRIPT

index.html页面只包含了简介的内容,其它页面的HTML结构基本相同,但是.cd-section的内容略有不同。

当用户从导航菜单中旋转了一个新的菜单项时,插件通过loadNewContent方法创建一个新的<section>元素并插入DOM中。

然后使用load()方法来调用指定的内容(这里使用一个data-menu属性来决定哪个页面的内容被调用)。

当一个HTML页面的内容被调用的时候,新的section会被添加class .cd-selected,并且关闭导航菜单。

$('.cd-nav li').on('click',function(event){
  event.preventDefault();
  vartarget = $(this),
    //detect which section user has chosen
    sectionTarget = target.data('menu');
  if( !target.hasClass('cd-selected') ) {
    //if user has selected a section different from the one alredy visible
    //update the navigation -> assign the .cd-selected class to the selected item
    target.addClass('cd-selected').siblings('.cd-selected').removeClass('cd-selected');
    //load the new section
    loadNewContent(sectionTarget);
  }else{
    // otherwise close navigation
    toggleNav(false);
  }
});
functionloadNewContent(newSection) {
  //create a new section element and insert it into the DOM
  varsection = $('<section class="cd-section '+newSection+'"></section>').appendTo($('main'));
  //load the new content from the proper html file
  section.load(newSection+'.html .cd-section > *',function(event){
    //add the .cd-selected to the new section element -> it will cover the old one
    section.addClass('cd-selected').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
      //close navigation
      toggleNav(false);
    });
    section.prev('.cd-selected').removeClass('cd-selected');
  });
  
  $('main').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
    //once the navigation is closed, remove the old section from the DOM
    section.prev('.cd-section').remove();
  });
  
  if( $('.no-csstransitions').length > 0 ) {
    //detect if browser supports transitions
    toggleNav(false);
    section.prev('.cd-section').remove();
  }
}    

提示:插件中只是使用load()函数来实现简单的页面加载功能,你可以通过$.ajax来异步调用页面,处理页面加载前的事件或错误内容提示等等。

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