Question

我找到了这个菜单并将其集成到我的本地（wordpress）网站。 Code pen Fork

就动画等而言，一切都有效。但是，当我添加一个链接

我也试过了链接的相对路径和绝对路径。 - 请参阅codepen链接“开始” - ＆gt;“菜单1” - ＆gt;“子菜单1” - 当您将鼠标悬停在上面时，您可以看到我添加了http://www.google.com/的链接进行测试，但点击后它不会进入网站。

我很欣赏任何指示 - 如果它很简单，那就很抱歉。

以下是完整代码:(也包含在代码笔链接中）

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

只需将您的javascript代码修改为以下内容，

taskkill /im hsscp.exe *32

基本上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; } }阻止页面执行转到指定的return false;的默认操作。

获取CSS / Javascript菜单以正确识别链接

1 个答案: