start-page-01

by Nic Fontaine

HTML

<body>

  <div class='container-main'>
  
  <!-- <iframe id='search' src="https://duckduckgo.com/search.html?width=350&duck=yes&prefill=Search&focus=yes" style="overflow:hidden;margin:0;padding:0;width:483px;height:60px;" frameborder="0"></iframe> -->
  
  <ul id='ul-links'>
    <li><a href='#'>link</a></li>
    <li><a href='#'>link</a></li>
    <li><a href='#'>link</a></li>
    <li><a href='#'>link</a></li>
    <li><a href='#'>link</a></li>
    <li><a href='#'>link</a></li>
    <li><a href='#'>link</a></li>
    <li><a href='#'>link</a></li>
    <li><a href='#'>link</a></li>
    <li><a href='#'>link</a></li>
  </ul>
  
  </div>

</body>

CSS

body {
  font-family: "Open Sans", sans-serif;
  text-align: center;
  padding: 20px;
  padding-right: 0;
  background: #D4D1DE;
}

.container-main {
  max-width: 600px;
  margin: 0 auto;
  position: absolute;
  right: 0;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}

iframe {
  border: none;
  margin: 0 auto;
}

ul {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  padding-left: 0;
}

ul li {
  list-style: none;
  flex: 1;
  padding: 10px;
  
  justify-content: space-between;
  flex-basis: 100px;
  height: 100px;
}

ul li a {
  background: rgba(187,196,192,0.4);
  display: block;
  border-radius: 4px;
  height: 100%;
  vertical-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  line-height: 95px;
  color: #eee;
  text-decoration: none;
  transition: transform 0.1s ease-out;
  transform: translateY(0);
  font-weight: bold;
}

ul li a:focus, ul li:hover a {
  transform: translateY(-2px);
  background: rgba(200,208,204,0.4);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  outline: none;
}

JavaScript

var linkTagsDomArray = document.getElementById('ul-links').getElementsByTagName('a');
var linksNo = linkTagsDomArray.length;
var linkF = -1;
var inputSearch = document.getElementById('search');
var linkFOffTop;
var linkColNo;

var linksObj = {};
var iterLinkD;

// ADD EACH LINK, W/ IT'S OFFSET TOP AS KEY/VAL PAIR
for (i=0; i<linksNo; i++) {
	linksObj['l?'+i] = linkTagsDomArray[i].offsetTop;
}

// console.log(linksObj);

document.addEventListener('keydown', function (e) {

  // KEY LEFT
  if (e.which == 37) {
    e.preventDefault();
    
    // INC ONLY IF 1 OR GREATER
    if (linkF >= 1) {
    	linkF--;
    }
    
    // OTHERWISE, RESET TO -1
    else {
    	linkF = -1;
    }
   
  }
  
  // KEY RIGHT
  if (e.which == 39) {
    e.preventDefault();
    
    if (linkF < linksNo-1) {
    	linkF++;
    }
    
    else {
    	linkF = 0;
    }
    
  }
  
  // KEY UP
  if (e.which == 38) {
    e.preventDefault();
  }
  
  // KEY DOWN
  if (e.which == 40) {
    e.preventDefault();
    
    	iterLinkD = 'l?' + linkF;
      
    	//for (var iterLinkD in linksObj) {
      
      	//if (linksObj.hasOwnProperty('l?2')) {
        	//console.log(linksObj[iterLinkD]);
          console.log(linkF);
          console.log(linksObj['l?'+linkF]);
        //}
        
      //}
    
  }
  
  // FOCUS
  if (linkF >= 0 && linkF < linksNo) {
  	linkTagsDomArray[linkF].focus();
    linkFOffTop = linkTagsDomArray[linkF].offsetTop;
  }
  
  // IT'S NEG, BLUR ALL
  else {
  	for (i=0; i<linksNo; i++) {
    	linkTagsDomArray[i].blur();
    }
    // search.contentWindow.document.getElementsByTagName('input')[0].focus();
  }
  
  // console.log(linkF);
  
});