Hive Menu

hive-menu.markdown

Hive Menu

A Pen by Dan Smith on CodePen.

License.

index.html

<nav id="filtersMenu">
  <!-- Filter list -->
  <section class="filters">
    <div class="nav-header">
      <span class="label">Filters</span>
    </div>
    <ul class="filters-list categories-list">
     <li><a href="#languages-frameworks">Laungauges & Frameworks</a></li>
     <li><a href="#platforms">Platforms</a></li>
     <li><a href="#techniques-practices">Techniques & Practices</a></li>
     <li><a href="#tools">Tools</a></li>
    </ul>
  </section>
  <!-- Technologies -->
  <section class="technologies" id="languages-frameworks">
    <div class="nav-header">
      <button class="technologies-back">Back</button><span class="label">Languages &amp; Frameworks</span>
    </div>
    <ul class="filters-list">
      <li><a href="#">.NET</a> </li>
      <li><a href="#">.NET Core</a> </li>
      <li><a href="#">AngularJS</a> </li>
      <li><a href="#">Apache Mesos</a> </li>
      <li><a href="#">Autofac</a> </li>
      <li><a href="#">Bootstrap</a> </li>
      <li><a href="#">Butterknife</a> </li>
      <li><a href="#">C#</a> </li>
      <li><a href="#">CSS</a> </li>
      <li><a href="#">D3</a> </li>
      <li><a href="#">Dagger 1</a> </li>
      <li><a href="#">Dagger 2</a> </li>
      <li><a href="#">Elixir</a> </li>
      <li><a href="#">Ember</a> </li>
      <li><a href="#">Eventbus</a> </li>
      <li><a href="#">Expect</a> </li>
      <li><a href="#">ExpressJS</a> </li>
      <li><a href="#">Foundation</a> </li>
      <li><a href="#">Glide</a> </li>
      <li><a href="#">GO (golang)</a> </li>
      <li><a href="#">Guice</a> </li>
      <li><a href="#">Guice / RoboGuice</a> </li>
      <li><a href="#">Haskell</a> </li>
      <li><a href="#">HTML</a> </li>
      <li><a href="#">Jasmine</a> </li>
      <li><a href="#">Java</a> </li>
      <li><a href="#">JavaScript</a> </li>
      <li><a href="#">Jodatime Android</a> </li>
      <li><a href="#">Kotlin</a> </li>
      <li><a href="#">Mocha</a> </li>
      <li><a href="#">Npm</a> </li>
      <li><a href="#">Objective-C</a> </li>
      <li><a href="#">OkHttp</a> </li>
      <li><a href="#">Otto</a> </li>
      <li><a href="#">Picasso</a> </li>
      <li><a href="#">Puma</a> </li>
      <li><a href="#">React.js</a> </li>
      <li><a href="#">Reactive Extensions</a> </li>
      <li><a href="#">ReactiveCocoa</a> </li>
      <li><a href="#">Retrofit</a> </li>
      <li><a href="#">Retrolambda Gradle Plugin</a> </li>
      <li><a href="#">Ruby on Rails</a> </li>
      <li><a href="#">RxAndroid + RxJava</a> </li>
      <li><a href="#">Sass</a> </li>
      <li><a href="#">select2</a> </li>
      <li><a href="#">Spring Boot</a> </li>
      <li><a href="#">Swift</a> </li>
      <li><a href="#">Typescript</a> </li>
      <li><a href="#">Unicorn</a> </li>
      <li><a href="#">webpack</a> </li>
    </ul>
  </section>
  
  <section class="technologies" id="platforms">
    <div class="nav-header">
      <button class="technologies-back">Back</button><span class="label">Platforms</span>
    </div>
    <ul class="filters-list">
      <li><a href="#">Apache Hadoop</a> </li>
      <li><a href="#">AWS</a> </li>
      <li><a href="#">CoreOS</a> </li>
      <li><a href="#">Docker</a> </li>
      <li><a href="#">Eclipse RCP</a> </li>
      <li><a href="#">Kubernetes</a> </li>
      <li><a href="#">Salesforce</a> </li>
    </ul>
  </section>
  
  <section class="technologies" id="techniques-practices">
    <div class="nav-header">
      <button class="technologies-back">Back</button><span class="label">Techniques &amp; Practices</span>
    </div>
    <ul class="filters-list">
      <li><a href="#">Agile</a> </li>
      <li><a href="#">Android Content Providers</a> </li>
      <li><a href="#">BDD</a> </li>
      <li><a href="#">Continuous Delivery</a> </li>
      <li><a href="#">ConWIP</a> </li>
      <li><a href="#">Exploratory Testing</a> </li>
      <li><a href="#">Fitness Criteria</a> </li>
      <li><a href="#">Functional Programming</a> </li>
      <li><a href="#">Hour Pair Switching</a> </li>
      <li><a href="#">Integration Tests</a> </li>
      <li><a href="#">Mob Programming</a> </li>
      <li><a href="#">Mocking</a> </li>
      <li><a href="#">Probabilistic Forecasting</a> </li>
      <li><a href="#">Retrospectives</a> </li>
      <li><a href="#">TDD</a> </li>
    </ul>
  </section>
  
  <section class="technologies" id="tools">
    <div class="nav-header">
      <button class="technologies-back">Back</button><span class="label">Tools</span>
    </div>
    <ul class="filters-list">
      <li><a href="#">Android Studio</a> </li>
      <li><a href="#">Asynchrony HIVE</a> </li>
      <li><a href="#">babeljs</a> </li>
      <li><a href="#">Bower</a> </li>
      <li><a href="#">Browserify</a> </li>
      <li><a href="#">Cucumber</a> </li>
      <li><a href="#">Ember CLI</a> </li>
      <li><a href="#">Gatling</a> </li>
      <li><a href="#">Git</a> </li>
      <li><a href="#">Gradle</a> </li>
      <li><a href="#">Grunt</a> </li>
      <li><a href="#">gulp</a> </li>
      <li><a href="#">InDesign</a> </li>
      <li><a href="#">Jenkins</a> </li>
      <li><a href="#">Karma</a> </li>
      <li><a href="#">Leak Canary</a> </li>
      <li><a href="#">Mac</a> </li>
      <li><a href="#">Makefile</a> </li>
      <li><a href="#">Mediawiki</a> </li>
      <li><a href="#">Mesosphere DCOS</a> </li>
      <li><a href="#">Nginx</a> </li>
      <li><a href="#">ngMock</a> </li>
      <li><a href="#">Nightwatch.js</a> </li>
      <li><a href="#">Node.js</a> </li>
      <li><a href="#">PhantomJS</a> </li>
      <li><a href="#">Postico</a> </li>
      <li><a href="#">Protractor</a> </li>
      <li><a href="#">RabbitMQ</a> </li>
      <li><a href="#">Selenium</a> </li>
      <li><a href="#">Selenium WebDriver</a> </li>
      <li><a href="#">Sketch</a> </li>
      <li><a href="#">SourceTree</a> </li>
      <li><a href="#">TestLink</a> </li>
      <li><a href="#">tig</a> </li>
      <li><a href="#">tmux</a> </li>
      <li><a href="#">Tmuxinator</a> </li>
      <li><a href="#">UI Automator</a> </li>
      <li><a href="#">UI Testing</a> </li>
      <li><a href="#">vim</a> </li>
      <li><a href="#">WebStorm</a> </li>
      <li><a href="#">Xcode</a> </li>
    </ul>
  </section>
</nav>

script.babel

class Filters {
  constructor(elem) {
    this.elem = elem;
    this.categories = Array.from(this.elem.querySelectorAll('.categories-list a'));
    this.backBtn = Array.from(this.elem.querySelectorAll('.technologies-back'));
    this.technologies = Array.from(this.elem.querySelectorAll('.technologies a'));
    this.active = null;
    this.init();
  }
  
  init() {
    this.bindEvents();
    this.appendRating();
  }
  
  bindEvents() {
    for (let category of this.categories) {
      category.addEventListener('click', (e) => {
        let id = category.getAttribute('href').replace('#','');

        this.active = document.getElementById(id);
        
        if (!this.active) return;
        
        e.preventDefault();
        this.elem.classList.add('is-offscreen');
        this.active.classList.add('is-active');        
      });
    }
    
    for (let btn of this.backBtn) {
      btn.addEventListener('click', (e) => {
        this.elem.classList.remove('is-offscreen');
        this.active.classList.remove('is-active');
        this.active.querySelector('.filters-list').scrollTop = 0; 
        this.active = null;
      });
    }
  }
        
  appendRating() {
    for (let tech of this.technologies) {
      let text = tech.innerHTML;
      let status = ['adopt', 'assess', 'avoid', 'trial'];
            
      tech.innerHTML = `<span class="name">${text}</span> <span class="status">${status[this.getRandomInt(0,4)]}</span>`;
    }
  }
        
  getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min;
  }
  
}

const filtersContainer = document.getElementById('filtersMenu');
const filtersMenu = new Filters(filtersContainer);

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.scss

//Colors
$blue: #33BEDE;
$red: #FB4B60;
$yellow: #EBC22F;
$green: #B8E986;
$navy: #262833;
$navy-light: #2e303b;
$navy-dark: #171820;
$blue-gray: #737687;
$gray: #D8D8D8;

//Easing
$custom-easing: cubic-bezier(1, .1, 0, 0.9);

//Mixins
@mixin animate($property:all, $timing:0.3s, $easing:ease) {
  transition: $property, $timing, $easing;
}

%circle {
  content: '';
  position: absolute;
  top: 50%;
  left: 1rem;
  height: 7px;
  width: 7px;
  box-sizing: border-box;
  border-radius: 100%;
  border: 2px solid transparent;
  transform: translateY(-50%);
}

html, body {
  height: 100%;
}

body {
  background: $navy;
}

nav {
  position: fixed;
  height: 100%;
  width: 340px;
  overflow: hidden;
  
  &.is-offscreen {
    .filters {
      transform: translateX(-100%);
    }
  }
  
  .nav-header {
    position: relative;
    background: $navy-dark;
    border-bottom: 1px solid rgba($blue-gray, 0.5);
    .label {
      display: block;
      padding: 0 40px;
      color: white;
      font-size: 13px;
      letter-spacing: .05rem;
      line-height: 50px;
      text-align: center;
      text-transform: uppercase;
    }
  }
  
  .filters {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: $navy-light;
    transform: translateZ(0) translateX(0);
    @include animate;
  }
  .filters-list  {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    list-style: none;
    li {
      border-bottom: 1px solid rgba($blue-gray, 0.5);
      a {
        position: relative;
        display: block;
        padding: 0 1rem 0 2rem;
        color: white;
        font-size: 12px;
        letter-spacing: .05rem;
        line-height: 40px;
        text-decoration: none;
        text-transform: uppercase;
        @include animate;
        &::before {
          @extend %circle;
        }
        &:hover {
          background: rgba($navy, 1);
        }          
        &[href="#languages-frameworks"] {
          &::before {
            border-color: $blue;
          }
        }
        &[href="#platforms"] {
          &::before {
            border-color: $red;
          }
        }
        &[href="#techniques-practices"] {
          &::before {
            border-color: $yellow;
          }
        }
        &[href="#tools"] {
          &::before {
            border-color: $green;
          }
        }
      }
    }
  }
  
  .technologies {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    background: $navy-light;
    transform: translateZ(0) translateX(100%);
    @include animate;
    &.is-active {
      transform: translateX(0);
    }
    &#languages-frameworks {
      .nav-header:after {
        border-color: $blue;
      }
    }
    &#platforms {
      .nav-header:after {
        border-color: $red;
      }
    }
    &#techniques-practices {
      .nav-header:after {
        border-color: $yellow;
      }
    }
    &#tools {
      .nav-header:after {
        border-color: $green;
      }
    }
    .nav-header {
      &:after {
        @extend %circle;
        left: auto;
        right: 1rem;
      }
    }
    .technologies-back {
      position: absolute;
      top: 0;
      left: 0;
      height: 50px;
      width: 50px;
      background: none;
      border: none;
      outline: none;
      text-indent: -9999px;
      &:before {
        content: '';
        display: block;
        position: absolute;
        top: calc(50% - 1px); 
        left: 1rem;
        height: 10px;
        width: 10px;
        border: 2px solid white;
        border-width: 0 0 2px 2px;
        box-sizing: border-box;
        transform: rotate(45deg) translateY(-50%);
        @include animate;
      }
      &:hover:before {
        border-color: $blue;
      }
    }
  }
}