Honeycomb Menu - Inspired by TechRomancer

honeycomb-menu-inspired-by-techromancer.markdown

Honeycomb Menu - Inspired by TechRomancer

A work in progress. I was inspired by the the UI for a Dreamcast title called 'Tech Romancer'. Feel free to cycle through each element by clicking on the arrows or using the left and right keys. Thanks

A Pen by Miguel Fondeur on CodePen.

License.

index.html

<header>
  <h3>Tech Romancer Menu</h3>
  <h6>Click arrows or use arrow keys</h6>
<header>	 
<div class="container">
  <div class="hex-row-wrapper">
    <div class="hexagon one" data-type="games">
      <i class="fa fa-gamepad fa-3"></i>
    </div>
    <div class="hexagon two" data-type="desktop">
      <i class="fa fa-television"></i>
    </div>
    <div class="hexagon three" data-type="controls">
      <i class="fa fa-keyboard-o"></i>
    </div>
    <div class="hexagon four" data-type="profile">
      <i class="fa fa-user"></i>
    </div>
    <div class="hexagon five" data-type="search">
      <i class="fa fa-globe"></i>
    </div>
    <div class="hexagon six" data-type="music">
      <i class="fa fa-music"></i>
    </div>
  </div>
  <div class="active">
    <div class="arrow-left"></div>
    <div class="arrow-right"></div>
  </div>  
</div>

script.js

//initialize vars  
var arrowRight = document.querySelector('.arrow-right'),
    arrowLeft = document.querySelector('.arrow-left'),
    menuAngle = 0,
    iconAngle = 0,
    icons = document.querySelectorAll('i'),
    hexWrapper = document.querySelector('.hex-row-wrapper'),
    debounce,
    delay = 50;

//movenment controls
function moveRight() {
  clearTimeout(debounce);
  debounce = setTimeout(function(){
    menuAngle += 60;
    iconAngle -= 60;
    //rotate icon
    for(let i = 0; i < icons.length; i ++){
      icons[i].setAttribute("style", 'transform: rotate(' + iconAngle + 'deg);');
    }
    //rotate menu
    hexWrapper.setAttribute("style", 'transform: rotate(' + menuAngle + 'deg);' );
  },delay)
};

function moveLeft() {
  clearTimeout(debounce);
  debounce = setTimeout(function(){
    menuAngle -= 60;
    iconAngle += 60;
      //rotate icon
      for(let i = 0; i < icons.length; i ++){
        icons[i].setAttribute("style", 'transform: rotate(' + iconAngle + 'deg);');
      }
      //rotate menu
      hexWrapper.setAttribute("style", 'transform: rotate(' + menuAngle + 'deg);' );
  }, delay);
};
  
//click listeners
arrowLeft.addEventListener("click", function(){
  moveLeft();
});
arrowRight.addEventListener("click", function(){
  moveRight();
});

//key listenters
document.body.addEventListener("keydown", function(e){
  var keycode = e.charCode || e.keyCode;
  switch ( keycode ) {
    default: 
      break;
    case 37:
      moveLeft();
      break; 
    case 39:  
      moveRight();
      break; 
  }
});
  

scripts

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

style.css

@import url(https://fonts.googleapis.com/css?family=Orbitron);
body {
  margin: 0;
  font-weight: 300;
  color: rgba(250, 250, 250, .8);
  font-family: 'Orbitron', sans-serif;
  background: url('deep_space-wallpaper-1600x1200.jpg');
  letter-spacing: 1.5px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  background-image: linear-gradient(#092846, #000);
}

h3,
h6 {
  padding: 0px 20px;
  margin-bottom: 5px;
}

h6 {
  margin-top: 0px;
  text-indent: 15px;
  color: rgba(0, 224, 120, .5);
}

.container {
  width: 288px;
  height: 288px;
  margin: 0 auto;
  top: calc(50% - 133px);
  position: absolute;
	left: calc(50% - 133px);
/* 	border: 1px solid; */
}

.container:after {
	transform: rotate(90deg);
}

.hexagon {
	position: absolute;
	width: 100px;
	height: 87px;
	margin: 0;
	background-image: url(https://dl.dropboxusercontent.com/s/6fxnloq0m610zji/hexagon.svg?dl=0);
	background-repeat: no-repeat;
	background-size: contain;
}

.hexagon.one {
	top: 51px;
	left: 7px;
}
.hexagon.six {
	bottom: 51px;
	right: 7px;
}

.hexagon.two {
	top: 0px;
	left: calc(50% - 50px);
}
.hexagon.five {
	left: calc(50% - 50px);
	bottom: 0px;
}

.hexagon.three {
	top: 50px;
	right: 7px;
}

.hexagon.four {
	top: 151px;
	bottom: 62px;
	left: 7px;
}



.hex-row-wrapper {
	position: absolute;
	width: 288px;
	height: 288px;
	padding: 0px 0px 0px;
	transition: .3s;
	border-radius: 50%;
}

.hex-row {
  width: 265px;
  display: block;
  position: absolute;
  height: 94px;
  width: 100%;
  top: 0px;
}

.hex-row + .hex-row {
  top: 98px;
}

.hex-row + .hex-row .hexagon.left {
  top: -8px;
  left: -35px;
}

.hex-row + .hex-row .hexagon.right {
  right: -36px;
  top: -8px;
}

.hex.even {
  margin-top: 53px;
}

.active {
	position: absolute;
	width: 94px;
	height: 59.27px;
	background-color: transparent;
	margin: 27.14px 0;
	border-left: solid 5px #fff;
	border-right: solid 5px #fff;
	transform: rotate(90deg);
	bottom: -14px;
	left: calc(50% - 52px);
	display: block;
	opacity: .3;
}

.active:before,
.active:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 66.47px;
  height: 66.47px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: transparent;
  left: 9.766px;
}

.active:before {
  top: -37.234px;
  border-top: solid 7.0711px #fff;
  border-right: solid 7.0711px #fff;
}

.active:after {
  bottom: -36.234px;
  border-bottom: solid 7.0711px #fff;
  border-left: solid 7.0711px #fff;
}

.arrow-left {
  width: 0px;
  height: 0px;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 9px solid #fff;
  position: absolute;
  left: 28px;
  bottom: -18px;
  opacity: .6;
  z-index: 500;
}

.arrow-right {
  width: 0px;
  height: 0px;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 9px solid #fff;
  opacity: .6;
  left: 28px;
  position: absolute;
  top: -18px;
  z-index: 500;
}

i.fa {
	position: absolute;
	font-size: 40px;
	transition: .3s;
	transform-origin: center;
	z-index: 600;
	color: rgba(0,0,0,.3);
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 85px;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />