<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Bubble Nav</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container" data-ng-app="app" data-ng-controller="buttonCtrl">
<div class="buttons">
<div class="circles">
<div class="circle" ng-show="showButtons" ng-repeat="circle in circles" circle="{{circle}}" ng-animate-children>
<div class="line-container" line="{{circle}}"><div class="line" ng-show="showButtons"></div></div>
<div class="button" ng-show="showButtons">
<p>{{coords}}</p>
</div>
</div>
</div>
<div class="start-button" data-ng-class="{'active': showButtons}">
<div class="circle" ng-click="showButtons = !showButtons"><div class="button"><p>Choose</p></div></div>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://code.angularjs.org/1.3.10/angular.min.js'></script>
<script src='https://code.angularjs.org/1.3.10/angular-animate.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/007design/bubble-nav-xbPZJG */
* {
box-sizing: border-box;
}
.container {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.circles {
position: absolute;
height: 0;
width: 0;
}
.start-button {
height: 75px;
width: 75px;
transition: 2s linear all;
}
.start-button .circle {
height: 0;
width: 0;
}
.start-button.active .button {
margin: 5px 0 0 5px;
height: 65px;
width: 65px;
}
.circle {
position: absolute;
height: 100px;
width: 100px;
top: 0%;
left: 0%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
transition: 0.5s linear all;
transition-timing-function: ease-in-out;
}
.circle.ng-hide-add, .circle.ng-hide-remove {
height: 0;
width: 0;
}
.circle.ng-hide-add, .circle.ng-hide-remove.ng-hide-remove-active {
height: 100px;
width: 100px;
}
.circle.ng-hide-add.ng-hide-add-active {
height: 0;
width: 0;
}
.button {
position: absolute;
height: 75px;
width: 75px;
top: -37.5px;
left: -37.5px;
background-color: #fff;
border-radius: 50%;
border: 2px solid #00a9e0;
transition: 0.5s linear all;
}
.button p {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #00a9e0;
text-align: center;
margin: 0;
width: 100%;
}
.button.ng-hide-add, .button.ng-hide-remove {
height: 0;
width: 0;
font-size: 0;
top: 0;
left: 0;
}
.button.ng-hide-add, .button.ng-hide-remove.ng-hide-remove-active {
height: 75px;
width: 75px;
top: -37.5px;
left: -37.5px;
font-size: 1em;
}
.button.ng-hide-add.ng-hide-add-active {
height: 0;
width: 0;
font-size: 0;
top: 0;
left: 0;
}
.line-container {
position: absolute;
}
.line {
position: absolute;
width: 100px;
border-top: 2px solid #00a9e0;
transition: 0.5s linear all;
transition-timing-function: ease-in-out;
}
.line.ng-hide-add, .line.ng-hide-remove {
width: 0;
}
.line.ng-hide-add, .line.ng-hide-remove.ng-hide-remove-active {
width: 100px;
}
.line.ng-hide-add.ng-hide-add-active {
width: 0;
}
/*Downloaded from https://www.codeseek.co/007design/bubble-nav-xbPZJG */
angular.module('app', ['ngAnimate'])
.controller('buttonCtrl', function($scope){
$scope.showButtons = true;
$scope.circles = [90, 36, 270];
})
.directive('circle', function(){
return {
restrict: 'A',
link: function(scope, elem, attrs, ctrl){
function toRadians (angle) {
return (angle * (Math.PI / 180));
}
function getPosition(angle){
console.log(angle);
var vals = [ Math.round(100 * Math.cos(toRadians(angle))),
Math.round(100 * Math.sin(toRadians(angle))) ];
console.log(vals);
return vals;
}
scope.coords = getPosition(attrs.circle);
$(elem).css({
'transform': 'translate('+scope.coords[0]+'%, '+scope.coords[1] + '%)'
});
}
};
})
.directive('line', function(){
return {
restrict: 'A',
link: function(scope, elem, attrs){
function toRadians (angle) {
return (angle * Math.PI) / 180;
}
function getPosition(angle){
console.log(angle);
var vals = [ Math.round(100 * Math.cos(toRadians(angle))),
Math.round(100 * Math.sin(toRadians(angle))) ];
console.log(vals);
return vals;
}
scope.coords = getPosition(attrs.line);
$(elem).css({
'top': scope.coords[1]*-1+'%',
'left': scope.coords[0]*-1+'%',
'transform': 'rotate('+(attrs.line)+'deg)'
});
}
};
});