MyBox

by mhouser_nowmediagroup

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/CSSPlugin.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Rubik:400,700,900&display=swap" rel="stylesheet">

<main id="main">
  <nav class="docked">
    <ul>
      <li>
      <span>OmniBox</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0l-11 6v12.131l11 5.869 11-5.869v-12.066l-11-6.065zm7.91 6.646l-7.905 4.218-7.872-4.294 7.862-4.289 7.915 4.365zm-16.91 1.584l8 4.363v8.607l-8-4.268v-8.702zm10 12.97v-8.6l8-4.269v8.6l-8 4.269zm6.678-5.315c.007.332-.256.605-.588.612-.332.007-.604-.256-.611-.588-.006-.331.256-.605.588-.612.331-.007.605.256.611.588zm-2.71-1.677c-.332.006-.595.28-.588.611.006.332.279.595.611.588s.594-.28.588-.612c-.007-.331-.279-.594-.611-.587zm-2.132-1.095c-.332.007-.595.281-.588.612.006.332.279.594.611.588.332-.007.594-.28.588-.612-.007-.331-.279-.594-.611-.588zm-9.902 2.183c.332.007.594.281.588.612-.007.332-.279.595-.611.588-.332-.006-.595-.28-.588-.612.005-.331.279-.594.611-.588zm1.487-.5c-.006.332.256.605.588.612s.605-.257.611-.588c.007-.332-.256-.605-.588-.611-.332-.008-.604.255-.611.587zm2.132-1.094c-.006.332.256.605.588.612.332.006.605-.256.611-.588.007-.332-.256-.605-.588-.612-.332-.007-.604.256-.611.588zm3.447-5.749c-.331 0-.6.269-.6.6s.269.6.6.6.6-.269.6-.6-.269-.6-.6-.6zm0-2.225c-.331 0-.6.269-.6.6s.269.6.6.6.6-.269.6-.6-.269-.6-.6-.6zm0-2.031c-.331 0-.6.269-.6.6s.269.6.6.6.6-.269.6-.6-.269-.6-.6-.6z"/></svg>
      </li>
      <li>
      <span>FileBox</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0l-11 6v12.131l11 5.869 11-5.869v-12.066l-11-6.065zm7.91 6.646l-7.905 4.218-7.872-4.294 7.862-4.289 7.915 4.365zm-16.91 1.584l8 4.363v8.607l-8-4.268v-8.702zm10 12.97v-8.6l8-4.269v8.6l-8...

SCSS

html {
  height: 100%;
  font-family: 'Rubik', sans-serif;
  padding: 0 !important;
  margin: 0 !important;
  
  body {
    min-height: 100%;
    padding: 0 !important;
    margin: 0 !important;
    background-color: #a0a0a0;
    overflow: hidden;
  }
}
main {
  overflow: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%; 
  nav {
   background: #007effbd;
   ul {
    padding: 0 !important;
    margin: 0 auto !important;
    text-align: center;
    li {
      position: relative;
      text-align: center;
      list-style: none;
      outline: solid 1px #654c4c;
      cursor: pointer;
      svg {
        position: absolute;
        min-width: 90%;
        min-height: 90%;
        top: 5%;
        left: 5%;
        opacity: 0.3;
        *{
          fill: #333 !important;
          color: #000 !important;
        }
      }
      span {
        display: block;
        position: relative;
        padding: 8px;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        background: #33333347;
        word-break: break-all;
        outline: solid 1px #4444447d;
        z-index: 20;
      }
    }
    li:hover {
      background: #2d2d2d47;
      outline-color: #a0a0a0;
      span {
        background: transparent;
        outline: none;
        text-transform: uppercase;
      }
      path {
        fill: #e0e0e0 !important;
      }
    }
  }
   ul:nth-child(1) {
     li {
      display: inline-block;
      width: 14%;
      margin: 1%;
      padding: 25px 0;
     }
   }
     ul:nth-child(2){
       left: initial !important;
       left: 0px;
       background: #4d8c07d1;
     }
     ul:nth-child(3){
       background: #ff3b00d6;
       right: 0px;
     }
     ul:nth-child(2), ul:nth-child(3) {
       position: absolute;
       li {
        outline: solid 1px #555;
       }
     }
  }
  nav.docked {
    ul {
      height: 100%;
    }
    ul:nth-child(1){
      
    }
    ul:nth-child(2), ul:nth-child(3) {
     ...

JavaScript

!function(){var n=function(n,t,e){n.addEventListener?n.addEventListener(t,e,!1):n.attachEvent("on"+t,e)},t=function(n,t){for(var e in t)t.hasOwnProperty(e)&&(n[e]=t[e]);return n};window.fitText=function(e,i,o){var a=t({minFontSize:-1/0,maxFontSize:1/0},o),r=function(t){var e=i||1,o=function(){t.style.fontSize=Math.max(Math.min(t.clientWidth/(10*e),parseFloat(a.maxFontSize)),parseFloat(a.minFontSize))+"px"};o(),n(window,"resize",o),n(window,"orientationchange",o)};if(e.length)for(var f=0;f<e.length;f++)r(e[f]);else r(e);return e}}();


function build_nav(nav, menus){
  Array.prototype.slice.call(nav.firstElementChild.getElementsByTagName('span')).forEach(function(element){ window.fitText(element, 0.9) })
  console.log(menus)
  //TweenLite.to(nav, 20, {height:0, onUpdate:function(nav){  }})
}

function build_UI(){
	let nav = document.getElementsByTagName('nav')[0]
  let menus = Array.prototype.slice.call(nav.getElementsByTagName('ul')).slice(1,3)
	build_nav(nav, menus)
}

build_UI()