Menu Lingkaran Dengan Submenu Efek Rotasi

Menu Lingkaran Dengan Submenu Efek Rotasi - Biasanya menu navigasi yang terdapat pada blog dibentuk dengan format diagram tag <ul>, sedangkan pada sub-menu diatur dengan perintah <li>. Dalam menu sudah pasti terdapat teks-link, yang apabila salah satu teks tersebut dihover maka akan menampilkan sub-menu yang sudah diatur nilai-nilai URL-nya sesuai dengan area wilayah link-label pada masing-masing halaman menu. Akan tetapi, jika salah satu link tersebut kita klik (bukan teks link pada sub menu), maka akan tetap mengarah pada halaman yang sudah ditentukan alamatnya dengan atribut <a href="#">.

Desain menu kali ini, saya akan coba menghilangkan semua elemen perintah yang biasanya digunakan untuk membuat bentuk diagram pada menu navigasi blog, dan menggantikan perintahnya dengan elemen input type="radio" checked="checked" untuk Membuat Menu Lingkaran Dengan Submenu Efek Rotasi seperti ini:

Widget tombol share - Membuat Tombol Share Terbaru Efek Transisi


Desain Tampilan Menu
Tampilan menu saya bentuk lingkaran, sedangkan teks-link saya ganti dengan icon logo (gambar), dan untuk efek hover saya ganti dengan sistem pointer KLIK dengan perpindahan icon logo dengan efek rotasi. Dan hasilnya akan terlihat seperti ini:





DEMO SHOW




Sebenarnya tampilan Menu Lingkaran Dengan Submenu Efek Rotasi kali ini tidak jauh berbeda dengan Menu Navigasi Blog Desain Flower Style pada pertemuan sebelumnya, namun efek rotasi pada menu lingkaran ini diperintah dengan KLIK sistem. CSS lengkapnya seperti ini:

#menuNav {
  width: 216px;height: 216px;position: absolute;
  margin: 0 0 0 -108px;left: 50%;op: 50%}

#menu-circle {
  width: 120px;height: 120px;border-radius: 50%;
  border: 48px solid rgba(129,216,208,0.6);
  position:absolute;top: 90px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHy6LlcOamrQs5bRTjT4BEyNSdzR-g6UXSjmnlJrNtjUWJ9ns1aHy6oB8tqIWMu6CdEESMWUAYnd-6OU1Vs8KaYRvegJGtLNKMOghKfaTRGne4TqjdeDOVmgfG9kngCRXCocMR6TrBCx8/s120/menu.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: 90px;left: 0px}

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

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

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

label[for=blogTips] {
  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMeZvYHBfGzbf9GZCfi_Cd5A3sv4hkfDVSjIagVBIoaNvBlptZfG_a_F1dB8JsxPZeuf-N-NZD3ZeerWwIKuxZ7n0u-mD22nEuKOjBDcx9yYk7US-H9BTyca0dNiIMIHHUhcOIVbx-hn8/s25/sb77-image3.png') no-repeat center center;transform:rotateZ(0deg);border-radius:50%}

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

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

label[for=widget] {
  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgICOcoM1xSRFf-wU16xceoeLIF7SOxOmlZTs2iCK5YDpAHzQXkmIWJVq3dZZa__dQcDrIEaHILOydVP6vfhAhrg6qJLwVqCTLcpiykkqzfB9hgYMVrzNMY30jkKHPpcyj-Xa4eqjSFOFg/s25/sb77-image4.jpg') no-repeat center center;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)}
.item#css:checked~#logo-menu {transform:rotateZ(90deg)}
.item#imgEffect:checked~#logo-menu {transform:rotateZ(-90deg)}
.item#widget:checked~#logo-menu {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;
  transform: rotateZ(50deg) rotateY(90deg);
  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);opacity: 1}

Sebagai tahapan dasar, teks pada menu saya tampilkan hanya 4 label saja, selebihnya Anda bisa tambahkan lagi sebanyak yang Anda inginkan. Dan untuk sub menu Anda bisa tambahkan sebanyak-banyaknya, semuanya sudah saya beri tanda dengan warna yang berbeda pada HTML dibawah ini, silahkan ganti sesuai dengan title pada halaman blog Anda seperti ini:

<div id="menuNav">
    <div id="menu-circle"></div>
    <div id="shadow-circle"></div>
<input type="radio" name="item" class="item" id="blogTips" checked="checked">
<input type="radio" name="item" class="item" id="css">
<input type="radio" name="item" class="item" id="imgEffect">
<input type="radio" name="item" class="item" id="widget">
        <div id="logo-menu">
           <label for="blogTips"></label>
           <label for="css"></label>
           <label for="imgEffect"></label>
           <label for="widget"></label>
        </div><!..ending logo-menu..!>
               <div id="submenus">
                  <div id="sub-blogTips" class="tooltip">
                     <a href="#">Blog Tips 1</a></div>
                  <div id="sub-css" class="tooltip">
                     <a href="#">Css Menu 1</a></div>
                  <div id="sub-imgEffect" class="tooltip">
                     <a href="#">Img Effect 1</a></div>
                  <div id="sub-widget" class="tooltip">
                     <a href="#">Widget Satu</a></div>
               </div><!..ending submenus..!>
     <div id="arrow"></div>
</div><!..ending menuNav..!>

Semoga Menu Lingkaran Dengan Submenu Efek Rotasi seperti ini bisa menambah keindahan tampilan blog sahabat semua pecinta SAHABAT BLOGGER 77, akhir kata saya ucapkan terima kasih dan sampai jumpa...!!!