Last active
July 24, 2018 07:32
-
-
Save michaldudak/e2e82736c99de0a69dbb16353f2d42ac to your computer and use it in GitHub Desktop.
Pure CSS radial menu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width" /> | |
| <title>Radial menu</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <div class="menuContainer"> | |
| <button>X</button> | |
| <div class="actions"> | |
| <button>A</button> | |
| <button>B</button> | |
| <button>C</button> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| button { | |
| display: block; | |
| width: 40px; | |
| height: 40px; | |
| border: 2px solid #777; | |
| border-radius: 20px; | |
| background: white; | |
| } | |
| .menuContainer { | |
| margin: 50px; | |
| position: relative; | |
| } | |
| .menuContainer > button { | |
| z-index: 2; | |
| position: relative; | |
| } | |
| .actions { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| z-index: 1; | |
| transform-origin: 20px 20px; | |
| transform: rotate(-60deg); | |
| transition: transform 200ms 200ms ease-in-out; | |
| } | |
| .actions button { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| box-shadow: 0 0 0 -1px rgba(255, 0, 0, 0.15); | |
| transition: transform 200ms 200ms ease-in, box-shadow 1000ms; | |
| cursor: pointer; | |
| } | |
| .actions button:hover { | |
| box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.15); | |
| } | |
| .menuContainer:hover .actions button { | |
| transition: transform 200ms cubic-bezier(0.530, 0.035, 0.580, 1.3); | |
| } | |
| .menuContainer:hover .actions button:nth-child(1) { | |
| transform: translate(60px, 0); | |
| } | |
| .menuContainer:hover .actions { | |
| transform: rotate(0); | |
| transition: transform 200ms cubic-bezier(0.530, 0.035, 0.580, 1.3); | |
| } | |
| .menuContainer:hover .actions button:nth-child(2) { | |
| transform: translate(40px, 40px); | |
| } | |
| .menuContainer:hover .actions button:nth-child(3) { | |
| transform: translate(0, 60px); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment