Create a gist now

Instantly share code, notes, and snippets.

Horizontal Tab Menu Slider v0.2

Horizontal Tab Menu Slider v0.2

Responsive Horizontal Tab Menu Slider with left and right arrow key navigation. Built with Stylus and jQuery.

Show case your content with this easy to implement presentation.

A Pen by Ettrics on CodePen.

License.

<nav class="nav nav--active">
<ul class="nav__list">
<li class="nav__item">
<a href="" class="nav__link">
<div class="nav__thumb color1" data-letter="a"></div>
<p class="nav__label">Awareness</p>
</a>
</li>
<li class="nav__item">
<a href="" class="nav__link">
<div class="nav__thumb color2" data-letter="e"></div>
<p class="nav__label">Engagement</p>
</a>
</li>
<li class="nav__item">
<a href="" class="nav__link">
<div class="nav__thumb color3" data-letter="c"></div>
<p class="nav__label">Consideration</p>
</a>
</li>
<li class="nav__item">
<a href="" class="nav__link">
<div class="nav__thumb color4" data-letter="a"></div>
<p class="nav__label">Acquisition</p>
</a>
</li>
<li class="nav__item">
<a href="" class="nav__link">
<div class="nav__thumb color5" data-letter="r"></div>
<p class="nav__label">Retention</p>
</a>
</li>
<li class="nav__item">
<a href="" class="nav__link">
<div class="nav__thumb color6" data-letter="g"></div>
<p class="nav__label">Growth</p>
</a>
</li>
</ul>
<a href="http://ettrics.com/" class="logo" target="_blank">
<img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/ettrics-logo.svg" alt="" />
</a>
</nav>
<div class="page">
<section class="section section--active color1" data-letter="a">
<article class="section__wrapper">
<h1 class="section__title">Awareness</h1>
<p>Use your 'left' and 'right' arrow keys to navigate.</p>
</article>
</section>
<section class="section color2" data-letter="p">
<article class="section__wrapper">
<h1 class="section__title">Engagement</h1>
<p>Use your 'left' and 'right' arrow keys to navigate.</p>
</article>
</section>
<section class="section color3" data-letter="q">
<article class="section__wrapper">
<h1 class="section__title">Consideration</h1>
<p>Use your 'left' and 'right' arrow keys to navigate.</p>
</article>
</section>
<section class="section color4" data-letter="e">
<article class="section__wrapper">
<h1 class="section__title">Acquisition</h1>
<p>Use your 'left' and 'right' arrow keys to navigate.</p>
</article>
</section>
<section class="section color5" data-letter="s">
<article class="section__wrapper">
<h1 class="section__title">Retention</h1>
<p>Use your 'left' and 'right' arrow keys to navigate.</p>
</article>
</section>
<section class="section color6">
<article class="section__wrapper">
<h1 class="section__title">Growth</h1>
<p>Use your 'left' and 'right' arrow keys to navigate.</p>
</article>
</section>
</div>
var Nav = (function() {
var
nav = $('.nav'),
section = $('.section'),
link = nav.find('.nav__link'),
navH = nav.innerHeight(),
isOpen = true,
hasT = false;
var toggleNav = function() {
nav.toggleClass('nav--active');
shiftPage();
};
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() {
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();
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
easeout(s=.45s)
transition all s cubic-bezier(0.23, 1, 0.32, 1)
align()
display flex
align-items center
justify-content center
color1 = #1B1F25;
color2 = #e74c3c;
color3 = #3498db;
color4 = #9b59b6;
color5 = #1BC885;
color6 = #DFB816;
*
box-sizing border-box
-webkit-tap-highlight-color: rgba(white, 0); // remove tap highlight on android chrome
body
line-height 1.5
font-family "futura-pt", 'Century Gothic','Arial', sans-serif
-webkit-font-smoothing antialiased
text-rendering optimizeLegibility
color lighten(white, 10)
background lighten(black, 10)
a
text-decoration none
color inherit
ul
list-style-type none
margin 0
padding 0
.nav
will-change: transform
position fixed
top 0
left 0
width 100%
z-index 1
background lighten(black, 10)
transform translateY(-100%)
easeout()
&--active
transform translateY(0)
&__list
display flex
&__item
flex 1
position relative
easeout()
&:hover
opacity 0.75
&__thumb
display block
height 80px
background crimson
easeout()
&:before
content attr(data-letter)
position absolute
top 50%
left 50%
transform translate(-50%, -50%)
font-size 70px
text-transform uppercase
opacity 0
&__label
position absolute
top 50%
left 50%
transform translate(-50%, -50%)
text-transform uppercase
letter-spacing 2px
color darken(white, 10)
margin 0
@media (max-width 850px)
&__label
font-size 14px
@media (max-width 720px)
&__label
display none
&__thumb
height 60px
&:before
font-size 24px
opacity 0.7
.page
height 100vh
will-change transform
perspective 400px
overflow hidden
easeout()
.section
will-change transform
position absolute
width 100%
top 0
left 0
height 100vh
overflow hidden
align()
text-align center
background white
transform translateX(100%)
easeout(.7s)
&--hidden
transform translateX(-100%);
&--active
transform translateX(0) rotateY(0)
z-index 2
&__wrapper
width 100%
max-width 800px
padding 0 8vw
position relative
&__title
margin 0 0 25px 0
font-size 48px
font-weight normal
text-transform uppercase
letter-spacing 5px
&:before
content ''
position absolute
top 5rem
left 45%
margin: auto
width: 10%
height: 2px
background: #ffffff
@media (max-width 720px)
font-size 28px
&:before
top 3.25rem
p
margin 0 0 25px 0
font-family 'Georgia'
font-size 18px
color white
opacity 0.55
@media (max-width 720px)
font-size 16px
&:last-child
margin-bottom 0
.color1
background color1
.color2
background color2
.color3
background color3
.color4
background color4
.color5
background color5
.color6
background color6
.logo
position: fixed
top: 100px
right: 20px
z-index: 2
@media (max-width 720px)
top 110px
right: 50%
margin-right -20px
img
width: 45px
transform: rotate(0)
easeout()
&:hover
transform: rotate(180deg) scale(1.1)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment