JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

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: 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

/*

PROBLEM
-------------------------

1) want to make the $("a.click") function so that i can use it it in general

for example, i will have function(something) where function is the .clcik function (that is at he bottom of this code and something is the target that will be clicked (eg. a.click)

2) the variable targets should be set to the children of the clcik button (eg. children of a.click)

*/



$(document).ready(function () {
    
    $("ul#categories li").hide();
    
    if ($('.header').children().length > 0) {
        
    $('li.header > li').hide();
            
    }

    //select all targets
    var targets = $("ul#categories>li");
    
    var subtargets = $(".header > 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;
    
    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() {
        clickHandler( targets );
    });
    
    $("li.header").click(function() {
        clickHandler( subtargets );
    });
    
});