html5 tab滑动效果,html5全屏响应式tab滑动选项卡切换特效

特效描述：html5 全屏 响应式tab滑动选项卡 切换特效。html5 tab，响应式选项卡，全屏切换，html5选项卡

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

• About

• Products

• Questions

• Events

• Sponsors

• Contact

支持键盘控制的扁平风格水平滑动Tab选项卡

Products

Use your 'left' and 'right' arrow keys to navigate.
Quos vel omnis quibusdam at inventore atque assumenda dignissimos ipsa magni perferendis, minima neque saepe reprehenderit quisquam numquam voluptas quo placeat quaerat!

Questions

Use your 'left' and 'right' arrow keys to navigate.
Labore iure tempora magnam aliquid voluptatum sit placeat necessitatibus, adipisci est, ipsum doloremque. Id quia consequatur labore repellendus. Ab eligendi voluptatibus doloribus.

Events

Use your 'left' and 'right' arrow keys to navigate.
Earum porro, at odit. Dolorem velit asperiores quam obcaecati ex numquam aspernatur at et! Possimus blanditiis, distinctio est qui deleniti nisi dolorem!

Sponsors

Use your 'left' and 'right' arrow keys to navigate.
Autem alias perferendis facilis, quibusdam, ratione repellendus, voluptate officiis ipsa ullam magnam libero atque doloribus sunt est ea nisi iste porro excepturi.

Sponsors

Use your 'left' and 'right' arrow keys to navigate.
Autem alias perferendis facilis, quibusdam, ratione repellendus, voluptate officiis ipsa ullam magnam libero atque doloribus sunt est ea nisi iste porro excepturi.

var Nav = function () {

var nav = $('.nav'), burger = $('.burger'), page = $('.page'), section = $('.section'), link = nav.find('.nav__link'), navH = nav.innerHeight(), isOpen = true, hasT = false;

var toggleNav = function () {

nav.toggleClass('nav--active');

burger.toggleClass('burger--close');

shiftPage();

};

var shiftPage = function () {

if (!isOpen) {

page.css({

'transform': 'translateY(' + navH + 'px)',

'-webkit-transform': 'translateY(' + navH + 'px)'

});

isOpen = true;

} else {

page.css({

'transform': 'none',

'-webkit-transform': 'none'

});

isOpen = false;

}

};

var switchPage = function (e) {

var self = $(this);

var i = self.parents('.nav__item').index();

var s = section.eq(i);

var a = $('section.section--active');

var t = $(e.target);

if (!hasT) {

if (i == a.index()) {

return false;

}

a.addClass('section--hidden').removeClass('section--active');

s.addClass('section--active');

hasT = true;

a.on('transitionend webkitTransitionend', function () {

$(this).removeClass('section--hidden');

hasT = false;

a.off('transitionend webkitTransitionend');

});

}

return false;

};

var keyNav = function (e) {

var a = $('section.section--active');

var aNext = a.next();

var aPrev = a.prev();

var i = a.index();

if (!hasT) {

if (e.keyCode === 37) {

if (aPrev.length === 0) {

aPrev = section.last();

}

hasT = true;

aPrev.addClass('section--active');

a.addClass('section--hidden').removeClass('section--active');

a.on('transitionend webkitTransitionend', function () {

a.removeClass('section--hidden');

hasT = false;

a.off('transitionend webkitTransitionend');

});

} else if (e.keyCode === 39) {

if (aNext.length === 0) {

aNext = section.eq(0);

}

aNext.addClass('section--active');

a.addClass('section--hidden').removeClass('section--active');

hasT = true;

aNext.on('transitionend webkitTransitionend', function () {

a.removeClass('section--hidden');

hasT = false;

aNext.off('transitionend webkitTransitionend');

});

} else {

return;

}

}

};

var bindActions = function () {

burger.on('click', toggleNav);

link.on('click', switchPage);

$(document).on('ready', function () {

page.css({

'transform': 'translateY(' + navH + 'px)',

'-webkit-transform': 'translateY(' + navH + 'px)'

});

});

$('body').on('keydown', keyNav);

};

var init = function () {

bindActions();

};

return { init: init };

}();

Nav.init();