Getting CSS/Javascript menu to recognize links properly

Question

I have found this menu and have integrated it into my local (wordpress) site. Code pen Fork

Everything works as it should as far as the animation, ect. However, when I add a link into the

I have tried both relative and absolute paths for the link as well. -- See the codepen link "start"-->"Menu 1"-->"Sub menu 1" -- as you hover over you can see I have added the link of http://www.google.com/ for a test, but when clicked it does not go to the site.

I appreciate any pointers - and sorry if it is simple.

Here is the full code: (Also contained on the code pen link)

HTML:

<div class="radmenu"><a href="#" class="show" >START</a>
  <ul>
    <li>
      <a href="#" class="">Menu 1</a>
      <ul>
        <li><a href="http://www.google.com">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 2</a></li>
        <li><a href="#">Sub Menu 3</a></li>
        <li><a href="#">Sub Menu 4</a></li>
        <li><a href="#">Sub Menu 5</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Menu 2</a>
      <ul>
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 2</a></li>
        <li><a href="#">Sub Menu 3</a></li>
        <li><a href="#">Sub Menu 4</a></li>
        <li><a href="#">Sub Menu 5</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Menu 3</a>
      <ul>
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 2</a></li>
        <li><a href="#">Sub Menu 3</a></li>
        <li><a href="#">Sub Menu 4</a></li>
        <li><a href="#">Sub Menu 5</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Menu 4</a>
      <ul>
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 2</a></li>
        <li><a href="#">Sub Menu 3</a></li>
        <li><a href="#">Sub Menu 4</a></li>
        <li><a href="#">Sub Menu 5</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Menu 5</a>
      <ul>
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 2</a></li>
        <li><a href="#">Sub Menu 3</a></li>
        <li><a href="#">Sub Menu 4</a></li>
        <li><a href="#">Sub Menu 5</a></li>
      </ul>
    </li>
  </ul>
</div>

CSS:

@import "compass/css3";

$sub-menus :  5;

body {
 background: url(http://www.scenicreflections.com/files/Hazy_Forest_Road_Wallpaper_qoek0.jpg) 
}
.radmenu {
  position: absolute;
  display:flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;

  > a {
    top: calc(50% - 60px);
    left: calc(50% - 60px);
    &.show {
     display: flex !important; 
    }
  }
  li {
   -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
   transition: all 1s ease; 
  }
  a {
    position: absolute;
    width: 120px;
    height: 120px;
    background: rgba(white, 0.9);
    text-align: center;
    align-items: center;
    justify-content: center;
    border-radius: 120px;
    display: none;
    text-decoration: none;
    color: #333;
    transition: all 1s ease;
    box-shadow: 0 0 15px #222;
    font-family: "segoe ui";
    font-weight: 200;
    font-size: 16px;
  }
  .selected {
    background: rgba(#333, 0.9);
    display: flex;
    top: calc(50% - 60px);
    left: calc(50% - 60px);
    color: #f1f1f1;
    box-shadow: 0 0 10px #f1f1f1;
    + ul {
      @for $i from 1 through $sub-menus {
        > li:nth-child(#{$i}) {
          $angle: 360deg / $sub-menus * $i;
          -webkit-transform: rotate($angle) translateX(100px);
          transform: rotate($angle) translateX(100px);
          > a {
            -webkit-transform: rotate(0 - $angle);
            transform: rotate(0 - $angle);
          }
        }
      }
      > li > a {
        display: flex
      }
    }
  }

}

Javascript:

var buttons = document.querySelectorAll(".radmenu a");

for (var i=0, l=buttons.length; i<l; i++) {
  var button = buttons[i];
  button.onclick = setSelected;
}

function setSelected(e) {
    if (this.classList.contains("selected")) {
      this.classList.remove("selected");
      if (!this.parentNode.classList.contains("radmenu")) {
        this.parentNode.parentNode.parentNode.querySelector("a").classList.add("selected")
      } else {
        this.classList.add("show");
      }
    } else {
      this.classList.add("selected");
      if (!this.parentNode.classList.contains("radmenu")) {
        this.parentNode.parentNode.parentNode.querySelector("a").classList.remove("selected")
      } else {
        this.classList.remove("show");
      }
    }
    return false;
}

Answer 1

Just modify your javascript code to following,

function setSelected(e) {
  if(this.getAttribute("href") == "#"){
    if (this.classList.contains("selected")) {
      this.classList.remove("selected");
      if (!this.parentNode.classList.contains("radmenu")) {
        this.parentNode.parentNode.parentNode.querySelector("a").classList.add("selected")
      } else {
        this.classList.add("show");
      }
    } else {
      this.classList.add("selected");
      if (!this.parentNode.classList.contains("radmenu")) {
        this.parentNode.parentNode.parentNode.querySelector("a").classList.remove("selected")
      } else {
        this.classList.remove("show");
      }
    }
    return false;
  }
  else{
    return true;
  }
}

Basically the return false; was preventing the page to perform the default action of going to the assigned href .