Animated navigation "button"

Animated navigation "button".markdown

Animated navigation "button"

A Pen by Robin Bertilsson on CodePen.

License.

index.html

.toggle-nav
	span.m M
	span.e
		span.bar
		span.bar
		span.bar
	span.n N
	span.u U
.nav-pane.slide-out
	h1 Navigation here.

script.js

(function($) {

  $(document).ready(function(){
    $('.toggle-nav').on('click', function() {
      toggleNavigation($(this), $('.nav-pane'));
      changeLetters($(this));
    });

    function toggleNavigation(btn, nav) {
      btn.toggleClass('open');
      nav.toggleClass('open');
    }

    function changeLetters(btn) {
      var m = $('.toggle-nav span.m');
      var e = $('.toggle-nav span.e');
      var n = $('.toggle-nav span.n');
      var u = $('.toggle-nav span.u');

      e.toggleClass('btn-close');

      if(btn.hasClass('open'))
      {
        m.text("E");
        n.text("I");
        u.text("T");
      }
      else
      {
        m.text("M");
        n.text("N");
        u.text("U");
      }
    }
  });

})(jQuery);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body
  font-family: sans-serif
  background: #F1F1F1
  padding: 0
  margin: 0

.nav-pane
  transition: 250ms
  position: fixed
  transform: translateX(-350px)
  top: 0
  height: 100vh
  width: 348px
  background: #EA5548
  border-right: 2px solid darken(#EA5548, 2%)
  display: flex
  flex-direction: column
  justify-content: space-around
  box-shadow: 0px 3px 10px rgba(#212121, 0.5)

  @media screen and (max-width: 620px)
    width: 298px
    transform: translateX(-300px)

  h1
    margin: 0
    text-align: center
    color: #F1F1F1
    text-transform: uppercase
    font-size: 1.5rem

  &.open
    transform: translateX(0)
    transition: 250ms

.toggle-nav
  position: absolute
  top: 25px
  right: 25px
  cursor: pointer
  color: #212121

  &.open
    span.m, span.n, span.u
      opacity: 1

  span.m, span.n, span.u
    font-size: 1.05rem
    opacity: 0
    transition: 250ms
    letter-spacing: 2px

  span.e
    display: inline-block
    height: 12px
    width: 17px

    &.btn-close

      span.bar:nth-child(1)
        transition: 250ms
        transform: rotate(45deg)
        top: 5px
      span.bar:nth-child(2)
        opacity: 0
        transition: 250ms
      span.bar:nth-child(3)
        transition: 250ms
        transform: rotate(-45deg)
        bottom: 5px

    span.bar
      transition: 250ms
      position: relative
      display: block
      background: #212121
      border-radius: 1px
      border-bottom: 1px solid lighten(#212121, 25%)
      width: 15px
      height: 1px

      &:nth-child(2)
        margin: 3px 0

.toggle-nav:hover
  span.m, span.n, span.u
    opacity: 1
    transition: 250ms