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

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

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

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

制作方法

HTML结构

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

Menu

Navigation

Close

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

CSS样式

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

.cd-nav-container {

position: fixed;

top: 0;

right: 0;

width: 80%;

height: 100%;

transform: translateX(100%);

transition: transform 0.4s;

}

.cd-nav-container.is-visible {

transform: translateX(0);

}

main {

transition: transform 0.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: transform 0s 0.4s;

}

.cd-section.cd-selected {

position: relative;

z-index: 2;

transform: translateX(0);

transition: transform 0.4s 0s;

}

JAVASCRIPT

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

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

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

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

$('.cd-nav li').on('click', function(event){

event.preventDefault();

var target = $(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);

}

});

function loadNewContent(newSection) {

//create a new section element and insert it into the DOM

var 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来异步调用页面，处理页面加载前的事件或错误内容提示等等。