dualNav

dualnav.markdown

dualNav

Designers must care about lefties. This is an easy exercise for helping to left handed people, it's focused on mobile devices.

A Pen by Ikonikre on CodePen.

License.

index.jade

body(ontouchstart='')
    svg(xmlns='http://www.w3.org/2000/svg' style='display: none;')
        symbol#i-menu(viewbox='0 0 32 32')
            g
                line.st0(x1='4', y1='8', x2='28', y2='8')
                line.st0(x1='4', y1='16', x2='28', y2='16')
                line.st0(x1='4', y1='24', x2='28', y2='24')
        symbol#i-anchor(viewbox='0 0 96 96')
            path(d='M88,44c-2.2,0-4,1.8-4,4c0,18.5-14,33.8-32,35.8V35.5c6.9-1.8,12-8,12-15.5c0-8.8-7.2-16-16-16s-16,7.2-16,16 c0,7.5,5.1,13.7,12,15.5v48.3c-18-2-32-17.2-32-35.8c0-2.2-1.8-4-4-4c-2.2,0-4,1.8-4,4c0,24.3,19.7,44,44,44c24.3,0,44-19.7,44-44 C92,45.8,90.2,44,88,44z M40,20c0-4.4,3.6-8,8-8s8,3.6,8,8s-3.6,8-8,8S40,24.4,40,20z')
        symbol#i-search(viewbox='0 0 32 32')
            circle(cx='14', cy='14', r='12')
            path(d='M23 23l7 7')
        symbol#i-close(viewbox='0 0 32 32')
            path(d='M2 30L30 2m0 28L2 2')

    input#main__nav--direction.main__nav--direction(type='checkbox' checked)
    input#main__nav--control.main__nav--control(type='checkbox')
    main.main
        .main__header
            label.main__header__item(for='main__nav--control')
                svg.svg-icon
                    use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#i-menu')
            svg.svg-icon.logo(xmlns='http://www.w3.org/2000/svg', width='222', height='112', viewbox='0 0 222 112')
                path(d='M163.464 55.536h-47.537C115.927 29.283 137.21 8 163.464 8 189.717 8 211 29.283 211 55.536c0 26.254-21.283 47.537-47.536 47.537-18.973 0-35.35-11.114-42.973-27.188l-18.786-40.283C94.166 19.306 77.67 8 58.536 8 32.283 8 11 29.283 11 55.536c0 26.254 21.283 47.537 47.536 47.537 26.254 0 47.537-21.283 47.537-47.537H58.536')

            svg.svg-icon.main__header__item
                use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#i-search')

        nav.main__nav
            header.heading
                h2 Nav
            ol.main__nav__list
                li.main__nav__list__item Your nav goes here
                li.main__nav__list__item ···
                li.main__nav__list__item ···
                li.main__nav__list__item ···
        .main__content
            p Just with CSS·3
            header.heading
                h1 dualNav
            label.main__nav--direction__label(for='main__nav--direction') Are you lefty?
                span.toogle
                    span.toogle__handler

style.scss

@charset 'utf-8';
@import 'compass/reset';
@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,700';
@import 'https://fonts.googleapis.com/css?family=Kreon:300,700';
$mainColor: #f0f0f0;
$mainColorDarken: darken($mainColor, 20);
$baseColor: #273339;
$duration: .6s;
html,
body {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

body {
  background-color: #222b30;
  color: $mainColor;
  font-family: 'Open Sans';
  font-weight: 300;
  line-height: 1em;
}

a {
  text-decoration: none;
}

.svg-icon {
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: $mainColor;
  stroke-width: 2px;
  &.logo {
    stroke-width: 5px;
    width: 222px;
  }
}

.heading {
  font-size: 8em;
  line-height: 2em;
  font-family: 'Kreon', serif;
  transition: all $duration ease-in-out;
  text-shadow: .1em .1em .2em rgba(black, .5);
  @media (max-width: 76em) {
    font-size: 6em;
  }
}

.toogle {
  height: 1em;
  width: 2em;
  position: relative;
  margin-top: 1.5em;
  background-image: linear-gradient(white, white);
  background-position: center 1.25em;
  background-repeat: no-repeat;
  background-size: 2em 1px;
  padding: .75em .75em 2.25em;
  border: 1px dashed rgba(white, .45);
  border-radius: .5em;
  &__handler {
    display: inline-block;
    position: absolute;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: $mainColor;
    transition: all ($duration / 2) ease-in-out;
  }
  &:before {
    content: 'yes';
    position: absolute;
    bottom: .8em;
    left: 0;
    width: 100%;
    text-align: center;
  }
}

.main {
  display: flex;
  flex-direction: row;
  overflow: auto;
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  transition: all $duration ease-in-out;
  background: transparent no-repeat;
  background-image: radial-gradient(transparent 40%, rgba(black, .65) 200%), linear-gradient( rgba(#222b30, .8) 0, rgba(#222b30, .8) 100%), url('https://static.pexels.com/photos/8892/pexels-photo.jpg');
  background-size: 200% 200%, cover, cover;
  background-position: center right, top center, bottom center;
  &__header {
    z-index: 3;
    width: 100%;
    position: fixed;
    padding: 1em;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &__item {
      transition: all $duration cubic-bezier(0.56, -0.29, 0.49, 1.31);
      padding: .75em;
    }
  }
  &__nav,
  &__content {
    padding: 5em 0;
    box-sizing: border-box;
    transition: all $duration ease-in-out;
  }
  &__nav {
    top: 0;
    z-index: 2;
    position: fixed;
    height: 100%;
    width: 16em;
    transform: translateX(-120%);
    opacity: 0;
    .heading {
      font-size: 2em;
      padding: 0 .875em;
    }
    &__list {
      &__item {
        box-sizing: border-box;
        padding: 1em 1.8em;
        margin-bottom: .5em;
        position: relative;
      }
    }
    &--direction {
      display: none;
      &__label {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      &:checked ~ .main {
        background-image: radial-gradient(transparent 40%, rgba(black, .65) 200%), linear-gradient( rgba(#222b30, .8) 0, rgba(#222b30, .8) 100%), url('https://static.pexels.com/photos/8892/pexels-photo.jpg');
        background-position: center left, bottom center, bottom center;
        .main__header {
          flex-direction: row-reverse;
        }
        .main__nav {
          right: 0;
          transform: translateX(120%);
          text-align: right;
          .heading {
            text-shadow: -.1em .1em .2em rgba(black, .5);
          }
        }
        .main__content {
          .heading {
            text-shadow: -.1em .1em .2em rgba(black, .5);
          }
          .main__nav--direction__label .toogle {
            &:before {
              content: 'no';
            }
            .toogle__handler {
              transform: translateX(100%);
            }
          }
        }
      }
    }
    &--control {
      display: none;
      &:checked + .main {
        .main__nav {
          opacity: 1;
          transform: translateX(0);
        }
        .main__header .main__header__item:first-child {
          transform: rotate(-270deg);
        }
      }
    }
  }
  &__content {
    z-index: 1;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
}