<header class="header">
    <h1>Dotted Menu Concept</h1>
    <h4>By: <a href="http://kylebrumm.com" target="_blank">Kyle Brumm</a></h4>
</header>

<a href="#" class="menu">
    <div class="pix"></div>
    <div class="pix"></div>
    <div class="pix"></div>
    <div class="pix"></div>
    <div class="pix"></div>
    <div class="pix"></div>
    <div class="pix"></div>
    <div class="pix"></div>
    <div class="pix"></div>
</a>

@import url(https://fonts.googleapis.com/css?family=Raleway:300);

@function random-color($min: 0, $max: 255, $alpha: 1) {
	@if $min < 0 {
		$min: -1;
	} @else {
		$min: $min - 1;
	}
	@if $max > 255 {
		$max: 256;
	} @else {
		$max: $max + 1;
	}
	$red: random($max) + $min;
	$green: random($max) + $min;
	$blue: random($max) + $min;
	@return rgba($red, $green, $blue, $alpha);
}

$primary: random-color($min: 100, $max: 100);
$primary-light: mix(#ffffff, $primary, 25%);
$primary-dark: mix(#000000, $primary, 25%);

*,
*:before,
*:after {
    box-sizing: border-box;    
}

html {
    padding-top: 50px;
    font-family: 'Raleway', Helvetica, arial, sans-serif;
    text-align: center;
    background-color: #eeeeee;
}

.header {
    text-align: center;
}

a {
  text-decoration: none;
  color: $primary;
}


/*-------------------------------------------------------------------*/

$pix-size: 8px;
.menu {
    position: relative;
    display: block;
    width: ($pix-size*5);
    height: ($pix-size*5);
    margin: 2rem auto 0 auto;
    
    .pix {
        position: absolute;
        width: $pix-size;
        height: $pix-size;
        background-color: $primary;
        border-radius: 100%;
        transition: 0.2s ease-in-out;

        $num: 0;
        @for $i from 1 through 9 {
            @if $i%3 == 1 {
                $num: 0;
            }
            
            &:nth-of-type(#{$i}) {
                transform: translate(($pix-size*2)*$num, ($pix-size*2)*(floor(($i - 1)/3)))
            }
            
            $num: $num + 1;
        }
    }

    &:hover {
        .pix {            
            background-color: $primary-dark;
            
            &:nth-of-type(1) { transform: translate(-($pix-size), -($pix-size)); }
            &:nth-of-type(3) { transform: translate(($pix-size*5), -($pix-size)); }
            &:nth-of-type(7) { transform: translate(-($pix-size), ($pix-size*5)); }
            &:nth-of-type(9) { transform: translate(($pix-size*5), ($pix-size*5)); }
        }
    }

    &.active {
        .pix {
            &:nth-of-type(1) { transform: translate(0, 0); }
            &:nth-of-type(2) { transform: translate($pix-size, $pix-size); }
            &:nth-of-type(3) { transform: translate(($pix-size*4), 0); }
            &:nth-of-type(4) { transform: translate($pix-size, ($pix-size*3)); }
            &:nth-of-type(6) { transform: translate(($pix-size*3), $pix-size); }
            &:nth-of-type(7) { transform: translate(0, ($pix-size*4)); }
            &:nth-of-type(8) { transform: translate(($pix-size*3), ($pix-size*3)); }
            &:nth-of-type(9) { transform: translate(($pix-size*4), ($pix-size*4)); }
        }
        
        &:hover {
            .pix {
                &:nth-of-type(1) { transform: translate(-($pix-size), -($pix-size)); }
                &:nth-of-type(2) { transform: translate(($pix-size/2), ($pix-size/2)); }
                &:nth-of-type(3) { transform: translate(($pix-size*5), -($pix-size)); }
                &:nth-of-type(4) { transform: translate(($pix-size/2), ($pix-size*3.5)); }
                &:nth-of-type(6) { transform: translate(($pix-size*3.5), ($pix-size/2)); }
                &:nth-of-type(7) { transform: translate(-($pix-size), ($pix-size*5)); }
                &:nth-of-type(8) { transform: translate(($pix-size*3.5), ($pix-size*3.5)); }
                &:nth-of-type(9) { transform: translate(($pix-size*5), ($pix-size*5)); }
            }
        }
    }
}

document.querySelector('.menu').addEventListener('click', function() {
    this.classList.toggle('active');
});