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">
    <form name="input" action="addstuff.php" method="get">
      New Category: <input type="text" name="newcategory" />
      <input type="submit" value="Submit" />
    </form>
    <div class="main">
      <ul>
        <li id="show"><a class="click" href="#">Rohan</a>
          <ul id="categories">
            <li class="header"><a href="#">Contact</a>
              <ul>
                <li>email</li>
                <li>phone</li>
                <li>textplus</li>
                <li>mail</li>
              </ul>
            </li>
            <li class="header"><a href="#">Interests</a></li>
            <li class="header"><a href="#">Pages</a></li>
            <li class="header"><a href="#">About</a></li>
            <li class="header"><a href="#">Places</a></li>
            <li class="header"><a href="#">Resume</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

CSS

.header {
    position:relative;
}

#main {
  position: relative;
  width: 700px;
  margin: 0 auto;
}

#categories li {
  top: 0px;
  left: 0px;
  position: absolute;
  text-decoration: none;
}

#show {
  left: 50%;
  position: absolute;
}

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

.container{
  border: 2px solid white;
  height: 500px;
  min-width: 500px;
}

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 () {
    $("ul#categories>li").hide();

    //select all targets
    var targets = $("ul#categories>li");

    //number of targets
    var num_targets = targets.length;

    //distance that the targets stray from the #show
    var distance = 240;

    //the angle that the targets stray from the #show
    var angle_const = 180 / num_targets;

    //starting angle for the targets
    var angle_start = angle_const * 0.5;

    var showing = true;

    $("a.click").click(function () {

        var direction = showing ? "+=" : "-=";
        showing = !showing;

        targets.each(function ( index ) {
            var angle = angle_const * ( index + 0.5 ) * Math.PI / 180;
            var x = Math.cos(angle) * distance;
            var y = Math.sin(angle) * distance;
            $(this).delay( index * 300).animate({
                opacity: "toggle",
                'left': direction + x + 'px',
                'top': direction + y + 'px'
            }, 750);

        });
    });
    
    $("li.header").click(function () {
        
        targets = $("ul#categories>li>ul>li");                
        
        var direction = showing ? "+=" : "-=";
        showing = !showing;

        targets.each(function ( index ) {
            var angle = angle_const * ( index + 0.5 ) * Math.PI / 180;
            var x = Math.cos(angle) * distance;
            var y = Math.sin(angle) * distance;
            $(this).delay( index * 300).animate({
                opacity: "toggle",
                'left': direction + x + 'px',
                'top': direction + y + 'px'
            }, 750);

        });
    });
});