Circle navigation

on

navigation

Circle navigation.

<html lang="en"><head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-title" content="CodePen">
<title>rahul</title>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> -->
<style>
@import url("https://fonts.googleapis.com/css?family=Alegreya+Sans:800,900");
html, body {
  height: 100%;
}

body {
  background: beige;
  font-family: Alegreya Sans, sans-serif;
}

nav {
  display: block;
  position: fixed;
  width: 500px;
  height: 500px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transform: translate3d(25px, -25px, 0);
          transform: translate3d(25px, -25px, 0);
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
  transition: -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
  transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
  transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9), -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
}
nav.open {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
nav.top-right {
  top: -140px;
  right: -140px;
}

.disc {
  position: absolute;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  font: 25px Alegreya Sans, sans-serif;
  line-height: 40px;
  padding-top: 10px;
  border-radius: 250px;
  -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 0, 1, 190deg);
          transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 0, 1, 190deg);
  pointer-events: none;
  opacity: 0;
  cursor: pointer;
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
  transition: opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
  transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9), opacity 0.5s;
  transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9), opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
}
.disc div {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.open .disc {
  pointer-events: auto;
  opacity: 1;
}

.l1 {
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: tomato;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.open .l1 {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
          transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
  opacity: 1;
}
.open .l1:hover {
  background: shade(tomato, 90%);
  color: tomato;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.open .l1:active {
  background: shade(tomato, 50%);
  color: tomato;
}
.open .l1.toggle {
  -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
          transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
}

.l2 {
  top: 50px;
  left: 50px;
  right: 50px;
  bottom: 50px;
  background: #ff7a39;
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.open .l2 {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
  -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
          transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
  opacity: 1;
}
.open .l2:hover {
  background: shade(#ff7a39, 90%);
  color: #ff7a39;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.open .l2:active {
  background: shade(#ff7a39, 50%);
  color: #ff7a39;
}
.open .l2.toggle {
  -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
          transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
}

.l3 {
  top: 100px;
  left: 100px;
  right: 100px;
  bottom: 100px;
  background: #ff912b;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.open .l3 {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
  -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
          transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
  opacity: 1;
}
.open .l3:hover {
  background: shade(#ff912b, 90%);
  color: #ff912b;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.open .l3:active {
  background: shade(#ff912b, 50%);
  color: #ff912b;
}
.open .l3.toggle {
  -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
          transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
}

.l4 {
  top: 150px;
  left: 150px;
  right: 150px;
  bottom: 150px;
  background: #ffa91c;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.open .l4 {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
  -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
          transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
  opacity: 1;
}
.open .l4:hover {
  background: shade(#ffa91c, 90%);
  color: #ffa91c;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.open .l4:active {
  background: shade(#ffa91c, 50%);
  color: #ffa91c;
}
.open .l4.toggle {
  -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
          transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
}

.l5 {
  top: 200px;
  left: 200px;
  right: 200px;
  bottom: 200px;
  background: #ffc00e;
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.open .l5 {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
  -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
          transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
  opacity: 1;
}
.open .l5:hover {
  background: shade(#ffc00e, 90%);
  color: #ffc00e;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.open .l5:active {
  background: shade(#ffc00e, 50%);
  color: #ffc00e;
}
.open .l5.toggle {
  -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
          transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
}

.toggle {
  line-height: 100px;
  padding: 0;
  width: 100px;
  background: gold;
  opacity: 1;
  -webkit-transform: none;
          transform: none;
  pointer-events: auto;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.open .toggle {
  -webkit-transform: rotate3d(0, 0, 1, 0deg);
          transform: rotate3d(0, 0, 1, 0deg);
}
.toggle:hover {
  background: shade(gold, 90%);
  text-decoration: underline;
}
.toggle:active {
  background: shade(gold, 50%);
  color: rgba(255, 215, 0, 0.5);
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  -webkit-transition-duration: 0s;
          transition-duration: 0s;
}
</style>
<script>
  window.console = window.console || function(t) {};
</script>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</head>
<body translate="no">
<nav class="top-right">
<a class="disc l1">
<div>Messages</div>
</a>
<a class="disc l2">
<div>Photos</div>
</a>
<a class="disc l3">
<div>Profile</div>
</a>
<a class="disc l4">
<div>Likes</div>
</a>
<a class="disc l5 toggle">Menu</a>
</nav>
<script>
  window.HUB_EVENTS={ASSET_ADDED:"ASSET_ADDED",ASSET_DELETED:"ASSET_DELETED",ASSET_DESELECTED:"ASSET_DESELECTED",ASSET_SELECTED:"ASSET_SELECTED",ASSET_UPDATED:"ASSET_UPDATED",CONSOLE_CHANGE:"CONSOLE_CHANGE",CONSOLE_CLOSED:"CONSOLE_CLOSED",CONSOLE_EVENT:"CONSOLE_EVENT",CONSOLE_OPENED:"CONSOLE_OPENED",CONSOLE_RUN_COMMAND:"CONSOLE_RUN_COMMAND",CONSOLE_SERVER_CHANGE:"CONSOLE_SERVER_CHANGE",EMBED_ACTIVE_PEN_CHANGE:"EMBED_ACTIVE_PEN_CHANGE",EMBED_ACTIVE_THEME_CHANGE:"EMBED_ACTIVE_THEME_CHANGE",EMBED_ATTRIBUTE_CHANGE:"EMBED_ATTRIBUTE_CHANGE",EMBED_RESHOWN:"EMBED_RESHOWN",FORMAT_FINISH:"FORMAT_FINISH",FORMAT_ERROR:"FORMAT_ERROR",FORMAT_START:"FORMAT_START",IFRAME_PREVIEW_RELOAD_CSS:"IFRAME_PREVIEW_RELOAD_CSS",IFRAME_PREVIEW_URL_CHANGE:"IFRAME_PREVIEW_URL_CHANGE",KEY_PRESS:"KEY_PRESS",LINTER_FINISH:"LINTER_FINISH",LINTER_START:"LINTER_START",PEN_CHANGE_SERVER:"PEN_CHANGE_SERVER",PEN_CHANGE:"PEN_CHANGE",PEN_EDITOR_CLOSE:"PEN_EDITOR_CLOSE",PEN_EDITOR_CODE_FOLD:"PEN_EDITOR_CODE_FOLD",PEN_EDITOR_ERRORS:"PEN_EDITOR_ERRORS",PEN_EDITOR_EXPAND:"PEN_EDITOR_EXPAND",PEN_EDITOR_FOLD_ALL:"PEN_EDITOR_FOLD_ALL",PEN_EDITOR_LOADED:"PEN_EDITOR_LOADED",PEN_EDITOR_REFRESH_REQUEST:"PEN_EDITOR_REFRESH_REQUEST",PEN_EDITOR_RESET_SIZES:"PEN_EDITOR_RESET_SIZES",PEN_EDITOR_SIZES_CHANGE:"PEN_EDITOR_SIZES_CHANGE",PEN_EDITOR_UI_CHANGE_SERVER:"PEN_EDITOR_UI_CHANGE_SERVER",PEN_EDITOR_UI_CHANGE:"PEN_EDITOR_UI_CHANGE",PEN_EDITOR_UI_DISABLE:"PEN_EDITOR_UI_DISABLE",PEN_EDITOR_UI_ENABLE:"PEN_EDITOR_UI_ENABLE",PEN_EDITOR_UNFOLD_ALL:"PEN_EDITOR_UNFOLD_ALL",PEN_ERROR_INFINITE_LOOP:"PEN_ERROR_INFINITE_LOOP",PEN_ERROR_RUNTIME:"PEN_ERROR_RUNTIME",PEN_ERRORS:"PEN_ERRORS",PEN_LIVE_CHANGE:"PEN_LIVE_CHANGE",PEN_LOGS:"PEN_LOGS",PEN_MANIFEST_CHANGE:"PEN_MANIFEST_CHANGE",PEN_MANIFEST_FULL:"PEN_MANIFEST_FULL",PEN_PREVIEW_FINISH:"PEN_PREVIEW_FINISH",PEN_PREVIEW_START:"PEN_PREVIEW_START",PEN_SAVED:"PEN_SAVED",POPUP_CLOSE:"POPUP_CLOSE",POPUP_OPEN:"POPUP_OPEN",POST_CHANGE:"POST_CHANGE",POST_SAVED:"POST_SAVED",PROCESSING_FINISH:"PROCESSING_FINISH",PROCESSING_START:"PROCESSED_STARTED"},"object"!=typeof window.CP&&(window.CP={}),window.CP.PenTimer={programNoLongerBeingMonitored:!1,timeOfFirstCallToShouldStopLoop:0,_loopExits:{},_loopTimers:{},START_MONITORING_AFTER:2e3,STOP_ALL_MONITORING_TIMEOUT:5e3,MAX_TIME_IN_LOOP_WO_EXIT:2200,exitedLoop:function(E){this._loopExits[E]=!0},shouldStopLoop:function(E){if(this.programKilledSoStopMonitoring)return!0;if(this.programNoLongerBeingMonitored)return!1;if(this._loopExits[E])return!1;var _=this._getTime();if(0===this.timeOfFirstCallToShouldStopLoop)return this.timeOfFirstCallToShouldStopLoop=_,!1;var o=_-this.timeOfFirstCallToShouldStopLoop;if(o<this.START_MONITORING_AFTER)return!1;if(o>this.STOP_ALL_MONITORING_TIMEOUT)return this.programNoLongerBeingMonitored=!0,!1;try{this._checkOnInfiniteLoop(E,_)}catch(N){return this._sendErrorMessageToEditor(),this.programKilledSoStopMonitoring=!0,!0}return!1},_sendErrorMessageToEditor:function(){try{if(this._shouldPostMessage()){var E={topic:HUB_EVENTS.PEN_ERROR_INFINITE_LOOP,data:{line:this._findAroundLineNumber()}};parent.postMessage(E,"*")}else this._throwAnErrorToStopPen()}catch(_){this._throwAnErrorToStopPen()}},_shouldPostMessage:function(){return document.location.href.match(/boomerang/)},_throwAnErrorToStopPen:function(){throw"We found an infinite loop in your Pen. We've stopped the Pen from running. Please correct it or contact support@codepen.io."},_findAroundLineNumber:function(){var E=new Error,_=0;if(E.stack){var o=E.stack.match(/boomerang\S+:(\d+):\d+/);o&&(_=o[1])}return _},_checkOnInfiniteLoop:function(E,_){if(!this._loopTimers[E])return this._loopTimers[E]=_,!1;var o;if(_-this._loopTimers[E]>this.MAX_TIME_IN_LOOP_WO_EXIT)throw"Infinite Loop found on loop: "+E},_getTime:function(){return+new Date}},window.CP.shouldStopExecution=function(E){var _=window.CP.PenTimer.shouldStopLoop(E);return!0===_&&console.warn("[CodePen]: An infinite loop (or a loop taking too long) was detected, so we stopped its execution. Sorry!"),_},window.CP.exitedLoop=function(E){window.CP.PenTimer.exitedLoop(E)};
</script>
<script id="rendered-js">
toggle = document.querySelectorAll(".toggle")[0];
nav = document.querySelectorAll("nav")[0];
toggle_open_text = 'Menu';
toggle_close_text = 'Close';

toggle.addEventListener('click', function () {
  nav.classList.toggle('open');

  if (nav.classList.contains('open')) {
    toggle.innerHTML = toggle_close_text;
  } else {
    toggle.innerHTML = toggle_open_text;
  }
}, false);

setTimeout(function () {
  nav.classList.toggle('open');
}, 800);
//# sourceURL=pen.js
    </script>


</body></html>