javascript - 使用javascript在上半圈显示菜单

Question

我正在使用以下链接显示菜单

http://codepen.io/anon/pen/dWdJbV

但我只想在上半圈显示它们。即使菜单数量发生变化，它也应该只使用上半圈。

Js代码

var items = document.querySelectorAll('.circle a');

for(var i = 0, l = items.length; i < l; i++) {
  items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(2/l)*i*Math.PI)).toFixed(4) + "%";

  items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(5/l)*i*Math.PI)).toFixed(4) + "%";
}

document.querySelector('.menu-button').onclick = function(e) {
   e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
}

我尝试通过改变值 sin sin 和 cos 但没有得到所需的输出

Answer 1

Here is the quick demo :

var isOn = false;

$('#menu-button').click(function() {
  if(isOn) {
    reset();
  } else {
    setPosition();
  }
});

function setPosition() {
  isOn = true;
  var links = $('#menu-button a');
  var radius = (links.length * links.width()) / 2;
  var degree = Math.PI / links.length, angle = degree / 2;
  
  links.each(function() {
    var x = Math.round(radius * Math.cos(angle));
    var y = Math.round(radius * Math.sin(angle));
    
    $(this).css({
      left: x + 'px',
      top: -y + 'px'
    });
    
  
    
    angle += degree;
  });
}

function reset() {
  $('#menu-button a').css({
    left: 0 + 'px',
    top: 0 + 'px'
  });
  
  isOn = false;
}

body {
  margin: 0;
  background: #39D;
}



#menu-button:before {
  position: absolute;
  top: 0; left: 0;
  width: 50px;
  height: 50px;
  background: #dde;
  cursor: pointer;
  text-align: center;
  line-height: 50px;
  color: #444;
  border-radius:50%;
  content:"\f0c9";    font: normal normal normal 14px/1 FontAwesome;
  font-size:26px;
}

#menu-button {
  position: absolute;
  margin: auto;
  top: 150px; left: 0; right: 0;
  width: 50px;
  height: 50px;
  cursor: pointer;
  text-align: center;
}

#menu-button > a {
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  
  -webkit-transition: top .5s, left .5s;
  -moz-transition: top .5s, left .5s;
  text-align: center;
  text-decoration: none;
  line-height: 50px;
  color: #EBEAE8;
  z-index: -1;
  border-radius:50%;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Demo by http://creative-punch.net -->




<div id="menu-button" class="entypo-menu">
  <a href="" class="fa fa-home fa-2x"></a>
  <a href="" class="fa fa-home fa-2x"></a>
  <a href="" class="fa fa-home fa-2x"></a>
  <a href="" class="fa fa-home fa-2x"></a>
  <a href="" class="fa fa-home fa-2x"></a>
  <a href="" class="fa fa-home fa-2x"></a>
  <a href="" class="fa fa-home fa-2x"></a>
  <a href="" class="fa fa-home fa-2x"></a>
</div>