@import url(http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css);
- {
-moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative
}
html, body {
height: 100%;
}
body .cn-button{
background: #c0c0f0; color: #6060f0; -webkit-transition: all .3s ease; transition: all .3s ease;
}
body .cn-button:hover{
color: #1070aa;
}
.csstransforms .cn-wrapper {
font-size: 1em; width: 26em; height: 26em; overflow: hidden; position: fixed; z-index: 10; bottom: -13em; left: 50%; border-radius: 50%; margin-left: -13em; -webkit-transform: scale(0.1); -ms-transform: scale(0.1); -moz-transform: scale(0.1); transform: scale(0.1); pointer-events: none; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease;
}
.csstransforms .opened-nav {
border-radius: 50%; pointer-events: auto; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1);
}
.cn-overlay {
width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); position: fixed; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; visibility: hidden; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; z-index: 2;
}
.cn-overlay.on-overlay {
visibility: visible; opacity: 1;
}
.cn-button {
border: none; background: none; color: #6060f0; text-align: center; font-size: 1.8em; padding-bottom: 1em; height: 3.5em; width: 3.5em; background-color: #fff; position: fixed; left: 50%; margin-left: -1.75em; bottom: -1.75em; border-radius: 50%; cursor: pointer; z-index: 11;
}
body .cn-button:active, body .cn-button:focus {
color: #1070aa;
}
.csstransforms .cn-wrapper li {
position: absolute; font-size: 1.5em; width: 10em; height: 10em; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; overflow: hidden; left: 50%; top: 50%; margin-top: -1.3em; margin-left: -10em; -webkit-transition: border .3s ease; -moz-transition: border .3s ease; transition: border .3s ease;
}
.csstransforms .cn-wrapper li a {
display: block; font-size: 1.18em; height: 14.5em; width: 14.5em; position: absolute; bottom: -7.25em; right: -7.25em; border-radius: 50%; text-decoration: none; color: #fff; padding-top: 1.8em; text-align: center; -webkit-transform: skew(-50deg) rotate(-70deg) scale(1); -ms-transform: skew(-50deg) rotate(-70deg) scale(1); -moz-transform: skew(-50deg) rotate(-70deg) scale(1); transform: skew(-50deg) rotate(-70deg) scale(1); -webkit-backface-visibility: hidden; -webkit-transition: opacity 0.3s, color 0.3s; -moz-transition: opacity 0.3s, color 0.3s; transition: opacity 0.3s, color 0.3s;
}
.csstransforms .cn-wrapper li a span {
font-size: 1.1em; opacity: 0.7;
}
/* for a central angle x, the list items must be skewed by 90-x degrees in our case x=40deg so skew angle is 50deg items should be rotated by x, minus (sum of angles - 180)2s (for this demo) */
.csstransforms .cn-wrapper li:first-child {
-webkit-transform: rotate(-10deg) skew(50deg); -ms-transform: rotate(-10deg) skew(50deg); -moz-transform: rotate(-10deg) skew(50deg); transform: rotate(-10deg) skew(50deg);
}
.csstransforms .cn-wrapper li:nth-child(2) {
-webkit-transform: rotate(30deg) skew(50deg); -ms-transform: rotate(30deg) skew(50deg); -moz-transform: rotate(30deg) skew(50deg); transform: rotate(30deg) skew(50deg);
}
.csstransforms .cn-wrapper li:nth-child(3) {
-webkit-transform: rotate(70deg) skew(50deg); -ms-transform: rotate(70deg) skew(50deg); -moz-transform: rotate(70deg) skew(50deg); transform: rotate(70deg) skew(50deg)
}
.csstransforms .cn-wrapper li:nth-child(4) {
-webkit-transform: rotate(110deg) skew(50deg); -ms-transform: rotate(110deg) skew(50deg); -moz-transform: rotate(110deg) skew(50deg); transform: rotate(110deg) skew(50deg);
}
.csstransforms .cn-wrapper li:nth-child(5) {
-webkit-transform: rotate(150deg) skew(50deg); -ms-transform: rotate(150deg) skew(50deg); -moz-transform: rotate(150deg) skew(50deg); transform: rotate(150deg) skew(50deg);
}
.csstransforms .cn-wrapper li:nth-child(odd) a {
background-color: #e6ccff;
}
.csstransforms .cn-wrapper li:nth-child(even) a {
background-color: #dab3ff;
}
/* active style */ .csstransforms .cn-wrapper li.active a {
background-color: #b31515; background-color: hsla(0, 88%, 70%, 1)
}
/* hover style */
.csstransforms .cn-wrapper li:not(.active) a:hover,
.csstransforms .cn-wrapper li:not(.active) a:active,
.csstransforms .cn-wrapper li:not(.active) a:focus {
background-color: mediumpurple;
} .csstransforms .cn-wrapper li:not(.active) a:focus {
position:fixed;
}
/* fallback */
.no-csstransforms .cn-button {
display: none;
}
.no-csstransforms .cn-wrapper li {
position: static; float: left; font-size: 1em; height: 5em; width: 5em; background-color: #eee; text-align: center; line-height: 5em;
}
.no-csstransforms .cn-wrapper li a {
display: block; width: 100%; height: 100%; text-decoration: none; color: inherit; font-size: 1.3em; border-right: 1px solid #ddd;
}
.no-csstransforms .cn-wrapper li a:last-child {
border: none;
}
.no-csstransforms .cn-wrapper li a:hover, .no-csstransforms .cn-wrapper li a:active, .no-csstransforms .cn-wrapper li a:focus {
background-color: white;
}
.no-csstransforms .cn-wrapper li.active a {
background-color: #6F325C; color: #fff;
}
.no-csstransforms .cn-wrapper {
font-size: 1em; height: 5em; width: 25.15em; bottom: 0; margin-left: -12.5em; overflow: hidden; position: fixed; z-index: 10; left: 50%; border: 1px solid #ddd;
}
@media screen and (max-width:480px) {
.csstransforms .cn-wrapper { font-size: .68em; }
.cn-button { font-size: 1em; }
.csstransforms .cn-wrapper li { font-size: 1.52em; }
}
@media screen and (max-width:320px) {
.no-csstransforms .cn-wrapper { width: 15.15px; margin-left: -7.5em; }
.no-csstransforms .cn-wrapper li { height: 3em; width: 3em; }
}