Menu Lingkaran Dengan Submenu Efek Rotasi

Info informasi Menu Lingkaran Dengan Submenu Efek Rotasi atau artikel tentang Menu Lingkaran Dengan Submenu Efek Rotasi ini semoga dapat bermanfaat, dan menambah wawasan. Selamat Membaca! Jangan lupa dishare juga! Jika merasa artikel ini bermanfaat juga untuk orang lain.

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/AVvXsEj9rlnzXpHVm-a1mb1Uyh-dSU573b9W01ZXM0pv3XpAcoKm5kFT7xukJjXJuqfFGeOSwVQDFRej8LBXegZm-IVeuJQeQh_teu0Mcb3ZBbJrexg4rFtpvm0z5ET0ibKacpHfMDv9xpgE2UM/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/AVvXsEhV61o7oq8GHcLYdbwnPoI6qxbnopVeskXe9pbeGmLVKId_5pfDfiOc-0WMrkxBqXmp6ae33tNVa5MvaW_WY-Pa8s5xneg-vsX4r5C-3aeRzavBzQ_jkvWGMX4Ih3PffZeReXMaut2-ruQ/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/AVvXsEi9SnsAdL_RHt09vkmN0O0t2tWQxQLnNIvAotI-WheB8qxF-HRGbhQTmgC0YF_sqzkCBlzlAM9xDe9AbYhqIdVgw9IArTD_ul2oVtKDWzDBKhLRWCLgGA3B3mBJr1EzHhpDlfI3ytZTuyo/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/AVvXsEh8KJLfa3XsrOXHHggw3qSyRU2u7Vrx38dnTFkq4d4UR7uFniSIGsjKwZVrOovcWobKFEssS972cVK7EJ5tIFeP62DOd93WwzWjPJ8ODEaMbgl8M1N841m3EJgtFigp2DlUVQxYkVj8pL0/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/AVvXsEhKvzF5-yYywuxuXOUDmol_xDvzFMvnkxcrbTaSAY0VTH86-q3GwUNe6NL71tfBHO7cQETv71yOJDH2QPpQ6KQaJ1De8bdr49YUSNAqV0_lOYukPgvE7gGNPN3qQuVoVjZqM_p0zRrCm6I/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...!!!

Demikian artikel tentang Menu Lingkaran Dengan Submenu Efek Rotasi ini dapat kami sampaikan, semoga artikel atau info tentang Menu Lingkaran Dengan Submenu Efek Rotasi ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.

Bersponsor
👉 Penerbit Content Placement Indonesia
👉 Artikel Kami Terbitkan Harga Terjangkau
👉 Jasa Content Placement
👉 Pasang Backlink Blogroll Premium
👉 Content Placement 50 Jaringan Backlink
👉 Jadi Agen Hanya 100 Ribu Selamanya
👉 Laptop Gaming Terbaik