Horizontal tab menu with left and right arrow key navigation. Built with Stylus and jQuery.
Created
July 17, 2020 07:06
-
-
Save s3nh/eceaaea21dc44c766fed7d509adf0e11 to your computer and use it in GitHub Desktop.
Horizontal Tab Menu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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">About</p> | |
</a> | |
</li> | |
<li class="nav__item"> | |
<a href="" class="nav__link"> | |
<div class="nav__thumb color2" data-letter="p"></div> | |
<p class="nav__label">Products</p> | |
</a> | |
</li> | |
<li class="nav__item"> | |
<a href="" class="nav__link"> | |
<div class="nav__thumb color3" data-letter="q"></div> | |
<p class="nav__label">Questions</p> | |
</a> | |
</li> | |
<li class="nav__item"> | |
<a href="" class="nav__link"> | |
<div class="nav__thumb color4" data-letter="e"></div> | |
<p class="nav__label">Events</p> | |
</a> | |
</li> | |
<li class="nav__item"> | |
<a href="" class="nav__link"> | |
<div class="nav__thumb color5" data-letter="s"></div> | |
<p class="nav__label">Sponsors</p> | |
</a> | |
</li> | |
<li class="nav__item"> | |
<a href="" class="nav__link"> | |
<div class="nav__thumb color6" data-letter="c"></div> | |
<p class="nav__label">Contact</p> | |
</a> | |
</li> | |
</ul> | |
<div class="burger burger--close"> | |
<div class="burger__patty"></div> | |
</div> | |
<a href="http://ettrics.com/code/horizontal-tab-menu/" 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">About us</h1> | |
<p>Use your 'left' and 'right' arrow keys to navigate.<br>Voluptatem necessitatibus aliquid cum repellat nihil praesentium tenetur vel voluptates cumque animi accusantium, deserunt, vitae est. Quas suscipit sint quidem fuga repudiandae.</p> | |
</article> | |
</section> | |
<section class="section color2" data-letter="p"> | |
<article class="section__wrapper"> | |
<h1 class="section__title">Products</h1> | |
<p>Use your 'left' and 'right' arrow keys to navigate.<br> Quos vel omnis quibusdam at inventore atque assumenda dignissimos ipsa magni perferendis, minima neque saepe reprehenderit quisquam numquam voluptas quo placeat quaerat!</p> | |
</article> | |
</section> | |
<section class="section color3" data-letter="q"> | |
<article class="section__wrapper"> | |
<h1 class="section__title">Questions</h1> | |
<p>Use your 'left' and 'right' arrow keys to navigate.<br> Labore iure tempora magnam aliquid voluptatum sit placeat necessitatibus, adipisci est, ipsum doloremque. Id quia consequatur labore repellendus. Ab eligendi voluptatibus doloribus.</p> | |
</article> | |
</section> | |
<section class="section color4" data-letter="e"> | |
<article class="section__wrapper"> | |
<h1 class="section__title">Events</h1> | |
<p>Use your 'left' and 'right' arrow keys to navigate.<br> Earum porro, at odit. Dolorem velit asperiores quam obcaecati ex numquam aspernatur at et! Possimus blanditiis, distinctio est qui deleniti nisi dolorem!</p> | |
</article> | |
</section> | |
<section class="section color5" data-letter="s"> | |
<article class="section__wrapper"> | |
<h1 class="section__title">Sponsors</h1> | |
<p>Use your 'left' and 'right' arrow keys to navigate.<br> Autem alias perferendis facilis, quibusdam, ratione repellendus, voluptate officiis ipsa ullam magnam libero atque doloribus sunt est ea nisi iste porro excepturi.</p> | |
</article> | |
</section> | |
<section class="section color6" data-letter="c"> | |
<article class="section__wrapper"> | |
<h1 class="section__title">Contact us</h1> | |
<p>Use your 'left' and 'right' arrow keys to navigate.<br> Dicta nostrum ad minima magnam, in nemo doloremque eum! Deserunt illo, laudantium eos ad, quisquam nisi, necessitatibus saepe ex a sit impedit.</p> | |
</article> | |
</section> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
easeout(s=.45s) | |
transition all s cubic-bezier(0.23, 1, 0.32, 1) | |
align() | |
display flex | |
align-items center | |
justify-content center | |
color1 = #1abc9c; | |
color2 = #e74c3c; | |
color3 = #3498db; | |
color4 = #F4D03F; | |
color5 = #9b59b6; | |
color6 = #bdc3c7; | |
* | |
box-sizing border-box | |
-webkit-tap-highlight-color: rgba(white, 0); // remove tap highlight on android chrome | |
body | |
line-height 1.5 | |
font-family 'Montserrat' | |
-webkit-font-smoothing antialiased | |
text-rendering optimizeLegibility | |
color lighten(black, 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 120px | |
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.15 | |
&__label | |
position absolute | |
top 50% | |
left 50% | |
transform translate(-50%, -50%) | |
text-transform uppercase | |
letter-spacing 2px | |
color lighten(black, 10) | |
margin 0 | |
@media (max-width 850px) | |
&__label | |
font-size 14px | |
@media (max-width 720px) | |
&__label | |
display none | |
&__thumb | |
height 90px | |
&:before | |
font-size 32px | |
opacity 0.7 | |
.burger | |
position absolute | |
right 0 | |
top 100% | |
width 60px | |
height 60px | |
background lighten(black, 10) | |
cursor pointer | |
align() | |
&__patty | |
position relative | |
width 60% | |
height 2px | |
background white | |
easeout() | |
&:before, | |
&:after | |
will-change transform | |
content "" | |
position absolute | |
left 0 | |
background white | |
height 2px | |
width 100% | |
easeout() | |
&:before | |
top -10px | |
&:after | |
top 10px | |
&--close | |
.burger__patty | |
transform rotate(45deg) | |
&:before | |
transform rotate(-90deg) translate(-9px, 0) | |
&:after | |
opacity 0 | |
transform scaleX(0) | |
.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 | |
&:before | |
content attr(data-letter) | |
position absolute | |
top 50% | |
left 50% | |
transform translate(-50%, -50%) | |
font-size 75vh | |
text-transform uppercase | |
opacity 0.15 | |
z-index -1 | |
&__wrapper | |
width 100% | |
max-width 800px | |
padding 0 8vw | |
&__title | |
margin 0 0 25px 0 | |
font-size 24px | |
text-transform uppercase | |
letter-spacing 4px | |
p | |
margin 0 0 25px 0 | |
font-family 'Georgia' | |
font-size 20px | |
&: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: 195px | |
right: 7px | |
z-index: 2 | |
@media (max-width 720px) | |
top 160px | |
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