Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

The Menu

  • Loading branch information...
commit b9e4a99a9b5c8976772e092cee51a0b54e37c1d3 0 parents
@beaucollins authored
31 README.md
@@ -0,0 +1,31 @@
+Radial Menu
+===========
+
+An HTML/CSS/JavaScript implementation of the lovely radial menu in the [Path][] app.
+
+[See the demo][demo] (requires a webkit browser)
+
+[demo]: http://beaucollins.github.com/radial-menu
+[Path]: https://path.com/
+
+Markup
+-----
+
+Adapts to the number of links you have in your menu.
+
+ <nav>
+ <ul>
+ <li><a href="#">1</a></li>
+ <li><a href="#">2</a></li>
+ <li><a href="#">3</a></li>
+ </ul>
+ </nav>
+
+Configure the radius and the degrees to be used for the arc.
+
+ var m = new Menu(document.querySelector('nav'), {
+ radius: 130,
+ degrees: 90,
+ offset: -90
+ });
+
70 index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>index</title>
+ <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8">
+ <meta name="viewport" content="width=device-width,user-scalable=no">
+ <script type="text/javascript" src="menu.js" charset="utf-8"></script>
+</head>
+<body id="index" onload="">
+
+ <div id="app">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+ voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+ non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+ voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+ non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+ voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+ non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+ voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+ non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+ voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+ non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+ voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+ non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+ voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+ non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+ </div>
+ <nav>
+ <a href="#">+</a>
+ <ul>
+ <li><a href="#">&#x263D;</a></li>
+ <li><a href="#">&#x2600;</a></li>
+ <li><a href="#">&#x2708;</a></li>
+ <li><a href="#">&#x2601;</a></li>
+ <li><a href="#">&hearts;</a></li>
+ <li><a href="#">&#x263A;</a></li>
+ </ul>
+ </nav>
+
+ <script type="text/javascript" charset="utf-8">
+ var m = new Menu(document.getElementsByTagName('nav')[0], { radius: 130 });
+ </script>
+</body>
119 menu.js
@@ -0,0 +1,119 @@
+var Menu = function(element, options){
+ if(!options) options = {};
+ options = {
+ degrees: options.degrees || 90,
+ offset: options.degrees || -90,
+ radius: options.radius || 150
+ }
+
+ this.node = element;
+ this.menu_items = element.querySelectorAll('li');
+ this.button = element.querySelector('a');
+ this.open = false;
+
+ var sheet = document.styleSheets[0];
+ var degrees = options.degrees;
+ var radius = options.radius;
+ var offset = options.offset;
+ var menu = this;
+ //this.positionItems();
+ // lets position them
+ this.eachItem(function(item, index, items){
+ // create the animation
+ var degree = ((degrees / (items.length-1)) * index) + offset,
+ position = Menu.degreeToPosition(degree),
+ x = Math.round((position.x * radius)),
+ y = Math.round((position.y * radius)),
+ name = "ani-" + index,
+ delay = index * 4;
+
+ var rule = "@-webkit-keyframes " + name + "{ \
+ from {-webkit-transform: translate3d(0px, 0px, 0px); -webkit-transform-timing-function: ease-out; }\
+ " + (delay + 10) + "% { -webkit-transform: translate3d(0px, 0px, 0px);}\
+ " + (40 + index * 3) + "% { -webkit-transform: translate3d(" + (x * 1.2) + "px, " + (y * 1.2) + "px, 0px); -webkit-transform-timing-function: ease-in; }\
+ 65% { -webkit-transform: translate3d(" + (x*0.95) + "px, " + (y*0.95) + "px, 0px); -webkit-timing-function:ease-in-out}\
+ to { -webkit-transform: translate3d(" + x + "px, " + y + "px, 0px);}\
+ }";
+
+
+ sheet.insertRule(rule);
+ item.style.webkitAnimation = name + " 700ms alternate infinite";
+ item.style.webkitAnimationPlayState = "paused";
+ item.querySelector('a').style.webkitTransition = '-webkit-transform 500ms ease-in-out';
+ item.addEventListener('webkitAnimationIteration', function(e){
+ item.style.webkitAnimationPlayState = 'paused';
+ });
+ });
+
+ this.button.style.webkitTransition = "-webkit-transform 100ms linear";
+ if(this.button.ontouchstart !== undefined){
+ this.button.addEventListener('touchstart', function(e){
+ e.stopPropagation();
+ e.preventDefault();
+ menu.toggle();
+ });
+ this.button.addEventListener('touchmove', function(e){
+ e.stopPropagation();
+ e.preventDefault();
+ });
+ this.button.addEventListener('touchend', function(e){
+ e.stopPropagation();
+ e.preventDefault();
+ });
+
+ }else{
+ this.button.addEventListener('mousedown', function(){
+ menu.toggle();
+ })
+ }
+
+ this.button.addEventListener('click', function(e){
+ e.preventDefault();
+ });
+
+ var links = this.node.querySelectorAll('li a');
+ for (var i=0; i < links.length; i++) {
+ links[i].addEventListener('click', function(e){
+ e.preventDefault();
+ })
+ };
+
+}
+
+Menu.prototype.toggle = function(){
+ this.open = !this.open;
+ if(this.open){
+ this.button.style.webkitTransform = 'rotate(-45deg)';
+ } else {
+ this.button.style.webkitTransform = 'rotate(0deg)';
+ }
+ this.eachItem(function(item){
+ item.style.webkitAnimationPlayState = 'running';
+ var link = item.querySelector('a');
+ link.style.webkitTransform = this.open ? 'rotate(-360deg)' : "rotate(360deg)" ;
+ });
+
+}
+
+Menu.prototype.eachItem = function(callback){
+ Array.prototype.forEach.call(this.menu_items, callback, this);
+}
+
+Menu.degreeToRadian = function(degree){
+ // radians = (180/Pi) / degrees
+ degree = degree == 0 ? 360 : degree;
+ var rad = (Math.PI/180) * degree;
+ return rad;
+}
+
+Menu.radianToPosition = function(radian){
+ return {
+ x: Math.cos(radian),
+ y: Math.sin(radian)
+ }
+}
+
+Menu.degreeToPosition = function(degree){
+ return Menu.radianToPosition(Menu.degreeToRadian(degree));
+}
+
100 style.css
@@ -0,0 +1,100 @@
+body {
+ font-size: 12px;
+ font-family: "Helvetica Neue", HelveticaNeue, Helvetica;
+ background:-webkit-linear-gradient(hsla(0,50%,99%,1.0), hsla(0,50%,95%,1.0));
+ margin: 0;
+}
+
+#app {
+ position:absolute;
+ top:0;
+ bottom:0;
+ right:0;
+ left:0;
+ overflow:scroll;
+ -webkit-overflow-scrolling: touch;
+ background: url(texture.jpg);
+ padding: 20px;
+ color: #FFF;
+ line-height: 1.5;
+ font-size: 16px;
+}
+
+@media screen and (-webkit-device-pixel-ratio:2) {
+ #app {
+ background: url(wood@2x.jpg);
+ }
+}
+
+@media screen and (-webkit-device-pixel-ratio:1) and (max-device-width:480px) {
+ #app {
+ background: url(wood.jpg);
+ }
+}
+
+nav {
+ position:fixed;
+ bottom: 30px;
+ left: 30px;
+ background:#F00;
+}
+
+a {
+ -webkit-tap-highlight-color:hsla(0,0%,0%,0.0);
+}
+
+nav > a {
+ position: absolute;
+ width: 40px;
+ height: 40px;
+ background: #F00;
+ background: -webkit-linear-gradient(hsla(0,100%,50%,1.0), hsla(0,100%,43%,1.0) 50%, hsla(0,100%,37%,1.0) 50%, hsla(0,100%,30%,1.0));
+ bottom: -23px;
+ left: -23px;
+ z-index: 2;
+ border-radius:40px;
+ font-size: 38px;
+ font-weight:bold;
+ font-family: "Helvetica Neue", HelveticaNeue;
+ text-align:center;
+ line-height:30px;
+ color:#FFF;
+ text-decoration:none;
+ border:3px solid #FFF;
+ -webkit-box-shadow: 0 0 2px hsla(0,0%,0%,0.6);
+}
+
+nav ul {
+ padding:0;
+ margin:0;
+ list-style-type:none;
+}
+
+nav li {
+ position:absolute;
+ left:-16px;
+ top:-16px;
+}
+
+nav li a {
+ font-size: 18px;
+ font-weight:bold;
+ border: 3px solid #FFF;
+ box-shadow: inset 0 0 4px hsla(0,0%,0%,1.0), 0 0 2px hsla(0,0%,0%,0.6);
+ text-shadow: 0 0 2px hsla(0,0%,0%,1.0);
+ width: 26px;
+ height: 26px;
+ background:#444;
+ position: absolute;
+ top:0;
+ left:0;
+ overflow:hidden;
+ color:#FFF;
+ border-radius:26px;
+ line-height: 24px;
+ text-align: center;
+ text-decoration:none;
+ font-weight:bold;
+ -webkit-animation: bounce 1s;
+}
+
BIN  texture.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  wood.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  wood@2x.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Please sign in to comment.
Something went wrong with that request. Please try again.