Silahkan Kunjungi rumah blog kami yang baru klik DISINI
untuk fotonya silahkan anda koment sendiri....ha...ha....

Senin, 23 Mei 2016

Membuat Floating Menu



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/AVvXsEiliwRNAKJVTWoqDTPKhDe2W69F3dQbGSZq2sQnF3l3j9czO_G2uvnpiAeMww0lleU8Sr-j8z8Dqi5s63XKBkArgs3HUp2QYGZHvx70vUHkInzIeO3B3BTkvqmN8GwQXF-I_wwV_U5XBdAr/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/AVvXsEiqHTq2Wj0tAkDQvortvixXKzliSw5_ylvH2QpPKzifTN04-XIPS61-OszZ5OdxRO5AaalJ0ibGtB3FZRzt40ZjLAe-UAeejrRPhMOkIZAFm7VbQM0ftNJvSjLvdIJV6uV75kJ4gWIiCiU/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/AVvXsEiBOkuvDEmpNPungy88IpeJNZ_ygi4hLUnV1m6wQPwcdQlq4hZRP1funzbje1KFmrBoA-fgkMY0PszdqqWlgXCNjjjycw6EyfJm2XSPGo7oAtGRJ0ntHR338_ZIIDSm580TtMoI3TazZDc/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/AVvXsEhFIz1qqqJbLdn2QnoJiXu3JwbRG3Md4oZKpsv8zsx2UqBs1fkYVsyXzbruO7zzMy1TSUZNjrQwQkVDGCtNixGkEo_4CNYcelWhck4STGLiIL3MRan_LDW0MWXf3xrrxLEvR89eGUMGew0/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/AVvXsEidCBSXfr6rCgvtyxGhjsn8ZGUbGrouuWPHje3OPOYhOhNx-xJ8morDAQDL5UhzJuq64h6LnpC_5MDzySl79kGAx9SvSQuOFZ8TiPOvWw169sUvk1hsFJLx4dn-Ij0kHiZ_XkxAccySPIY/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>
Artikel Terkait

A M A R A J E N

Diposting oleh di 12.57
Label:

0   komentar

Posting Komentar

Cancel Reply
Langganan: Posting Komentar ( Atom )
A M A R A J E N
Blog ini didirikan hanya untuk kalangan sendiri, Terima kasih telah singgah.. Semoga kita berjumpa kembali.....!