CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Brk
Brk

Reputation: 1297

create a radial menu using javascript only

Hey I am trying to create a radial menu in the most generic way. I have found an example of radial menu here: http://codepen.io/suez/pen/vAais I have translate the SCSS to css and I have tried to remove hardcore css like the following

.rotater:nth-child(1) {
  transform: rotate(-20deg);
}

and convert it to jquery code like this:

     var rotateDegreeOne     = -20;
     for(var i=1;i<10;i++){
        $('.rotater:nth-child('+i+')').css('transform', 'rotate('+rotateDegreeOne+'deg)');
        rotateDegreeOne = rotateDegreeOne + rotateDifferenceOne;
    }

this works ok,but when I am trying to convert the following css to jquery code,I faced a problem:

.menu.active .rotater:nth-child(1) .btn-icon {
  transform: translateY(-10em) rotate(20deg);
}

.menu.active .rotater:nth-child(2) .btn-icon {
  transform: translateY(-10em) rotate(-20deg);
}


.menu.active .rotater:nth-child(3) .btn-icon {
  transform: translateY(-10em) rotate(-60deg);
}


.menu.active .rotater:nth-child(4) .btn-icon {
  transform: translateY(-10em) rotate(-100deg);
}


.menu.active .rotater:nth-child(5) .btn-icon {
  transform: translateY(-10em) rotate(-140deg);
}


.menu.active .rotater:nth-child(6) .btn-icon {
  transform: translateY(-10em) rotate(-180deg);
}


.menu.active .rotater:nth-child(7) .btn-icon {
  transform: translateY(-10em) rotate(-220deg);
}


.menu.active .rotater:nth-child(8) .btn-icon {
  transform: translateY(-10em) rotate(-260deg);
}


.menu.active .rotater:nth-child(9) .btn-icon {
  transform: translateY(-10em) rotate(-300deg);
}

convert it to the following code:

var rotateDegreeTwo     = 20;
  var rotateDifferenceTwo = -40;
for(var i=1;i<10;i++){
   $('.menu.active .rotater:nth-child('+i+') .btn-icon').css('transform','translateY(-10em) rotate('+rotateDegreeTwo+'deg)')
    rotateDegreeTwo = rotateDegreeTwo + rotateDifferenceTwo;
  }

the problem is that this above code isn't working at all and doesn't generate the above css code.

I am attached the current situation of the code:

$(document).ready(function() {
  $(".trigger").click(function() {
    $(".menu").toggleClass("active"); 
  });
  var rotateDegreeOne     = -20;
  var rotateDegreeTwo     = 20;
  var rotateDifferenceOne = 40;
  var rotateDifferenceTwo = -40;
  for(var i=1;i<10;i++){
    $('.rotater:nth-child('+i+')').css('transform', 'rotate('+rotateDegreeOne+'deg)');
   $('.menu.active .rotater:nth-child('+i+') .btn-icon').css('transform','translateY(-10em) rotate('+rotateDegreeTwo+'deg)')
    rotateDegreeOne = rotateDegreeOne + rotateDifferenceOne;
    rotateDegreeTwo = rotateDegreeTwo + rotateDifferenceTwo;
  }
});
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background: linear-gradient(45deg, #e10522 0%, rgba(225, 5, 34, 0) 70%), linear-gradient(135deg, #3105d1 10%, rgba(49, 5, 209, 0) 80%), linear-gradient(225deg, #0adbd8 10%, rgba(10, 219, 216, 0) 80%), linear-gradient(315deg, #09f505 100%, rgba(9, 245, 5, 0) 70%);
}

.absolute-center, .menu, .menu .btn .fa, .menu .btn.trigger .line {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.menu {
  width: 5em;
  height: 5em;
}
.menu .btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  opacity: 0;
  z-index: -10;
  cursor: pointer;
  transition: opacity 1s, z-index 0.3s, transform 1s;
  transform: translateX(0);
}
.menu .btn .fa {
  font-size: 3em;
  transition: color 0.3s;
}
.menu .btn:hover .fa {
  color: rgba(255, 255, 255, 0.7);
}
.menu .btn.trigger {
  opacity: 1;
  z-index: 100;
  cursor: pointer;
  transition: transform 0.3s;
}
.menu .btn.trigger:hover {
  transform: scale(1.2);
}
.menu .btn.trigger:hover .line {
  background-color: rgba(255, 255, 255, 0.7);
}
.menu .btn.trigger:hover .line:before, .menu .btn.trigger:hover .line:after {
  background-color: rgba(255, 255, 255, 0.7);
}
.menu .btn.trigger .line {
  width: 60%;
  height: 6px;
  background: #000;
  border-radius: 6px;
  transition: background-color 0.3s, height 0.3s, top 0.3s;
}
.menu .btn.trigger .line:before, .menu .btn.trigger .line:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 6px;
  background: #000;
  border-radius: 6px;
  transition: background-color 0.3s, transform 0.3s;
}
.menu .btn.trigger .line:before {
  top: -12px;
  transform-origin: 15% 100%;
}
.menu .btn.trigger .line:after {
  top: 12px;
  transform-origin: 25% 30%;
}
.menu .rotater {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
}
.menu.active .btn-icon {
  opacity: 1;
  z-index: 50;
}
.menu.active .trigger .line {
  height: 0px;
  top: 45%;
}
.menu.active .trigger .line:before {
  transform: rotate(45deg);
  width: 110%;
}
.menu.active .trigger .line:after {
  transform: rotate(-45deg);
  width: 110%;
}


/*.menu.active .rotater:nth-child(1) .btn-icon {
  transform: translateY(-10em) rotate(20deg);
}


.menu.active .rotater:nth-child(2) .btn-icon {
  transform: translateY(-10em) rotate(-20deg);
}


.menu.active .rotater:nth-child(3) .btn-icon {
  transform: translateY(-10em) rotate(-60deg);
}


.menu.active .rotater:nth-child(4) .btn-icon {
  transform: translateY(-10em) rotate(-100deg);
}


.menu.active .rotater:nth-child(5) .btn-icon {
  transform: translateY(-10em) rotate(-140deg);
}


.menu.active .rotater:nth-child(6) .btn-icon {
  transform: translateY(-10em) rotate(-180deg);
}


.menu.active .rotater:nth-child(7) .btn-icon {
  transform: translateY(-10em) rotate(-220deg);
}


.menu.active .rotater:nth-child(8) .btn-icon {
  transform: translateY(-10em) rotate(-260deg);
}


.menu.active .rotater:nth-child(9) .btn-icon {
  transform: translateY(-10em) rotate(-300deg);
}*/
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <div class="btn trigger">
    <span class="line"></span>
  </div>
  <div class="icons">
    <div class="rotater">
      <div class="btn btn-icon" name="fa-codepen">
        <i class="fa fa-codepen" name="fa-codepen"></i>
      </div>
    </div>
    <div class="rotater">
      <div class="btn btn-icon">
        <i class="fa fa-facebook"></i>
      </div>
    </div>
    <div class="rotater">
      <div class="btn btn-icon">
        <i class="fa fa-google-plus"></i>
      </div>
    </div>
    <div class="rotater">
      <div class="btn btn-icon">
        <i class="fa fa-twitter"></i>
      </div>
    </div>
    <div class="rotater">
      <div class="btn btn-icon">
        <i class="fa fa-dribbble"></i>
      </div>
    </div>
    <div class="rotater">
      <div class="btn btn-icon">
        <i class="fa fa-linkedin"></i>
      </div>
    </div>
    <div class="rotater">
      <div class="btn btn-icon">
        <i class="fa fa-github"></i>
      </div>
    </div>
    <div class="rotater">
      <div class="btn btn-icon">
        <i class="fa fa-behance"></i>
      </div>
    </div>
    <div class="rotater">
      <div class="btn btn-icon">
        <i class="fa fa-behance"></i>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 348

Answers (1)

Sam Kotlove
Sam Kotlove

Reputation: 196

The whole transforming needs to be wrapped inside the listener for the click event. In the original code, the css was transforming the buttons every time menu had the class active (every time menu is clicked). In your version, it was only happening once, when the document was ready. In order to mimic that behavior, you need to transform the buttons every time. Now we rotate it one way and translate y if the menu is active, and just rotate it back if the menu is inactive.

  $(document).ready(function() {
    $(".trigger").click(function() {
      $(".menu").toggleClass("active"); 

      var rotateDegreeOne     = -20;
      var rotateDegreeTwo     = 20;
      var rotateDifferenceOne = 40;
      var rotateDifferenceTwo = -40;
      for(var i=1;i<10;i++){
       $('.rotater:nth-child('+i+')').css('transform', 'rotate('+rotateDegreeOne+'deg)');

       if ($(".menu").hasClass("active")) {
         $('.menu .rotater:nth-child('+i+') .btn-icon').css('transform','translateY(-10em) rotate('+rotateDegreeTwo+'deg)')
       } else { 
         $('.menu .rotater:nth-child('+i+') .btn-icon').css('transform','rotate('+(rotateDegreeTwo*-1)+'deg)')
       }
       rotateDegreeOne = rotateDegreeOne + rotateDifferenceOne;
       rotateDegreeTwo = rotateDegreeTwo + rotateDifferenceTwo;
    }
  });
});

Upvotes: 1

Related Questions