Greedy Navigation

Greedy Navigation.markdown

Greedy Navigation

A responsive navigation menu that stacks items into a dropdown menu when they overflow. A hamburger style button with count badge appears when there are hidden items to reveal.

Forked from lukejacksonn's Pen Greedy Navigation.

A Pen by William Fortuna de Moraes on CodePen.

License.

index.html

<nav class='greedy-nav'>
<button><div class="hamburger"></div></button>
  <ul class='visible-links'>
    <li><a target="_blank" href='https://github.com/lukejacksonn/GreedyNav'>Greedy</a></li>
    <li><a href='#'>navigation</a></li>
    <li><a href='#'>that</a></li>
    <li><a href='#'>handles</a></li>
    <li><a href='#'>overflowing</a></li>
    <li><a href='#'>menu</a></li>
    <li><a href='#'>elements</a></li>
    <li><a href='#'>effortlessly</a></li>
  </ul>
  <ul class='hidden-links hidden'></ul>
</nav>
<h1>resize the window</h1>
<p>(you might also like <a target="_blank" href="http://codepen.io/lukejacksonn/pen/WQQOrw">springy select</a>)</p>

script.js

var $nav = $('.greedy-nav');
var $btn = $('.greedy-nav button');
var $vlinks = $('.greedy-nav .visible-links');
var $hlinks = $('.greedy-nav .hidden-links');

var breaks = [];

function updateNav() {
  
  var availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() - $btn.width() - 30;

  // The visible list is overflowing the nav
  if($vlinks.width() > availableSpace) {

    // Record the width of the list
    breaks.push($vlinks.width());

    // Move item to the hidden list
    $vlinks.children().last().prependTo($hlinks);

    // Show the dropdown btn
    if($btn.hasClass('hidden')) {
      $btn.removeClass('hidden');
    }

  // The visible list is not overflowing
  } else {

    // There is space for another item in the nav
    if(availableSpace > breaks[breaks.length-1]) {

      // Move the item to the visible list
      $hlinks.children().first().appendTo($vlinks);
      breaks.pop();
    }

    // Hide the dropdown btn if hidden list is empty
    if(breaks.length < 1) {
      $btn.addClass('hidden');
      $hlinks.addClass('hidden');
    }
  }

  // Keep counter updated
  $btn.attr("count", breaks.length);

  // Recur if the visible list is still overflowing the nav
  if($vlinks.width() > availableSpace) {
    updateNav();
  }

}

// Window listeners

$(window).resize(function() {
    updateNav();
});

$btn.on('click', function() {
  $hlinks.toggleClass('hidden');
});

updateNav();

scripts

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

style.css

@color-1: #ff9800;
@color-2: #f57c00;
@color-3: #ef6c00;

body {
  min-width: 320px;
  padding: 30px;
  background: #ff9800;
  font-family: Helvetica, sans-serif;
}

h1 {
  color: #fff;
  font-weight: bold;
  text-align: center;
  margin-top: 50px;
  font-size: 24px;
}

p {
  color: #fff;
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
}

a {
  color: #fff;
}

.greedy-nav {
  position: relative;
  min-width: 250px;
  background: #fff;
  
  a {
    display: block;
    padding: 20px 30px;
    background: #fff;
    font-size: 18px;
    color: @color-1;
    text-decoration: none;
    
    &:hover {
      color: @color-3;
    }
  }
  
  button {
    position: absolute;
    height: 100%;
    right: 0;
    padding: 0 15px;
    border: 0;
    outline: none;
    background-color: @color-2;
    color: #fff;
    cursor: pointer;
    
    &:hover {
      background-color: @color-3;
    }
    
    &::after {
      content: attr(count);
      position: absolute;
      width: 30px;
      height: 30px;
      left: -16px;
      top: 12px;
      text-align: center;
      background-color: @color-3;
      color: #fff;
      font-size: 14px;
      line-height: 28px;
      border-radius: 50%;
      border: 3px solid #fff;
      font-weight: bold;
    }
    
    &:hover::after {
      transform: scale(1.075);
    }
  }
  
  .hamburger {
    position: relative;
    width: 32px;
    height: 4px;
    background: #fff;
    margin: auto;
    
    &:before, 
    &:after {
      content: '';
      position: absolute;
      left: 0;
      width: 32px;
      height: 4px;
      background: #fff;
    }
    
    &:before {
      top: -8px;
    }
    
    &:after {
      bottom: -8px;
    }
  }
  
  .visible-links {
    display: inline-table;
    
    li {
      display: table-cell;
      border-left: 1px solid @color-1;
    }
  }
  
  .hidden-links {
    position: absolute;
    right: 0px;
    top: 100%;
    
    li {
      display: block;
      border-top: 1px solid @color-2;
    }
  }
  
  .visible-links li:first-child {
    font-weight: bold;
    a { color: @color-1 !important; }
  }
  
  .hidden {
    visibility: hidden;
  }
}