CODEWITHSUNDEEP
javascripthtmlcss
hrishi
hrishi

Reputation: 1656

Show menus in upper half circle using javascript

I am using following link to show menus

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

But I want to show them only in upper half circle. Even menu count changes it should use only upper half circle.

Js code

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');
}

I tried by changing values sin sin and cos but not getting required output

Upvotes: 0

Views: 259

Answers (2)

Anton Krylov
Anton Krylov

Reputation: 449

I made this changes in you example for displaying items only in top part of circle:

var items = document.querySelectorAll('.circle a');
var angle = 0;
var step = (Math.PI) / items.length;
for(var i = 0, l = items.length; i < l; i++) {
  items[i].style.left = (50 - 35*Math.cos(angle).toFixed(4)) + "%";

  items[i].style.top = (50 + 35* (-Math.abs(Math.sin(angle)))).toFixed(4) + "%";
  angle += step;
}

So you need only angles from 0 to 180 degrees. That's why i use (-Math.abs(Math.sin(angle)))

Upvotes: 1

Sahil Dhir
Sahil Dhir

Reputation: 4250

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>

Upvotes: 2

Related Questions