Last active
December 16, 2015 17:49
-
-
Save peterhil/5473254 to your computer and use it in GitHub Desktop.
Circular 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
| /** | |
| * Circular Tooltip (SO) | |
| * http://stackoverflow.com/q/13132864/1397351 | |
| */ | |
| * { margin: 0; padding: 0; } | |
| body { | |
| overflow: hidden; | |
| background: url(http://theearlcarlson.com/experiments/amTooltip/img/bg.jpg); | |
| } | |
| /* generic styles for button & circular menu */ | |
| .ctrl { | |
| position: absolute; | |
| top: 50%; left: 50%; | |
| font: 1.5em/1.13 Verdana, sans-serif; | |
| transition: .5s; | |
| } | |
| /* generic link styles */ | |
| a.ctrl, .ctrl a { | |
| display: block; | |
| opacity: .56; | |
| background: #c9c9c9; | |
| color: #7a8092; | |
| text-align: center; | |
| text-decoration: none; | |
| text-shadow: 0 -1px dimgrey; | |
| } | |
| a.ctrl:hover, .ctrl a:hover, a.ctrl:focus, .ctrl a:focus { opacity: 1; } | |
| a.ctrl:focus, .ctrl a:focus { outline: none; } | |
| .button { | |
| z-index: 2; | |
| margin: -.625em; | |
| width: 1.25em; height: 1.25em; | |
| border-radius: 50%; | |
| box-shadow: 0 0 3px 1px white; | |
| } | |
| /* circular menu */ | |
| .tip { | |
| z-index: 1; | |
| /**outline: dotted 1px white;/**/ | |
| margin: -5em; | |
| width: 10em; height: 10em; | |
| transform-origin: 50% 35%; | |
| transform: scale(.001); | |
| list-style: none; | |
| opacity: 0; | |
| } | |
| /* the ends of the menu */ | |
| .tip:before, .tip:after { | |
| position: absolute; | |
| top: 34.3%; | |
| width: .5em; height: 14%; | |
| opacity: .56; | |
| background: #c9c9c9; | |
| content: ''; | |
| } | |
| .tip:before { | |
| left: 5.4%; | |
| border-radius: .25em 0 0 .25em; | |
| box-shadow: -1px 0 1px dimgrey, inset 1px 0 1px white, inset -1px 0 1px grey, | |
| inset 0 1px 1px white, inset 0 -1px 1px white; | |
| transform: rotate(-75deg); | |
| } | |
| .tip:after { | |
| right: 5.4%; | |
| border-radius: 0 .25em .25em 0; | |
| box-shadow: 1px 0 1px dimgrey, inset -1px 0 1px white, inset 1px 0 1px grey, | |
| inset 0 1px 1px white, inset 0 -1px 1px white; | |
| transform: rotate(75deg); | |
| } | |
| /* make the menu appear on click */ | |
| .button:focus + .tip { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| /* slices of the circular menu */ | |
| .slice { | |
| overflow: hidden; | |
| position: absolute; | |
| /**outline: dotted 1px yellow;/**/ | |
| width: 50%; height: 50%; | |
| transform-origin: 100% 100%; | |
| } | |
| /* | |
| * rotate each slice at the right angle = (A/2)° + (k - (n+1)/2)*A° | |
| * where A is the angle of 1 slice (30° in this case) | |
| * k is the number of the slice (in {1,2,3,4,5} here) | |
| * and n is the number of slices (5 in this case) | |
| * formula works for odd number of slices (n odd) | |
| * for even number of slices (n even) the rotation angle is (k - n/2)*A° | |
| * | |
| * after rotating, skew on Y by 90°-A°; here A° = the angle for 1 slice = 30° | |
| */ | |
| .slice:first-child { transform: rotate(-45deg) skewY(60deg); } | |
| .slice:nth-child(2) { transform: rotate(-15deg) skewY(60deg); } | |
| .slice:nth-child(3) { transform: rotate(15deg) skewY(60deg); } | |
| .slice:nth-child(4) { transform: rotate(45deg) skewY(60deg); } | |
| .slice:last-child { transform: rotate(75deg) skewY(60deg); } | |
| /* covers for the inner part of the links so there's no hover trigger between | |
| star button & menu links; give them a red background to see them */ | |
| .slice:after { | |
| position: absolute; | |
| top: 32%; left: 32%; | |
| width: 136%; height: 136%; | |
| border-radius: 50%; | |
| /* "unskew" = skew by minus the same angle by which parent was skewed */ | |
| transform: skewY(-60deg); | |
| content: ''; | |
| } | |
| /* menu links */ | |
| .slice a { | |
| width: 200%; height: 200%; | |
| border-radius: 50%; | |
| box-shadow: 0 0 3px dimgrey, inset 0 0 4px white; | |
| /* "unskew" & rotate by -A°/2 */ | |
| transform: skewY(-60deg) rotate(-15deg); | |
| background: /* lateral separators */ | |
| linear-gradient(75deg, | |
| transparent 50%, grey 50%, transparent 54%) no-repeat 36.5% 0, | |
| linear-gradient(-75deg, | |
| transparent 50%, grey 50%, transparent 54%) no-repeat 63.5% 0, | |
| /* make sure inner part is transparent */ | |
| radial-gradient(rgba(127,127,127,0) 49%, | |
| rgba(255,255,255,.7) 51%, #c9c9c9 52%); | |
| background-size: 15% 15%, 15% 15%, cover; | |
| line-height: 1.4; | |
| } | |
| /* arrow for middle link */ | |
| .slice:nth-child(3) a:after { | |
| position: absolute; | |
| top: 13%; left: 50%; | |
| margin: -.25em; | |
| width: .5em; height: .5em; | |
| box-shadow: 2px 2px 2px white; | |
| transform: rotate(45deg); | |
| background: linear-gradient(-45deg, #c9c9c9 50%, transparent 50%); | |
| content: ''; | |
| } |
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
| <!-- content to be placed inside <body>…</body> --> | |
| <a class='button ctrl' href='#' tabindex='1'>★</a> | |
| <ul class='tip ctrl'> | |
| <li class='slice'><a href='#'>✦</a></li> | |
| <li class='slice'><a href='#'>✿</a></li> | |
| <li class='slice'><a href='#'>✵</a></li> | |
| <li class='slice'><a href='#'>✪</a></li> | |
| <li class='slice'><a href='#'>☀</a></li> | |
| </ul> | |
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
| {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment