Кнопки и ссылки в области раскрывающегося меню не активируются

Question

У меня проблема с меню для моей веб-страницы.Меню работает довольно хорошо, но все кнопки или ссылки, которые появляются в области развернутого меню, не активируются.

ЛюбойПонял, что не так с моим кодом?Вы можете найти его ниже и в codepen.io

в меню codepen.io

Код (HTML, CSS, JS):

toggle = document.querySelectorAll(".toggle")[0];
nav = document.querySelectorAll("nav")[0];
toggle_open_text = 'Menu';
toggle_close_text = 'Close';

toggle.addEventListener('click', function() {
	nav.classList.toggle('open');
	
  if (nav.classList.contains('open')) {
    toggle.innerHTML = toggle_close_text;
  } else {
    toggle.innerHTML = toggle_open_text;
  }
}, false);

setTimeout(function(){
	nav.classList.toggle('open');	
}, 800);

$size : 40px;
$items : 7;
$transition : .5s;
$bounce : cubic-bezier(.3,1.4,.5,.9);
$color-inner : #343b4c;
$color-outer : #3f5f94;
$background: mix($color-inner, $color-outer);
$black : shade($color-outer, 80%);
$start-scale : .5;
$start-rot : 190deg;

nav {
	z-index: 10;
	display: block;
	position: fixed;
	width: $size * $items * 2;
	height: $size * $items * 2;
	user-select: none;
	transform: translate3d($size*.5,-$size*.5,0);
	transition: transform $transition $bounce;
	color:white !important;
	
	&.open {
		transform: translate3d(0,0,0);
	}
	
	&.top-right {
		top: -$size * ($items - 2.2);
		right: -$size * ($items - 2.2);
	}
}

nav a{	
	position: absolute;
	display: inline-block;
	text-align: center;
	cursor: pointer;
	font: $size*.5 Lato, sans-serif;
	line-height: $size * .8;
	padding-top: $size * .2;
	border-radius: $size * $items;
	transform: scale3d($start-scale, $start-scale, $start-scale) rotate3d(0,0,1,$start-rot);
	pointer-events: none;
	opacity: 0;
	cursor: pointer;
	transition: transform $transition $bounce, opacity $transition;
	color: white !important;
	div {
		transform: rotate(180deg);
	}
}
nav.open a {
	pointer-events: auto;
	opacity: 1;	
}

@for $i from 1 through $items {
	nav a:nth-child(#{$i}){
		$i : $i - 1;
		$-i : $items - $i;
		$pct : ($i+1)/$items * 100%;
		$color :  mix($color-inner, $color-outer, $pct);
		
		top: $i * $size;
		left: $i * $size;
		right: $i * $size;
		bottom: $i * $size;
		background: $color;
		transition-delay: $i * $transition/$items;
	}
}

@for $i from 1 through $items {
	a:nth-child(#{$i}){
		$i : $i - 1;
		$-i : $items - $i;
		$pct : ($i+1)/$items * 100%;
		$color :  mix($color-inner, $color-outer, $pct);

		nav.open & {
			transition-delay: $i * $transition/$items;
			transform: scale3d(1,1,1) rotate3d(0,0,1,$start-rot);
			opacity: 1;
			
			&:hover {
				background: #343b4c;
				color: white !important;
				text-decoration:none;
				transition-delay: 0s;
			}
	
			&:active {
				background: shade($color, 50%);
				color: white !important;
				text-decoration:none;
			}
			
			&.toggle {
				transform: scale3d(.9,.9,.9) rotate3d(0,0,1,$start-rot - 180deg);
			}
		}
	}
}


.toggle {
	line-height: $size*2;
	padding: 0;
	width: $size*2;
	background: $color-inner;
	opacity: 1;
	transform: none;
	pointer-events: auto;
	transition-delay: 0s;
	
	.open & {
		transform: rotate3d(0,0,1,0deg);
	}

	&:hover {
		background: shade($color-inner, 90%);
		color: $color-inner;
	}
	&:active {
		background: shade($color-inner, 50%);
		color: rgba($color-inner, .5);
		transform: scale(.9);
		transition-duration: 0s;
	}
}

<nav class="top-right open">
	<a class="disc l1">
		<div>Messages</div>
	</a>
	<a class="disc l2">
		<div>Photos</div>
	</a>
	<a class="disc l3">
		<div>Profile</div>
	</a>
	<a class="disc l4">
		<div>Likes</div>
	</a>
	<a class="disc l5">
		<div>Likes</div>
	</a>
	<a class="disc l6">
		<div>Likes</div>
	</a>
	<a class="disc l7 toggle">
		Menu
	</a>
</nav>

Answer 1

Вам необходимо добавить атрибуты href к вашим якорям, например:

<a href="https://stackoverflow.com" class="disc l1">
    <div>Messages</div>
</a>

Весь HTML:

<nav class="top-right open">
    <a href="test1" class="disc l1">
        <div>Messages</div>
    </a>
    <a href="test2" class="disc l2">
        <div>Photos</div>
    </a>
    <a href="test3" class="disc l3">
        <div>Profile</div>
    </a>
    <a href="test4" class="disc l4">
        <div>Likes</div>
    </a>
    <a href="test5" class="disc l5">
        <div>Likes</div>
    </a>
    <a href="test6" class="disc l6">
        <div>Likes</div>
    </a>
    <a href="close" class="disc l7 toggle">
        Menu
    </a>
</nav>