Item: Bubble Nav
Rating: 3.4
Author: 007design

0 Downloads
18 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

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

Comments

More from 007design

Bubble Nav

In this example below you will see how to do a Bubble Nav with some HTML / CSS and Javascript

Technologies

Comments

More from 007design

A Pen by Daniel Hinds-Bond

A Pen by Daniel Hinds-Bond

sticky form

Vanilla JS Lazy Load

You Might Also Like

Wave

Codevember Day 2 - Cake

Intrinsic sizing

First Three.js Experiment

RESA pattern

Pure CSS Physics Engine

Proj0

Isometric Layout