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
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284<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; } /* 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: #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); } /* 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: #b31515; background-color: hsla(0, 88%, 70%, 1); } /* 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; } } </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>
0 Response to "Cara Membuat Simple Circle Menu Melayang (Sticky/Floating) SEO Responsive di Blogger"
Post a Comment