Skip to content

Instantly share code, notes, and snippets.

@s3nh

s3nh/horizontal-tab-menu.markdown

Created July 17, 2020 07:06
Show Gist options
  • Save s3nh/eceaaea21dc44c766fed7d509adf0e11 to your computer and use it in GitHub Desktop.
Save s3nh/eceaaea21dc44c766fed7d509adf0e11 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. s3nh created this gist Jul 17, 2020.
    7 changes: 7 additions & 0 deletions horizontal-tab-menu.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Horizontal Tab Menu
    -------------------
    Horizontal tab menu with left and right arrow key navigation. Built with Stylus and jQuery.

    A [Pen](https://codepen.io/ettrics/pen/qEeZRY) by [Ettrics](https://codepen.io/ettrics) on [CodePen](https://codepen.io).

    [License](https://codepen.io/ettrics/pen/qEeZRY/license).
    85 changes: 85 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,85 @@
    <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>
    139 changes: 139 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,139 @@
    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();
    1 change: 1 addition & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    229 changes: 229 additions & 0 deletions style.stylus
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,229 @@
    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)