Dropdown navigation (keyboard friendly)

Dropdown navigation (keyboard friendly).markdown

Dropdown navigation (keyboard friendly)

A smoothly animated HTML/CSS navigation with little JavaScript for event handling. Keyboard navigation supported.

Requires a modern browser, obviously.

A Pen by Clément Paris on CodePen.

License.

index.html

<nav role="navigation" class="active-1">
  <ul>
    <li><a tabindex="1" href="#">Home</a></li>
    <li><a tabindex="2" href="#" class="selected">About</a></li>
    <li><a tabindex="3" href="#">Clients</a></li>
    <li><a tabindex="4" href="#">Contact Us</a></li>
  </ul>
</nav>  

script.js

(function(document) {
  document.addEventListener('DOMContentLoaded', function() {
    let nav = document.querySelector('nav');
    let navItems = Array.from(nav.querySelectorAll('li > a'));
    
    navItems.forEach(function(item, index) {
      item.addEventListener('click', function(e) {
        e.preventDefault();
        nav.className = nav.className.replace(/[0-9]/, index);
        nav.querySelector('.selected').classList.remove('selected');
        item.classList.add('selected');
        nav.classList.remove('focused');
      });
      
      item.addEventListener('focus', function() {
        nav.classList.add('focused');
      });
      
      item.addEventListener('blur', function() {
        nav.classList.remove('focused');
      });
    });
  })
})(document);

style.css

@import url(https://fonts.googleapis.com/css?family=Titillium+Web:700,600);
@import url(http://lab.clementparis.fr/octicons/octicons.css);

$nav_height: 60px;
$nav_items_count: 4;

@mixin octicon($content) {
  content: $content;
  font: normal normal normal 24px/1 octicons;
  display: inline-block;
  text-decoration: none;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@mixin generate-active-menu($menu_count) {
  @while $menu_count > 0 {
    &.active-#{$menu_count} {
      ul {
        transform: translateY(-$nav_height * $menu_count);
      }
    }
    $menu_count: $menu_count - 1;
  }
}

html {
  height: 100%;
  box-sizing: border-box;
}

*, *::after, *::before {
  box-sizing: inherit;
}

body {
  position: relative;
  height: 100%;
  background: mintcream;
  font-family: 'Titillium Web', sans-serif;
  overflow: hidden;
}

nav {
  position: relative;
  width: 350px;
  max-height: $nav_height;
  margin: 50px auto auto;
  overflow: hidden;
  text-align: center;
  transition: all 0.2s ease-in-out;
  &[class*=active-]:focus,
  &[class*=active-]:hover,
  &.focused[class*=active-] {
    outline: none;
    max-height: $nav_height * $nav_items_count;
    ul {
      transform: translateY(0);
    }
    &::after {
      transform: rotateX(180deg);
    }
  }
  &::after {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 20px;
    color: white;
    @include octicon('\f05b');
    line-height: $nav_height - 5px;
    cursor: pointer;
    transform: rotateX(0);
    transition: all 0.2s ease-in-out;
  }
  &::before {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 20px;
    color: white;
    @include octicon('\f05e');
    line-height: $nav_height - 2px;
    cursor: pointer;
  }
  
  @include generate-active-menu(4);
  
  ul {
    transform: translateY(0);
    transition: all 0.2s ease-in-out;
  }
  
  li > a {
    display: inline-block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    font-weight: 600;
    font-size: 26px;
    line-height: $nav_height;
    background: mediumseagreen;
    transition: all 0.2s ease-in-out;
    &.selected{
      background: seagreen;
      font-weight: 700;
    }
    &:focus,
    &:hover {
      outline: none;
      background: darken(seagreen, 5%);
    }
  }
}