Demo
Apa itu Circle Menu? Sudah terlihat dari namanya yang mengandung kata "Circle" yang artinya Lingkaran, Menu ini berbentuk setengah lingkaran dengan Efek Overlay ketika kita klik.
Lantas apa yang dimaksud Melayang? Yap... menu ini dapat melayang yang berarti menu ini tetap pada posisinya ketika kita scroll keatas atau kebawah ( Sticky )
Source Code
Masuk ke Blog kamu
Klik Tata Letak
Tambahkan Widget
Pilih HTML/JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 < style type="text/css" >
@font-face {
font-family : FontAwesome;
src : url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.eot?#iefix) format('eot' ),
url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.woff) format('woff' ),
url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.ttf) format('truetype' ),
url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.svg#FontAwesome) format('svg' );
font-weight : 400; font-style : normal; }
[class^=icon-]:before,[class*=" icon-"]:before { font-family : FontAwesome; font-weight : 400; font-style : normal; display : inline-block; text-decoration : inherit; }
a [class^=icon-],a [class*=" icon-"] { display : inline-block; text-decoration : inherit; }
.icon-large:before { vertical-align : top; font-size : 1.3333333333333em; } .btn [class^=icon-],.btn [class*=" icon-"] { line-height : .9em; }
li [class^=icon-],li [class*=" icon-"] { display : inline-block; width : 1.25em; text-align : center; } li .icon-large[class^=icon-],li .icon-large[class*=" icon-"] { width : 1.875em; } li[class^=icon-],li[class*=" icon-"] { margin-left : 0; list-style-type : none; } li[class^=icon-]:before,li[class*=" icon-"]:before { text-indent : -2em; text-align : center; } li[class^=icon-].icon-large:before,li[class*=" icon-"].icon-large:before { text-indent : -1.3333333333333em; } .icon-glass:before { content : "\f000" ; } .icon-music:before { content : "\f001" ; } .icon-search:before { content : "\f002" ; } .icon-envelope:before { content : "\f003" ; } .icon-heart:before { content : "\f004" ; } .icon-star:before { content : "\f005" ; } .icon-star-empty:before { content : "\f006" ; } .icon-user:before { content : "\f007" ; } .icon-film:before { content : "\f008" ; } .icon-th-large:before { content : "\f009" ; } .icon-th:before { content : "\f00a" ; } .icon-th-list:before { content : "\f00b" ; } .icon-ok:before { content : "\f00c" ; } .icon-remove:before { content : "\f00d" ; } .icon-zoom-in:before { content : "\f00e" ; } .icon-zoom-out:before { content : "\f010" ; } .icon-off:before { content : "\f011" ; } .icon-signal:before { content : "\f012" ; } .icon-cog:before { content : "\f013" ; } .icon-trash:before { content : "\f014" ; } .icon-home:before { content : "\f015" ; } .icon-file:before { content : "\f016" ; } .icon-time:before { content : "\f017" ; } .icon-road:before { content : "\f018" ; } .icon-download-alt:before { content : "\f019" ; } .icon-download:before { content : "\f01a" ; } .icon-upload:before { content : "\f01b" ; } .icon-inbox:before { content : "\f01c" ; } .icon-play-circle:before { content : "\f01d" ; } .icon-repeat:before { content : "\f01e" ; } .icon-refresh:before { content : "\f021" ; } .icon-list-alt:before { content : "\f022" ; } .icon-lock:before { content : "\f023" ; } .icon-flag:before { content : "\f024" ; } .icon-headphones:before { content : "\f025" ; } .icon-volume-off:before { content : "\f026" ; } .icon-volume-down:before { content : "\f027" ; } .icon-volume-up:before { content : "\f028" ; } .icon-qrcode:before { content : "\f029" ; } .icon-barcode:before { content : "\f02a" ; } .icon-tag:before { content : "\f02b" ; } .icon-tags:before { content : "\f02c" ; } .icon-book:before { content : "\f02d" ; } .icon-bookmark:before { content : "\f02e" ; } .icon-print:before { content : "\f02f" ; } .icon-camera:before { content : "\f030" ; } .icon-font:before { content : "\f031" ; } .icon-bold:before { content : "\f032" ; } .icon-italic:before { content : "\f033" ; } .icon-text-height:before { content : "\f034" ; } .icon-text-width:before { content : "\f035" ; } .icon-align-left:before { content : "\f036" ; } .icon-align-center:before { content : "\f037" ; } .icon-align-right:before { content : "\f038" ; } .icon-align-justify:before { content : "\f039" ; } .icon-list:before { content : "\f03a" ; } .icon-indent-left:before { content : "\f03b" ; } .icon-indent-right:before { content : "\f03c" ; } .icon-facetime-video:before { content : "\f03d" ; } .icon-picture:before { content : "\f03e" ; } .icon-pencil:before { content : "\f040" ; } .icon-map-marker:before { content : "\f041" ; } .icon-adjust:before { content : "\f042" ; } .icon-tint:before { content : "\f043" ; } .icon-edit:before { content : "\f044" ; } .icon-share:before { content : "\f045" ; } .icon-check:before { content : "\f046" ; } .icon-move:before { content : "\f047" ; } .icon-step-backward:before { content : "\f048" ; } .icon-fast-backward:before { content : "\f049" ; } .icon-backward:before { content : "\f04a" ; } .icon-play:before { content : "\f04b" ; } .icon-pause:before { content : "\f04c" ; } .icon-stop:before { content : "\f04d" ; } .icon-forward:before { content : "\f04e" ; } .icon-fast-forward:before { content : "\f050" ; } .icon-step-forward:before { content : "\f051" ; } .icon-eject:before { content : "\f052" ; } .icon-chevron-left:before { content : "\f053" ; } .icon-chevron-right:before { content : "\f054" ; } .icon-plus-sign:before { content : "\f055" ; } .icon-minus-sign:before { content : "\f056" ; } .icon-remove-sign:before { content : "\f057" ; } .icon-ok-sign:before { content : "\f058" ; } .icon-question-sign:before { content : "\f059" ; } .icon-info-sign:before { content : "\f05a" ; } .icon-screenshot:before { content : "\f05b" ; } .icon-remove-circle:before { content : "\f05c" ; } .icon-ok-circle:before { content : "\f05d" ; } .icon-ban-circle:before { content : "\f05e" ; } .icon-arrow-left:before { content : "\f060" ; } .icon-arrow-right:before { content : "\f061" ; } .icon-arrow-up:before { content : "\f062" ; } .icon-arrow-down:before { content : "\f063" ; } .icon-share-alt:before { content : "\f064" ; } .icon-resize-full:before { content : "\f065" ; } .icon-resize-small:before { content : "\f066" ; } .icon-plus:before { content : "\f067" ; } .icon-minus:before { content : "\f068" ; } .icon-asterisk:before { content : "\f069" ; } .icon-exclamation-sign:before { content : "\f06a" ; } .icon-gift:before { content : "\f06b" ; } .icon-leaf:before { content : "\f06c" ; } .icon-fire:before { content : "\f06d" ; } .icon-eye-open:before { content : "\f06e" ; } .icon-eye-close:before { content : "\f070" ; } .icon-warning-sign:before { content : "\f071" ; } .icon-plane:before { content : "\f072" ; } .icon-calendar:before { content : "\f073" ; } .icon-random:before { content : "\f074" ; } .icon-comment:before { content : "\f075" ; } .icon-magnet:before { content : "\f076" ; } .icon-chevron-up:before { content : "\f077" ; } .icon-chevron-down:before { content : "\f078" ; } .icon-retweet:before { content : "\f079" ; } .icon-shopping-cart:before { content : "\f07a" ; } .icon-folder-close:before { content : "\f07b" ; } .icon-folder-open:before { content : "\f07c" ; } .icon-resize-vertical:before { content : "\f07d" ; } .icon-resize-horizontal:before { content : "\f07e" ; } .icon-bar-chart:before { content : "\f080" ; } .icon-twitter-sign:before { content : "\f081" ; } .icon-facebook-sign:before { content : "\f082" ; } .icon-camera-retro:before { content : "\f083" ; } .icon-key:before { content : "\f084" ; } .icon-cogs:before { content : "\f085" ; } .icon-comments:before { content : "\f086" ; } .icon-thumbs-up:before { content : "\f087" ; } .icon-thumbs-down:before { content : "\f088" ; } .icon-star-half:before { content : "\f089" ; } .icon-heart-empty:before { content : "\f08a" ; } .icon-signout:before { content : "\f08b" ; } .icon-linkedin-sign:before { content : "\f08c" ; } .icon-pushpin:before { content : "\f08d" ; } .icon-external-link:before { content : "\f08e" ; } .icon-signin:before { content : "\f090" ; } .icon-trophy:before { content : "\f091" ; } .icon-github-sign:before { content : "\f092" ; } .icon-upload-alt:before { content : "\f093" ; } .icon-lemon:before { content : "\f094" ; } .icon-phone:before { content : "\f095" ; } .icon-check-empty:before { content : "\f096" ; } .icon-bookmark-empty:before { content : "\f097" ; } .icon-phone-sign:before { content : "\f098" ; } .icon-twitter:before { content : "\f099" ; } .icon-facebook:before { content : "\f09a" ; } .icon-github:before { content : "\f09b" ; } .icon-unlock:before { content : "\f09c" ; } .icon-credit-card:before { content : "\f09d" ; } .icon-rss:before { content : "\f09e" ; } .icon-hdd:before { content : "\f0a0" ; } .icon-bullhorn:before { content : "\f0a1" ; } .icon-bell:before { content : "\f0a2" ; } .icon-certificate:before { content : "\f0a3" ; } .icon-hand-right:before { content : "\f0a4" ; } .icon-hand-left:before { content : "\f0a5" ; } .icon-hand-up:before { content : "\f0a6" ; } .icon-hand-down:before { content : "\f0a7" ; } .icon-circle-arrow-left:before { content : "\f0a8" ; } .icon-circle-arrow-right:before { content : "\f0a9" ; } .icon-circle-arrow-up:before { content : "\f0aa" ; } .icon-circle-arrow-down:before { content : "\f0ab" ; } .icon-globe:before { content : "\f0ac" ; } .icon-wrench:before { content : "\f0ad" ; } .icon-tasks:before { content : "\f0ae" ; } .icon-filter:before { content : "\f0b0" ; } .icon-briefcase:before { content : "\f0b1" ; } .icon-fullscreen:before { content : "\f0b2" ; } .icon-group:before { content : "\f0c0" ; } .icon-link:before { content : "\f0c1" ; } .icon-cloud:before { content : "\f0c2" ; } .icon-beaker:before { content : "\f0c3" ; } .icon-cut:before { content : "\f0c4" ; } .icon-copy:before { content : "\f0c5" ; } .icon-paper-clip:before { content : "\f0c6" ; } .icon-save:before { content : "\f0c7" ; } .icon-sign-blank:before { content : "\f0c8" ; } .icon-reorder:before { content : "\f0c9" ; } .icon-list-ul:before { content : "\f0ca" ; } .icon-list-ol:before { content : "\f0cb" ; } .icon-strikethrough:before { content : "\f0cc" ; } .icon-underline:before { content : "\f0cd" ; } .icon-table:before { content : "\f0ce" ; } .icon-magic:before { content : "\f0d0" ; } .icon-truck:before { content : "\f0d1" ; } .icon-pinterest:before { content : "\f0d2" ; } .icon-pinterest-sign:before { content : "\f0d3" ; } .icon-google-plus-sign:before { content : "\f0d4" ; } .icon-google-plus:before { content : "\f0d5" ; } .icon-money:before { content : "\f0d6" ; } .icon-caret-down:before { content : "\f0d7" ; } .icon-caret-up:before { content : "\f0d8" ; } .icon-caret-left:before { content : "\f0d9" ; } .icon-caret-right:before { content : "\f0da" ; } .icon-columns:before { content : "\f0db" ; } .icon-sort:before { content : "\f0dc" ; } .icon-sort-down:before { content : "\f0dd" ; } .icon-sort-up:before { content : "\f0de" ; } .icon-envelope-alt:before { content : "\f0e0" ; } .icon-linkedin:before { content : "\f0e1" ; } .icon-undo:before { content : "\f0e2" ; } .icon-legal:before { content : "\f0e3" ; } .icon-dashboard:before { content : "\f0e4" ; } .icon-comment-alt:before { content : "\f0e5" ; } .icon-comments-alt:before { content : "\f0e6" ; } .icon-bolt:before { content : "\f0e7" ; } .icon-sitemap:before { content : "\f0e8" ; }
.icon-umbrella:before { content : "\f0e9" ; }
.icon-paste:before { content : "\f0ea" ; } .icon-user-md:before { content : "\f200" ; }
* {
-moz-box-sizing : border-box;
box-sizing : border-box;
margin : 0;
padding : 0;
list-style : none;
position : relative
}
html,
body {
height : 100%;
}
.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 : #000;
color : #fff;
text-align : center;
font-size : 1.8em;
padding-bottom : 1em;
height : 3.5em;
width : 3.5em;
background-color : #f06060;
position : fixed;
left : 50%;
margin-left : -1.75em;
bottom : -1.75em;
border-radius : 50%;
cursor : pointer;
z-index : 11;
}
.cn-button:hover,
.cn-button:active,
.cn-button:focus {
color : #fff;
}
.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;
}
.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 : #a11313;
background-color : hsla(0, 88%, 63%, 1);
}
.csstransforms .cn-wrapper li:nth-child(even) a {
background-color : #a61414;
background-color : hsla(0, 88%, 65%, 1);
}
.csstransforms .cn-wrapper li.active a {
background-color : #b31515;
background-color : hsla(0, 88%, 70%, 1);
}
.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 : #b31515;
background-color : hsla(0, 88%, 70%, 1);
}
.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;
}
}
< /style>
< script src=" https : //googledrive.com/host/0Bxyf5AC_ilPwRUF6VHd1Z3JyXzg "> < /script>
< /head>
< body>
< div class="container" >
< div class="component" >
< !-- Start Nav Structure -->
< button class="cn-button" id="cn-button" > +< /button>
< div class="cn-wrapper" id="cn-wrapper" >
< ul>
< li> < a href="#" > < span class="icon-picture" > < /span> < /a> < /li>
< li> < a href="#" > < span class="icon-headphones" > < /span> < /a> < /li>
< li> < a href="#" > < span class="icon-home" > < /span> < /a> < /li>
< li> < a href="#" > < span class="icon-facetime-video" > < /span> < /a> < /li>
< li> < a href="#" > < span class="icon-envelope-alt" > < /span> < /a> < /li>
< /ul>
< /div>
< div id="cn-overlay" class="cn-overlay" > < /div>
< /div>
< /div>
< script src=" https : //googledrive.com/host/0Bxyf5AC_ilPwNmx2a3d5bmpacFU "> < /script>
< script src=" https : //googledrive.com/host/0Bxyf5AC_ilPwSmhaWEVyS05xQ1E "> < /script>