<nav>
  <ul>
    <li><button id="OMG">OMG</button></li>
    <li><button id="WTF">WTF</button></li>
    <li><button id="BBQ">BBQ</button></li>
    <li><button id="LOL">LOL</button></li>
  </ul>
</nav>
<div id="spaces">
  <ul data-column>
    <li id="omg-home" data-route="/spaces-ui/demos/demo.html">OMG 1 <a href="#" class="right">RIGHT</a></li>
    <li data-route="/spaces-ui/demos/demo.html/omg2">OMG 2</li>
  </ul>

  <ul data-column>
    <li id="wtf-home" data-route="/wtf">WTF 1 <button class="down">DOWN</button> <button class="left">LEFT</button></li>
    <li data-route="/wtf/2">WTF 2 <button class="up">UP</button></li>
    <li data-route="/wtf/3">WTF 3 <button class="top">TOP</button></li>
  </ul>

  <ul data-column>
    <li id="bbq-home">BBQ 1</li>
    <li>BBQ 2</li>
    <li>BBQ 3</li>
  </ul>

  <ul data-column>
    <li id="lol-home">LOL 1</li>
    <li>LOL 2</li>
    <li>LOL 3</li>
  </ul>
</div>

<a href="https://github.com/mmellado/spaces-ui"><img style="position: fixed; top: 0; left: 0; border: 0; z-index: 100" src="https://camo.githubusercontent.com/567c3a48d796e2fc06ea80409cc9dd82bf714434/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png"></a>
[data-column] > * {
  line-height: 100vh;
  font-size: 80px;
  font-family: sans-serif;
  text-align: center;
}

nav {
  width: 100vw;
  height: 50px;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
}

nav ul {
  text-align: right;
  overflow: hidden;
}

nav li {
  display: inline-block;
  margin: 0 10px;
  line-height: 50px;
}

nav li button {
  border: 0;
  background: 0;
  font-size: 20px;
  cursor: pointer;
  color: #FFF;
}

nav li button:hover {
  text-decoration: underline;
}

.right {
  font-size: 25px;
  position: relative;
  bottom: 30px;
}
Spaces.init({showMap: true, useRouter: true});
  var mySpaces = document.querySelectorAll('#spaces ul li');
  for (var i = 0; i < mySpaces.length; i++) {
    mySpaces[i].style.background = '#' + Math.floor(Math.random()*16777215).toString(16); // Setting the random color on your div element.
  }
  document.getElementById('OMG').addEventListener('click', function(){ Spaces.moveTo('#omg-home') });
  document.getElementById('WTF').addEventListener('click', function(){ Spaces.moveTo('#wtf-home') });
  document.getElementById('BBQ').addEventListener('click', function(){ Spaces.moveTo('#bbq-home') });
  document.getElementById('LOL').addEventListener('click', function(){ Spaces.moveTo('#lol-home') });
  document.querySelector('.up').addEventListener('click', function(){ Spaces.move('up') });
  document.querySelector('.down').addEventListener('click', function(){ Spaces.move('down') });
  document.querySelector('.left').addEventListener('click', function(){ Spaces.move('left') });
  document.querySelector('.right').addEventListener('click', function(){ Spaces.move('right') });
  document.querySelector('.top').addEventListener('click', function(){ Spaces.move('top') });
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/spaces-ui.min.js