JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Mind Map</title>

  <link rel="stylesheet" href="01.css" type="text/css" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
  <script src="mindmap.js"></script> 

</head>
<body>
  <div class="container">
    <ul>
      <li id="show"><a href="#">Rohan</a>
    
        <ul id="categories">
          <li><a href="#">Facebook</a></li>
          <li><a href="#">Interests</a></li>
          <li><a href="#">Pages</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Places</a></li>
          <li><a href="#">Variables</a></li>
        </ul>
      </li>
    </ul>
  </div>
</body>
</html>

CSS

#categories li {
  top: 16px;
  left: 790px;
  position: absolute;
  text-decoration: none;
}
#show{
  margin-left: 40%;
}

ul{
    list-style-type: none;
  text-decoration: none;
}

.container{
  border: 2px solid white;
}

body {
    background-color: #ccc;
}

.highlight{
  background-color: #ff0000;
}

a {
  color:#fff;
  font-family: Arial, "MS Trebuchet", sans-serif;
  text-decoration: none;
  background:#3399ff;
  border: 2px solid white;
  -webkit-border-top-left-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-topleft: 20px;
  -moz-border-radius-bottomright: 20px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding: 7px 7px 7px 7px;
  border: 5px 5px 5px 5px;
  word-spacing:5px;
  vertical-align: 50px;
}

JavaScript

$(document).ready(function() {

//initial variable declaration. you can put these inside a
//closure or namespace if you prefer.
//reference to targets
var targets = $('ul#categories>li'),
    //number of targets
    length = targets.length,
    //animation state
    is_animating = false,
    //whether we're expanding or contracting
    is_expanding = false,
    //distance
    distance = 240,
    //constant, based on number of targets
    angle_const = 180 / length,
    //starting angle
    angle_start = angle_const * .5;

    

//run through each element and store original coordinates,
//then hide them
targets.each(function() {
    var element = $(this),
    offset = element.offset();
    console.log(offset);
    //returns left and top coordinates of element
    element.data('previous_position', {
        x: offset.left,
        y: offset.top
    });

}).hide();

//bind the click event to the show div
$('#show').on('click.mynamespace', function() {
    //if we're already animating, do nothing
    if (is_animating) {
        return;
    }
    //else, toggle the animation state to animating
    toggle_animation_state();
    //loop over the targets
    targets.each(function(i) {
        //determine the constant to multiply by,
        //based on animation state
        var state = (is_expanding) ? 1 : -1,
            //set the resolved angle for this target
            angle = (i + (1 * state)) * angle_const - angle_start,
            //determine x from angle
            x = Math.cos(angle * Math.PI / 180) * distance,
            //determine y from angle
            y = Math.sin(angle * Math.PI / 180) * distance;

        //call the function for actually starting the animation
        set_position($(this), x, y, i * 750);
    });
});

//function to toggle whether we're animating,
//and whether we're expanding on this animation cycle or not

function toggle_animation_state() {
    is_animating = !is_animating;
    if (is_animating) {
        is_expanding =...