Bubble Nav

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

Thumbnail
This awesome code was written by 007design, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 007design ©

Technologies

  • 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