26.1.15
15
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:


Menu Circle Image



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/AVvXsEj6YPluKb3kgHHgAp3BUocHTryg7PsoGttQfFwTHVA1Lbb8KH6BhJDm9CMiWl8vALloQAYkWNO7ozt7euxqRisM1oLJhlCU5BkXgtNZppjgF2W8ddpPkcjMKYG_bgUbNEusESfM-SwCR2Y/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/AVvXsEil03JZzdA3njIIAAXCXWSLN_7JYOoscgtB_XbcechdWTKsW3JbsZkqOFCCGaMHISlhn31BB7YaUiOrqt16ctHA-Sf0kWrVSSjceQwvj2iiTukUCC6OdDyDYLk3iUwSBJ0RN0MeBbjBE3I/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/AVvXsEgn4mASrFF2AaKKJPw4wE2g50DOLNjWwjw3VUxucwDqjV5rmc2ZPXbM0Uzn5g3sYYQlGI2Fhmk1ZmKrskSv-1CCRiZEdX41lgPtjdFreoT0WOnSxlpYVOl1ZegSHZxLB2Mp5d20l7yVI00/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/AVvXsEgRh7ehPSSMz3Ox41Xrq55RrfsWL49MbcgfnAzhZNm-IFZ-4hT1XkqOOWHMPIInlLR5eOStDl3TpKU_aM0U4l5YlL9YXEhWliOfK3k3CS4X7wT37nxPPMmmCeCdqUBwxw8YV4MoxUkT_MM/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/AVvXsEjFsnNiQlx2lyAxA_-ckpCjM1ik9NUZj9azQZCkym9j3RlUMGTAt_-PKmQi5HrUAoA72q3gewMTz6IYZuw-lnhZyHGxZOrqwya0FgrWIazIDZwtwuDAZ6SZNslyA77XOYJnKutWxClo2pE/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...!!!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Menu Lingkaran Dengan Submenu Efek Rotasi
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

15 komentar

  1. apakah akan mempengaruhi loading websitenya mbk

    BalasHapus
  2. bener-bener keren mbak..
    saya coba dulu deh.. :)

    BalasHapus
  3. Bagus ... jadi kek kompas muter2 bgtu ...hehehe
    sllu deh .. muncum kreasi devy yg bgus dan menarik ...

    BalasHapus
    Balasan
    1. tp kalo dari pengamatan sy nh ya Mas..lebih mirip kalw kita mau buka brangkas Mas Fi..!

      selamat beraktifitas sj Vy..!
      hehe lucu juga foto profil makin udin di bawah.. seperti mau buat juga..!

      Hapus
  4. ia keren banget, tapi bikin berat gak mbak?

    BalasHapus
    Balasan
    1. klw berat ...nanti digendong sama Mas Fiu di ats Din..!.. gratis.. nda dipungut biaya..! hehehe

      Hapus
  5. Teeh request atuh, bisa dibantu ga dibikin tabel buat klasemen bola, kaya di bola.net persib.co.id atau premierleague.com

    BalasHapus
  6. mumet bacanyaa wkwkwk nyimak dan jd tim penggembira komen aja ya gan hehe

    BalasHapus
  7. teh, ajarin edit kotak comment teh.. saya blogger baru.. main blog gara2 tugas kampus.. hahaha, main ke blog saya ya teh 2tinta.com

    BalasHapus
  8. salam singgah ya... ngak paham betul apa yg di bicara kan dalam entri ini...

    BalasHapus
  9. Kayaknya kalau diterapkan semakin membuat blog lebih cantik, tapi sayang pasti lodingnya akan bertambah sedikit....

    BalasHapus
    Balasan
    1. pada blog ini saya menggunakan 3 perintah js untuk mengatur tampilan menu navigasi, search box dan header-title, dan 4 js pada aside-page, 2 perintah pada icon komentar dan belum lagi pada footer page, tetapi blog ini tidak berat tuh, yang terpenting paham menggunakan tag kondisional agar blog tidak berat sebayak apapun widget yang akan Anda tambahkan.

      CSS noteband-nya lebih ringan dibanding JS, CSS terbaca hanya sebagai teks biasa, namun js terdeteksi sebagai perintah, jadi semakin banyak mengguanak js pada template blog, maka blog berat dibanding menggunakan CSS.

      Hapus
  10. wihhh kerennn pas di klik muter muterr bener tuh kata mas fiu kayak kompas yahh :D

    BalasHapus
  11. Ijin nyoba .. creative betul nih mbak i like mbakkkk .... :)

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK