JSFiddle - React, Tailwind, and code Playground

by amsardesai

HTML

<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>hello</li>
                <li>goodbye</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>

CSS

#main {
  position: absolute;
  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;
}

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();

    if ($('.header').children().length > 0) {

        $('li.header>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;


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

    });

    function clickHandler(targets) {

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

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

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

        if (targets.hasClass("active")) {
            console.log("false");
        }
        else {
            clickHandler(targets);

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

            });


        }
    });

    var pos =...