mannieschumpert · December 14, 2015 05:59 · mannieschumpert · Mar 19, 2013
diff --git a/menu.js b/menu.js
 (function($) { // Use a wrapper since WordPress loads jQuery in noconflict mode

  // Menu Toggling - NOTE: This part is easy to read but verbose. See refactored version linked in comments.
  $(document).ready(function(){
    // Store the elements, since we'll be using them repeatedly
    var open = $(".toggle.open");
    var close = $(".toggle.close");
    var nav = $(".sidenav");
    var sidebar = $(".sidebar");

    // Open Menu
    open.click(function(){
      sidebar.addClass("active"); // When menu is open, .sidebar is set to 100% width
      nav.removeClass("inactive"); // remove "inactive" class, which translates nav offscreen
      setTimeout(function() { // timeout used to delay icon toggle until menu is fully open
        open.addClass("hide"); // Hide open icon
        close.removeClass("hide"); // Show close icon
      }, 500); // This time is equivalent to the CSS transition time
      return false;
    });

    // Close Menu
    // Does all the same stuff as Open, just in reverse
    close.click(function(){
      nav.addClass("inactive");
      setTimeout(function() {
        close.addClass("hide");
        open.removeClass("hide");
        sidebar.removeClass("active");
      }, 500);
      return false;
    });
  });
  
  // Make menu sticky if scrolled
  $(document).scroll(function() {
    var scrollpoint = 176; // Set point at which nav becomes sticky
    var sidebar = $('.sidebar');

    var top = $(document).scrollTop();
      if (top > scrollpoint) {
        sidebar.css({'position' : 'fixed', 'top' : '16px'});
        $('.sidebar ul.sitenav').slideDown(); // Reveal main site page nav (hidden by default)
      }
      if (top < scrollpoint) {
        sidebar.removeAttr('style');
        $('.sidebar ul.sitenav').slideUp(); // Re-hide main site page nav
      }
  });

 })(jQuery);
diff --git a/menu.sass b/menu.sass
 .blog
  .sidebar
    margin: 0
    padding: 0
    position: absolute
    margin-right: 0
    width: 4em
    top: 11em
    right: 0
    overflow: hidden
    max-height: 90%
    &.active
      width: 100%

    .sidenav
      z-index: 2
      +borderbox
      padding: 1em
      background-color: #ddd
      width: 70%
      position: relative
      float: right
      max-height: 100%

      @include border-bottom-left-radius(4px)
      @include translate3d(0, 0, 0)
      @include transition(transform, 500ms)
      .inner-menu
        height: 100%
        overflow-y: scroll
        h2
          font-size: 1.2em
        ul
          margin-bottom: 2em
          list-style: none
          h2
            margin-bottom: 0.5em
          li
            line-height: 1.2em
            border:
              bottom: 1px solid darken(#ddd,5%)
            a
              padding: 0.25em 0
              display: block
              &:hover
                background: darken(#ddd, 5%)
          &.sitenav
            display: none
          @include border-left-radius(4px)
        .resources
          h3
            color: #555
            font-style: italic
            font-size: 0.8em
            line-height: 1.2em
            margin-bottom: 0.2em

      // Menu toggle functionality
      .toggle
        z-index: -1
        font-size: 3em
        position: absolute
        display: block
        padding: 0.1em 0.5em 0.1em 0.2em
        left: -1.3em
        top: 0
        background: #ddd
        @include border-left-radius(4px)

      .hide
        display: none


      &.inactive
        @include translate3d(100%, 0, 0)