Basic Circular Menu [HTML + Javascript]

Circular Menu

Index.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- The main circle -->
<div id="circle">
<!-- Sub Circles that contains your options -->
<div id="circle1" onclick="funct1(0,this.id)"></div> <!-- Passes angle of circle from the center to function -->
<div id="circle2" onclick="funct1(-90,this.id)"></div><!-- Hence making the circle rotate whenever the clicked circle is not on top. -->
<div id="circle3" onclick="funct1(180,this.id)"></div>
<div id="circle4" onclick="funct1(-270,this.id)"></div>
</div>

<script>
var circle = document.getElementById("circle"); //assigning html elements to variables //via ID
var circle1 = document.getElementById("circle1");
var circle2 = document.getElementById("circle2");
var circle3 = document.getElementById("circle3");
var circle4 = document.getElementById("circle4");
//function intended for chrome...
var funct1 = function(val,id) {
var  scircle = document.getElementById(id);
circle.style.webkitTransform = "rotate("+val+"deg)"; //Change of the Transform value with the                                                 //transition effect in the css makes each circle rotate in the given angle.
circle1.style.webkitTransform = "rotate("+(-val)+"deg)";
circle2.style.webkitTransform = "rotate("+(-val)+"deg)";
circle3.style.webkitTransform = "rotate("+(-val)+"deg)";
circle4.style.webkitTransform = "rotate("+(-val)+"deg)";

};
</script>

</body>

</html>

Style.css

#circle
{
position: absolute;
width: 500px;
height: 500px;
border-radius: 100%;
border: 1px solid black;
transition: all 1s linear;
background-color: blue;
}


#circle1
{
position:absolute;
left: 175px;
height: 150px;
width: 150px;
border-radius: 100%;
border:1px solid black;
background-image: url(1.jpg);
transition: all 1s linear;
}

#circle3
{
position:absolute;
bottom:0px;
left: 175px;
height: 150px;
width: 150px;
border-radius: 100%;
border:1px solid black;
background-image: url(1.jpg);
transition: all 1s linear;
}

#circle4
{
position:absolute;
top:175px;
height: 150px;
width: 150px;
border-radius: 100%;
border:1px solid black;
background-image: url(1.jpg);
transition: all 1s linear;
}

#circle2
{
position:absolute;
top:175px;
left: 350px;
height: 150px;
width: 150px;
border-radius: 100%;
border:1px solid black;
background-image: url(1.jpg);
transition: all 1s linear;
}