23.10.14
40
Menu Navigasi Blog Desain Flower Style
CSS Flower Navigasi Efek Rotasi - Menampilkan menu dengan perintah hover dan menggabungkan beberapa pengaturan CSS animasi-transisi adalah hal yang tersulit saat membuat menu navigasi seperti ini. Untuk memberikan hasil yang terbaik buat sahabat pecinta SAHABAT BLOGGER 77. Untuk desain, saya membuat bentuknya seperti bunga (flower) yang akan tampil saat menu link di hover dengan efek rotasi seperti ini:




DEMO SHOW    GET IN CODE




Referensi Animasi Concept Box Shadow Magic


Seperti Tampilan Menu Navigasi Terbaru Dengan Bentuk Daun diartikel sebelumnya, maka secara umum jika ada bunga (flower) maka ada daun (leaf). Kesempatan pada tutorial kali ini, saya akan coba Membuat Menu Navigasi Dengan Bentuk Bunga Efek Rotasi menggunakan CSS seperti ini:



/*!CSS flower navigation menu
inspect at: 'oct 23,2014'
visit: http://sahabatblogger77.blogspot.com/
*
type code: no javascript (lisenci MTT)
author: Devy indriyani
*/
.flower {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  margin:80px auto;}

.flower .spinner,.flower .inner,
.flower .counterspin {height: 100%;}
.flower .spinner {animation: spin 45s infinite linear;}
.flower .counterspin {animation: counter-spin 45s infinite linear;}

.flower .cover {
  width: 120px;
  height: 120px;
  background: url(http://Url-Gambar Anda.jpg);
  background-size: 100%;
  border-radius: 50%;
  box-shadow: 0 0 2px 4px #d1d1d1, 0 0 20px 4px #000;
  position: absolute;
  top: 0;}

.flower a {display: block;}
.flower .child {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  position: absolute;
  top: 0;}

.flower .child .leaf {
  height: 100%;
  border-radius: 50%;
  visibility: hidden;
  transition: transform 3.2s ease-in-out;}

.flower .child:nth-child(1) {transform: rotate(-90deg)}
.flower .child:nth-child(1) .leaf {
  background: url(http://Url-imagemenu.png);
  background-size: 100%;
  opacity: 0.94;
  transition: transform 3.2s ease-in-out,
  box-shadow 0.16s ease-in-out,
  visibility 3.2s linear;}

.flower .child:nth-child(1) .leaf .glass-holder {
  height: 100%;
  transform: rotate(90deg);}

.flower .child:nth-child(2) {transform: rotate(-18deg);}
.flower .child:nth-child(2) .leaf {
  background: url(http://Url-imagemenu.png);
  background-size: 100%;
  opacity: 0.94;
  transition: transform 3.2s ease-in-out,
  box-shadow 0.16s ease-in-out,
  visibility 3.2s linear;}

.flower .child:nth-child(2) .leaf .glass-holder {
  height: 100%;
  transform: rotate(18deg);}

//add a few more menu here...
.flower .child:nth-child(3) {....}
.flower .child:nth-child(3) .leaf {....}
.flower .child:nth-child(3) .leaf .glass-holder {....}

.flower .child:nth-child(4) {....}
.flower .child:nth-child(4) .leaf {....}
.flower .child:nth-child(4) .leaf .glass-holder {....}

.flower .child:nth-child(5) {....}
.flower .child:nth-child(5) .leaf {....}
.flower .child:nth-child(5) .leaf .glass-holder {....}

.flower .glass {height:100%;transition:transform 3.2s ease-in-out}
.flower:hover .leaf .glass {transform: rotate(-2970deg);}
.flower:hover {transform: scale(3.4)}
.flower:hover .inner {transform: scale(0.294117647058824)}
.flower hover .leaf {
  visibility: visible;
  transform:rotate(720deg) translateX(144px) rotate(2250deg)}


Peletakan serta penyusunan kode CSS diatas sudah saya urutkan dengan sistem perintah hover. Menu akan tampil hanya jika link di "HOVER" dengan efek zoom-scale (skala membesar) dan menu akan kembali ketampilan semula saat hover dilepas dengan efek smaller-scale (skala mengecil). Tahap selanjutnya hanya tinggal memanggil kelas-kelas elemen CSS diatas dengan HTML berikut:


<div class="flower">
   <div class="inner">
      <div class="spinner">
         <div class="child">
           <a href="#" class="leaf">
     <div class="glass-holder">
        <div class="counterspin">
        </div>
     </div>
           </a>
         </div>

         <div class="child">
           <a href="#" class="leaf">
     <div class="glass-holder">
        <div class="counterspin">
        </div>
     </div>
           </a>
         </div>

//tambahkan untuk pengaturan menu berikutnya...
<div class="child"> <!..for menu 3..!>
<div class="child"> <!..for menu 4..!>
<div class="child"> <!..for menu 5..!>
      </div> <!..ending tag spinner..!>
        <div class="cover"></div>
   </div> <!..ending tag inner..!>
</div> <!..ending tag flower..!>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= CSS Flower Navigasi 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 =

40 komentar

  1. wiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii.....keren abis Vy..!

    BalasHapus
    Balasan
    1. sisain attuh mas, jangan dihabisin sumuanya, hehe..
      ngomong-ngomong apa kabar neh mas Al, Devy sudah lama update blog soalnya, maaf ya mas Al kalau belum sempat main ke blog mas Aldino.

      Hapus
    2. alhamdulillah..sedikit... tp sdh terobati..!

      nda ap2 vy..!, tp di sana byk bertabur bintang Vy..!

      Hapus
    3. dipungutin aja bintangnya mas, buat koleksi :)

      Hapus
    4. mas aldino ,,,, boleh minta satu gak bintangnya ,,,, :)

      Hapus
    5. kalau dikasih satu ntar gak mujarap lagi donk itu bintangnya, kan bintang tujuh, kalau bintang enam, sakit kepala gak bisa sembuh mas Fiu, hehehe..

      Hapus
    6. Saya mah minta Mas Aldino nya saja deh semua. biar gak nanggung hhh :d

      Hapus
    7. bawa pulang lagi aahh..!

      Hapus
  2. wih ,,,, cakep pisan euy desainya devy teh , persis macam orgnya .... gubraaaaaak!!!!!! ,, eh ,,, trus peletakannya giman tuh ? hehe

    BalasHapus
    Balasan
    1. karena dimensinya terlalu besar, sebelum memasang widget navigasi ini, mas Fiu perkecil dahulu ukurannya sampai standar minimal 40radius.
      selanjutnya menu ini tidak cocok bila ditempatkan dibawah header, lebih cocok bawah postingan dengan posisi kanan (right-bottom).

      temukan kode yang kurang lebih tampak seperti ini:
      [pre]<div id='main-wrapper'>
          <b:section class='main' id='main' showaddelement='no'>
              <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
          </b:section>
      </div>[/pre]

      selanjutnya letakkan kode HTML diatas dibawah <div id='main-wrapper'>
      sesuaikan dimana posisi yang enak untuk di lihat.

      selengkapnya mas bisa pelajari di sini -
      Peletakan Serta Cara Mendesain Menu Navigasi Blog

      Hapus
    2. memperkecil sampai 40radius ? hehehe tuing-tuing ..

      oya ...seklian tnya, tpi maaf sdkit meleset dri topic... devy tw gk knp di blog sy ada tuh menu di header gak muncul gambarnya .. pdhalkn setiap postingan sy ada gambarnya .... :)

      Hapus
    3. mas fiu mana nyambung dengan hal beginian mbak.
      kalau ngomongin besok mo main kemana....itu baru cucok.kwkwk

      Hapus
    4. hehehe...tul..tul..!, Mas Yan..!

      Hapus
    5. tanyain lagi atuh mas fiu, letaknya sesudah apa, radius itu apa, gimana cara robahnya, km kan cowo, kalo aku yang nanyanya malu mas..

      Hapus
    6. hahahahha, eh kalian yg kece2 tapi bau tape ,,,, :>) radiaus apa dulu dih yg kelen maksud ,,,, :P

      Hapus
    7. To- Mas Fiu.S
      secara umum isi konten artikel tidak akan termuat dalam struktur HTML Template, namun setiap judul artikel tertulis disana dengan kode seperti ini:
      [pre]data:post.title[/pre]

      sedangkan keseluruhan halaman selalu dibungkus dengan tag kondisioanal seperti ini:

      [pre]➞  <b:if cond='data:post.title'>
        <h3 class='post-title entry-title'>
          <b:if cond='data:post.link'>
            <a expr:href='data:post.link'><data:post.title/></a>
          <b:else/>
            <b:if cond='data:post.url'>
              <b:if cond='data:blog.url != data:post.url'>
                <a expr:href='data:post.url'><data:post.title/></a>
              <b:else/>
                <data:post.title/>
              </b:if>
            <b:else/>
              <data:post.title/>
            </b:if>
          </b:if>
        </h3>
      ➞  </b:if>[/pre]

      ini masalah pertanyaan mas Fiu tentang gambar yang tidak tampil pada artikel (padahal sudah menyisipkan gambar)
      Devy sudah membongkar template yang mas gunakan, ada beberapa kode yang sudah terhapus (mungkin karena tidak sengaja)

      [pre]data:post.authorPhoto.url[/pre]
      Elemen ini akan menghasilkan gambar

      Selengkapnya telusuri makna kode tersebut disini:
      Struktur Elemen Data HTML Template

      Hapus
    8. radius yang Devy maksud adalah memperkecil ukuran dimensi menunya, Karena untuk ditampilkan sebagai contoh dalam tutorial, jadi Devy membuat ukurannya besar, namun jika dimensi sebesar itu langsung ditempatkan pada blog,bisa tertutup halaman blog,
      [blockquote]Jika lebar (width:200px) dan tinggi (height:200px) maka jarak radius objek tersebut adalah left-right=200 dan top-bottom=200. Jadi cukup ubah ukurannya menjadi 80px,70px sampai sesuai keinginan[/blockquote]

      Lalu tambahkan kode ini pada area container menu untuk mengatur letak responsive dibawah sebelah kanan (right-bottom) dengan CSS seperti ini:
      [pre]visibility:visible!important;
      opacity:1!important;
      bottom:10px;right:14px;
      position:absolute;[/pre]

      Hapus
    9. mas fiu: tuh, dah sangat lengkap dijelaskan dengan sempurna oleh mbak devy... :D

      Hapus
    10. devy.... sini jnagn keman2 dulu,,, biar mudah klo sy tnya ,,, heheh
      sy dah lama gak upek2 kode2 diatas,, pertama yg mw sy kelarin dulu,,, itu elemen yg untuk menunculkan gambar di tarus dibawah atau diatasnya kode apa yah ? hehe

      Hapus
    11. MZE@ iya lengap dan sempurna krn yg jelasin kn devy yg sudah ahlinya ,,,, hehe ampe sy dibkin tuing2 bacanya ,,,, :)

      mas aldino@ tumben tutup mulut nih ,,,hehe :P

      Hapus
    12. aku tinggal nunggu prakteknya karya mas fiw, dengan materi radius radiusan yang ditanyakan, hehe

      Hapus
    13. hahahaha,,,, radius 2 Km... cek cek ,,, kodok satu kancil dua dimana ?

      Hapus
  3. dengan adanya efek transisi pada css hasilnya luar biasa ya mbak,, hmmm ide.. :)

    BalasHapus
    Balasan
    1. animasi hover sistem, dengan menggabungkan fungsi-fungsi efek animasi dan transisi, yang dibentuk dengan tampilan scale, dengan ini kita bisa membuat tutorial sehebat penggunaan js.

      Hapus
  4. Setelah melihat DEMO Tutorial Flower navigasi Effects rotasi ini, sangat bagus dan Cantik di pandang mata. Apalagi jika di lengkapi dengan coding responsive nya ya Mbak pasti lebih maknyos. coba saya belajar dulu mbak Devy makasih sudah berbagi :)

    BalasHapus
  5. wow keren nih demonya kayak kipas angin
    pasti banyak yg suka deh mbak,
    kreatif banget

    BalasHapus
    Balasan
    1. kebetulan mas Yan, lagi musim kemarau yang panjang, jadi bisa membuat suasana menjadi adem. gak ada AC pakai kipas angin juga jadilah, hehe..

      Hapus
    2. hahaha...betul betul betul

      Hapus
  6. satu lagi ilmu navigasi efec rotasi saya miliki, akan berguna untuk blog baru saya yang sedang di bangun, dengan pake navigasi dari sini halaman jadi lebih ringkes dan simple ya kak?

    BalasHapus
    Balasan
    1. dan cukup ringan kang, karena Devy hanya menggunakan kelas-kelas pada elemen CSS saja (No JavaScript)..

      Hapus
  7. kalo aku baca komen yang lain dulu yah, siapa tau ada yang bertanya lagih

    BalasHapus
    Balasan
    1. teh santika mau bantu Devy jawab pertanyaan yang lain yah, Alhamdulillah attuh, dengan senang hati teh, mudah-mudahan dengan ini bisa menjadi jalan belajar bersama-sama.
      hehe..!! (terimakasih ya teh)

      Hapus
    2. iya vy, pertanyaanya mau dikumpulin dulu.. nanti devy aja yang jawabnya..

      Hapus
    3. hmm..teh santika yang menampung pertanyaan, trus itu juga yang diajukan sama Devy, sama aja attuh teh,,hehe...

      Hapus
    4. biar adil gimana kalau mbak devy tanya jawab sama saya saja...
      woe...anak-anak nggak boleh ngikut loh

      Hapus
  8. belajar lagi nih di tempatnya mbak devi, tentang css flower navigasi efak rotasi...alhamdulillah mbak sudah ada kemajuan saya belajar css an ginian, walaupun masih galau..salam hangat di pagi yang indah. izin patroli nyari yang masih begadang, mau diajak minum kopi biar tambah melek... ^_^

    BalasHapus
  9. sumpah keren sekali :) mantep mantep mantep :D

    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