Blog ini didirikan hanya untuk kalangan sendiri, Terima kasih telah singgah.. Semoga kita berjumpa kembali....!!
Home » » Membuat Floating Menu

Membuat Floating Menu

Written By jendoang on Senin, 23 Mei 2016 | 12.57



Kode yang digunakan untuk membuat Menu Floating seperti di atas adalah :
<html>
<head>
<style type="text/css">
body {width:100%;overflow:visible;color: #111}
#menuNav {
  width: 216px;
  height: 216px;
  position: absolute;
  margin: 0 0 0 -108px;
  left: 50%;
  top: 5%;}

#menu-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 48px solid rgba(129,216,208,0.6);
  position:absolute;
  top: 70px;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiBIAGbtNxhkKxLSv9cmZjXIcM-gZ81PBV9ROrKvdjfSWeQejsz0PALKfqH9oNDxi95PStcHiWFdqVujdlaylwb3kxCmojAtuoU3QkH7RQWTTm6l0nGMb9R71CLCb3iCj50InkZwvcbC2d/s120-no/bg-floatingmenu.png) no-repeat center center;}

#shadow-circle {
  width: 216px;
  height: 216px;
  border-radius: 108px;
  box-shadow: inset  0px 3px 3px 0px rgba(53,115,133,0.8);
  position:absolute;
  top: 70px;
  left: 0px}

#logo-menu {
  position: absolute;
  width: 215px;
  height: 215px;
  transition: all 600ms ease-in-out;
  -webkit-transition: all 600ms ease-in-out;
  -moz-transition: all 600ms ease-in-out
  -ms-transition: all 600ms ease-in-out
  -o-transition: all 600ms ease-in-out}

.item {
  position: absolute;
  display:block;
  margin: 0px;
  padding: 0px;
  opacity: 0;
  transform-origin: 50% 424%;
  -webkit-transform-origin: 50% 424%;
  -moz-transform-origin: 50% 424%;
  -ms-transform-origin: 50% 424%;
  -o-transform-origin: 50% 424%;}

label {
  position:absolute;
  display:block;
  width: 23px;
  height: 23px;
  left: 97px;
  top: 13px;
  transform-origin: 50% 407%;
  -webkit-transform-origin: 50% 407%;
  -moz-transform-origin: 50% 407%;
  -ms-transform-origin: 50% 407%;
  -o-transform-origin: 50% 407%;
  cursor: pointer}

label[for=blogTips] {
  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXfp9I0TjrfbbWFeRVZrA9V1GyAkN_JWbcEb8TWU1TZYsAJqjhsVaAHDWi8-R3EmQY2uNVOt5fAxcFiY_JQ6OiwVN_cx1p42VGzllEYTsVY91Kwgq33qGt0yuUBTvC-4-Q4l5KtolKaHU/s25/sb77-image3.png') no-repeat center center;
  transform:rotateZ(0deg);
  -webkit-transform:rotateZ(0deg);
  -moz-transform:rotateZ(0deg);
  -ms-transform:rotateZ(0deg);
  -o-transform:rotateZ(0deg);
  border-radius:50%}

label[for=css] {
  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMXLBI07wSmw04bXPEUGUkRT6jMpVILYh6DV1pQBOpymUbxncIAUtotwx5Bf0eFjWFozeUnhBz2pIcNLKlQAlqAyVvgghJX7YGZBB1pwoQWSofA7qPQGaiMHzpCcIT3TGRzs3b7Zb3WR0/s25/sb77-image5.png') no-repeat center center;
  transform:rotateZ(-90deg);
  -webkit-transform:rotateZ(-90deg);
  -moz-transform:rotateZ(-90deg);
  -ms-transform:rotateZ(-90deg);
  -o-transform:rotateZ(-90deg);
  border-radius:50%}

label[for=imgEffect] {
  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrXWAgt32bPiMlHNzJg5q6kTobId_XEbM78BxuslpqRFkjBDUYroAMymRIeE8siQIKvZ1sEOsaZF6QzkqP0vFldve1VafOxCt8n7wWQY0LmzLbU_ToYwL_Acsy5U0sINt74fX0O0wdWSE/s25/sb77-image6.jpg') no-repeat center center;
  transform:rotateZ(90deg);
  -webkit-transform:rotateZ(90deg);
  -moz-transform:rotateZ(90deg);
  -ms-transform:rotateZ(90deg);
  -o-transform:rotateZ(90deg);
  border-radius:50%}

label[for=widget] {
  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv5KlNNMBkvpj6rRrCwcVkw4tQ5pTkvWM_vmMEUQIIajWfEy0T-tz2qa_7DfgEdV6T4-TTrxtim5OUme3Z68jJ8wHmR6vTCIieCcRZachiV5xHF0JwNofAU0kILvRUbK8W2aDcjgyF3G0/s25/sb77-image4.jpg') no-repeat center center;
  transform:rotateZ(180deg);
  -webkit-transform:rotateZ(180deg);
  -moz-transform:rotateZ(180deg);
  -ms-transform:rotateZ(180deg);
  -o-transform:rotateZ(180deg);
  border-radius:50%}

#arrow {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #000;
  position: absolute;
  top: 85px;
  left: 100px}

#arrow:after {
  content:"";
  width: 0px;
  height: 0px;
  border: 6px solid transparent;
  border-bottom: 8px solid #000;
  position:absolute;
  left: 1px;
  top: -11px}

.item#blogTips:checked~#logo-menu {
  transform:rotateZ(0deg);
  -webkit-transform:rotateZ(0deg);
  -moz-transform:rotateZ(0deg);
  -ms-transform:rotateZ(0deg);
  -o-transform:rotateZ(0deg);}

.item#css:checked~#logo-menu {
  transform:rotateZ(90deg);
  -webkit-transform:rotateZ(90deg);
  -moz-transform:rotateZ(90deg);
  -ms-transform:rotateZ(90deg);
  -o-transform:rotateZ(90deg);}

.item#imgEffect:checked~#logo-menu {
  transform:rotateZ(-90deg);
  -webkit-transform:rotateZ(-90deg);
  -moz-transform:rotateZ(-90deg);
  -ms-transform:rotateZ(-90deg);
  -o-transform:rotateZ(-90deg);}

.item#widget:checked~#logo-menu {
  transform:rotateZ(180deg);
  -webkit-transform:rotateZ(180deg);
  -moz-transform:rotateZ(180deg);
  -ms-transform:rotateZ(180deg);
  -o-transform:rotateZ(180deg)}

#submenus {perspective: 600px;}
.tooltip {
  min-width: 170px;
  height: 31px;
  line-height: 34px;
  padding: 0px 10px;
  background: rgba(129,216,208,0.6);
  position:absolute;
  border-radius: 4px;
  top: -45px;
  left: 0px;
  text-align:center;
  transition: all 600ms ease-in-out;
  -webkit-transition: all 600ms ease-in-out;
  -moz-transition: all 600ms ease-in-out;
  -ms-transition: all 600ms ease-in-out;
  -o-transition: all 600ms ease-in-out;
  transform: rotateZ(50deg) rotateY(90deg);
  -webkit-transform: rotateZ(50deg) rotateY(90deg);
  -moz-transform: rotateZ(50deg) rotateY(90deg);
  -ms-transform: rotateZ(50deg) rotateY(90deg);
  -o-transform: rotateZ(50deg) rotateY(90deg);
  transform-origin: 50% 490%;
  -webkit-transform-origin: 50% 490%;
  -moz-transform-origin: 50% 490%;
  -ms-transform-origin: 50% 490%;
  -o-transform-origin: 50% 490%;
  opacity: 0;
  border-top:2px solid red;}

.tooltip:after {
  content:"";
  border: 8px solid transparent;
  border-top: 10px solid rgba(255,255,255,0.6);
  top: 31px;
  left: 77px;
  position:absolute}

.tooltip a {color: #000;margin: 0px 8px;opacity: 0.9}
.tooltip a:hover {color: red}
.item#blogTips:checked~#submenus #sub-blogTips, .item#css:checked~#submenus #sub-css, .item#imgEffect:checked~#submenus #sub-imgEffect, .item#widget:checked~#submenus #sub-widget {
  transform: rotateZ(0deg);
  -webkit-transform: rotateZ(0deg);
  -moz-transform: rotateZ(0deg);
  -ms-transform: rotateZ(0deg);
  -o-transform: rotateZ(0deg);
  opacity: 1}
</style><br />

</head>
<body bgcolor="black">
<div id="menuNav"><div id="menu-circle"></div><div id="shadow-circle"></div><input type="radio" name="item" class="item" id="blogTips" checked="checked"><br />
<input type="radio" name="item" class="item" id="css"><br />
<input type="radio" name="item" class="item" id="imgEffect"><br />
<input type="radio" name="item" class="item" id="widget"><br />
<div id="logo-menu"><label for="blogTips"></label><br />
<label for="css"></label><br />
<label for="imgEffect"></label><br />
<label for="widget"></label><br />
</div><div id="submenus"><div id="sub-blogTips" class="tooltip"><a href="#">Blog Tips 1</a><a href="#">Blog Tips 2</a></div><div id="sub-css" class="tooltip"><a href="#">Css Menu 1</a><a href="#">Css Menu 2</a></div><div id="sub-imgEffect" class="tooltip"><a href="#">Img Effect 1</a><a href="#">Img Effect 2</a></div><div id="sub-widget" class="tooltip"><a href="#">Widget Satu</a><a href="#">Widget Dua</a></div></div><div id="arrow"></div></div>
<div style='clear: both;'></div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'><span class='post-icons'>
</span>
</div>
<div class='post-footer-line post-footer-line-2'></div>
<div class='post-footer-line post-footer-line-3'></div>
</div>

<div class='comments' id='comments'>
<a name='comments'></a>
<div id='backlinks-container'>
<div id='Blog1_backlinks-container'>
</div>
</div>
</div>
<script type="text/javascript">window.___gcfg = {'lang': 'in'};</script>

<div style='clear: both'></div>

</body>
</html>
Share this article :

0 komentar:

Posting Komentar

 
Support : Johny Terwuss
Copyright © 2017. Jen Doang - All Rights Reserved
Created by Johny Wusss Modify by Jendoang
Proudly Powered by Blogger