19.1.15
46
Floating Menu Dropdown Dengan Transisi - Sekian lama tidak membahas menu navigasi, pertemuan kali ini admin SAHABAT BLOGGER 77 telah menyusun sebuah rangka elemen CSS untuk Membuat Floating Menu Dropdown dengan efek transisi untuk menampilkan sub menu. Navigasi dengan style dropdown pada menu merupakan gaya tampilan untuk menampilkan sub-menu dengan efek tampil dari atas kebawah jika icon menu di KLIK. Namun untuk menu dropdown kali ini akan saya desain untuk ditampilkan dalam postingan, sehingga internal link yang sering Anda sisipkan pada tulisan posting akan termuat dengan rapi dalam bentuk floating menu seperti ini:

Menu Navigasi Dropdown


Effect Tutorial - Koleksi Efek Gambar


Tidak seperti menu navigasi pada umumnya yang terletak setelah header-title. Teks home, daftar isi dan link label lainnya telah disembunyikan jauh diluar halaman, dan hanya icon logo menu yang tampil, sedangkan daftar menu akan ditampilkan dengan efek transisi jika icon tersebut di KLIK. Seperti Cara Mudah Membuat Menu Navigasi Pada Postingan di artikel sebelumnya adalah salah satu contoh untuk merapikan internal link yang selalu Anda sertakan saat membuat artikel terbaru. Semua elemen untuk membuat bentuk menu dropdown ini murni hanya dengan CSS, jadi muat halaman (loading blog) akan lebih ringan karena tidak menggunakan js (JavaScript). Dan hasilnya akan terlihat seperti ini:





DEMO SHOW




Agar meringkas penggunaan kode yang panjang, baiknya letakkan kode CSS berikut langsung pada Template Anda, temukan kode ]]></b:skin> lalu letakkan CSS dibawah ini tepat diatasnya:



/*----------------------------------------------
Floating Menu Dropdown With Transition In Article
input code="nojs-transitionMenu"
use tag attribution id="showMenu","sahabat-blogger_77"
modified by. Devy Indriyani (licensi pattent)
publish on January 19, 2015
visit: http://sahabatblogger77.blogspot.com/
------------------------------------------------------*/
ul.dropMenu {
 position: relative;height:40px;
 background:#000;border-bottom:5px solid orange}

.item-menu {
 display: inline-block;padding: 0;height: 40px;
 width:100%;position: absolute}

.iconMenu {
 display: block;height: 40px;width: 40px;color:#fff;
 line-height:40px;text-indent: -999em;margin-left:-40px;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaTKrakto3BGPtRplBXcPojxdyqQKYtH6STfQ12_P8jjJwrVFbw1COMZ9R8BGg34N3AjHyE6A8e1W-5TonzGMAvth6ZoxSYZ4sm2IZRJ5IKE6_62MhQooVCLjWhhfOy9o6CVX5vdoShzY/s1600/icon.png) no-repeat 10px center}

ul.showMenu {position:absolute;left:-1200px;width:100%;transition:all 0.3s ease-out}
.showMenu li {background:rgba(0,0,0,0.0);display:block;transition:all 0.95s ease-out}
a.close {font-size: 18px;font-style: italic}
ul.showMenu:target {left: 0}
.showMenu:target li:first-child {margin-top: 35px}
.showMenu:target li {
 background: rgba(0,0,0,0.8);
 float: left;height: auto;
 width: 100%;margin: 0 0 1px -80px}

.showMenu:target li a {
 display: block;padding: 10px 15px;
 color: orange;transition: all 0.3s ease-out}

.showMenu:target li a:hover {
 padding: 10px 15px 10px 25px;
 background:rgba(234,153,153,.9);
 color:#fff}

p {margin-top:-60px}
.menuTitle {
 color:#fff;display:block;
 position:absolute;left:50px;
 line-height:40px;font-weight:bold;}

.close span {
 background:red;color:#fff;
 width:10px;border-radius:50%;
 font:bold 15px/normal Verdana,serif;
 padding:0 2px;
 box-shadow:1px 1px 1px #ccc;
 text-shadow:1px 1px 2px #111}


Tahap selanjutnya tinggal menuliskan teks atau judul artikel Anda untuk menggantikan teks link1, link2, link3....dan seterusnya pada HTML berikut, lalu letakkan pada postingan Anda saat membuat artikel baru dalam formulir HTML (bukan yang Compose) seperti ini:


<nav>
   <ul class="dropMenu">
      <div class="menuTitle">
           SHOW MENU
      </div>
     <li class="item-menu">
      <a href="#showMenu" class="iconMenu" title="Show Menu"></a>
           <ul id="showMenu" class="showMenu">
             <li><a href="#">Link 1</a></li>
             <li><a href="#">Link 2</a></li>
             <li><a href="#">Link 3</a></li>
             <li><a href="#">Link 4</a></li>
             <li><a href="#" class="close"><span>&times;</span> Menu Close</a></li>
           </ul>
     </li>
   </ul>
</nav>


NOTE -
Sebagai tambahan buat sahabat semua pecinta SAHABAT BLOGGER 77, internal link memang sangat membantu dalam kinerja SEO Optimasi, dengan membuat Floating Menu Dropdown Dengan Transisi pada postingan, maka disana Anda bebas menuliskan link sebanyak yang Anda mau, tetapi INGAT.. hal seperti itu jangan terlalu sering Anda lakukan, karena google akan menilai adanya unsur SPAM.
Informasinya Anda boleh baca - 8 Hal Yang Perlu Dihindari Tentang Optimasi SEO

Dan akhir kata Devy ucapkan terimakasih and Happy Blogging...

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Floating Menu Dropdown Dengan Transisi
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 =

46 komentar

  1. keren, mau dong floating menu nya mbak Dev, bisa di pasang di postingan ga mbak??

    BalasHapus
    Balasan
    1. seperti yang sudah saya jelaskan diatas mas, menu dropdown ini saya desain penggunaannya untuk ditampilkan pada postingan,

      emang gak dibaca gitu..?

      Hapus
    2. mas buret tadi mash ngantuk jadi kelwat tuh kata2 taruh kode di postingan (html) bukan compose ...hehe

      Hapus
    3. mungkin mas buret lagi ambisi mencari pertamak, padahal kan premium sudah turun, 2 kali lagi turunnya, hehe..

      Hapus
    4. hehehe, iya padahal baru aja turun harga premiumnya ,,, :)

      Hapus
    5. oh iya mbak Dev, saya lupa baca tadi, wong datang kemari langsung liat demonya, langsung naksir sama foating menunya.... :D
      bawa pulang kodenya yak, makasih mbak Dev.

      Hapus
    6. mas buret : jangan lupa sisain dikit buat saya sama mas fiu ye
      (c)

      Hapus
    7. kalo sdh selesai.. doa dikumpul...!

      Hapus
  2. efeknya bgus lembut dan ringan ,,, :)
    pagi2 dah suguhin yg lembut2 nih devy ,,, :)

    BalasHapus
    Balasan
    1. jika dibandingkan dengan toggle-effect mungkin efeknya masih kalah lembut mas. yang ini setengah lembut, kalau lembut perfectnya khusus antara Devy dan mas Fiu.
      hehe..(preeetttt,,,)

      Hapus
    2. wehh ,, toggle-effect lbh lmbut lg tho ... pernah di posting kah ? hehe

      ihihihihihi . Preeeeeet (sobek lg deh bajunya)... nah ntu dia yg klo kita mah jnagn ditanya emg pasti perfect lembutnya ,,, (f) hehe

      Hapus
    3. pernah saya gunakan untuk mendesain tampilan menu bertingkat seperti ini mas:

      Cara Membuat Diagram Menu Navigasi Bertingkat

      Hapus
    4. iya lbh lembut effectya ... sptnya dari smua yg ada dsini bisa unttuk membuat template baru ... tpi sy masih blm mudeng cara nggabunginnya ,,,, heheh

      Hapus
    5. sama mas fiu : kalau masalah gabungin kode, aku juga ga mudeng.
      tapi kalau masalah godain mbak devy atau menggabungkan dua hati jadi satu kayaknya sedikit ngerti :d
      kalau yang ini setuju ga mas fiu (c)

      Hapus
    6. sebenarnya sih cukup terbilang mudah mas, yang sulit dalam membuat template adalah membentuk rangkanya terlebih dahulu, kemudian meng-upload semua kode yang akan kita letakkan didalamnya, namun sebelumnya kita format dahulu pada note-pad HTML.

      setelah semua beres, tes kualitas kode seperti responsive, letak aside dan lain-lain, itu sebabnya devy males buat template, apalagi sudah banyak situs-situs penyedia template yang dapat kita download secara cuma-cuma.

      Hapus
    7. kang jum@ kali ini sy setju deh ama kang jum heheheheeh :)

      Devy@ ow jadi gtu tho, prosesi pembuatan rangkanya yg lbh riweh hehe ... sy pengen banget nih nyoba yg bgtuan ,,, mumpung kesepakatan sudah deal kapan yah bisa belajar langsung ... :)

      Hapus
    8. begini nh jadinya kalo adminya MACAN.. kumbang2 pada berebutan cari perhatian..!
      aaaduuh.. !.. jadi nda kebagian

      Cowo2 Ganteeng..!

      Godain Jenk aLdini juga donk.. ntr ditraktir dh..! suwer
      ditunggu ntr malam di taman !
      ..sbelah makam mbah ya..??!


      Vy..! mau nanya..
      kalo kita sudah menghilangkan sidebar widget pake tag cond.. cara tengahkan konten yg sdh kita hilangkan ituh.. bagaimana ya..?
      makasi sebelumnya..!

      Kang Jum..N Mas Fi..
      PULAAAAAANG.. SABUN COLEK DITARO DI MANAAA...
      MAU NYUCI NIH... IBU KOST LAGI MARAH2.. !
      DICARIIIN.......!


      Hapus
    9. Mas al tanya cara membuat objek berada ditengah atau apa neh mas, soalnya devy bingung, mngetengahkan konten yang sudah dihilangkan, kan kontennya sudah dihilangkan, lalu bagian mana yang harus ditengahkan.
      halaman posting atau halaman aside.?

      Hapus
    10. yaaa ituh .. membuat obyek berada di tengah.. huhuhuhu
      maklum..ya Vy.. nda pandai menjelaskan lewat kata2, kalao bahasa tubuh baruu..!

      begini..
      halaman statis saya yang berisi daftar isi, sidebarnya sy ilangkan pakai tag kondisi.. daftar isi inih mau sy tengahkan... ituh caranya bagaimana?..
      sekian dan terimahkasih tengkyu..

      Hapus
    11. kita ambil alternatifnya saja mas,
      jika halaman blog dasarnya adalah 2 kolom, lalu membungkus aside-page untuk dihilangkan dengan tag-kondisional, maka bentuk halaman masih diatur dengan 2 kolom, karena sidebar-page hanya kita hilangkan, bukan dihapus

      namun apabila halaman 2 kolom dengan menghapus sidebar, maka halaman akan berubah bentuk 1 kolom..disana kita tinggal mengatur layout-casing pada halaman post. mas bisa gunakan CSS seperti

      -relative
      -absolute
      -margin

      pada CSS halaman itu diatur dengan kode seperti ini, temukan kode yang kurang lebih mirip dengan ini:

      /*pengaturan CSS post-page*/
      #main-wrapper {
      width:66%;
      float:left;
      word-wrap:break-word;
      overflow:hidden;}

      /*pengaturan CSS sidebar-page*/
      #sidebar-wrapper {
      width:33%;
      float:right;
      word-wrap:break-word;}


      mas cukup fokus pada kedua CSS itu, mau diubah dan dibentuk seperti apa.

      Hapus
  3. aku gaptek banget dev kalau soal ginian..huhuhu..

    BalasHapus
    Balasan
    1. saya juga mbak, mari belajar sama-sama biar gak gaptek lagi.

      Hapus
  4. saya lihat demonya menu dropdown nih keren banget mbk, simpen dulu ah..

    BalasHapus
  5. gimana cara gan

    BalasHapus
  6. Wah , dropdownnya keren banget..Script langsung lewat widget ada ga mba?

    BalasHapus
    Balasan
    1. sudah pernah saya posting mas, sebagai pilihan mas bisa gunakan salah satu widget dibawah ini:

      Widget Menu Blogger Sidebar Page Dengan Target Gambar

      About Profile Show Menu With Hover Effect

      Hapus
  7. kian marak pemakaian menu dropdown menu seperti ini,selain menhemat dan juga terlihat lebih elegant, dan yang paling utama ringan dan responcive plus valid HTML5 kan ya kak?

    BalasHapus
    Balasan
    1. menu drop down di suaki blogger pada umumnya kang.

      Hapus
  8. keren banget mbak setelah saya liat menu Demo nya, ijin ambil script nya ya :D

    BalasHapus
  9. Keren tutorial desainnya ini. perlu dicoba untuk fitur tambahan bagi yang memerlukan 8-)

    BalasHapus
  10. Mbak devy emang ahli dalam HTML deh 4 jempol buat mbak devy (h)

    BalasHapus
    Balasan
    1. boleh-boleh mbak, tetapi Devy gak mau loh kalau jempol kaki, kegedean, hehe..

      Hapus
    2. klo devy gk mw jempol kaki, yg dua jempol lg dari sy aja gmn ? :)

      Hapus
  11. keren mbak..., izin simpan ya kapan-kapan bisa diterapkan
    blognya keren penuh dengan efek... [-(

    BalasHapus
  12. :) saya pengen nyoba script baru2 lah :)) makasih

    BalasHapus
  13. Mbak devi jago koding blog, saya tuh pusing otak atik koding blog, kapan-kapan saya bisa tanya nih cara utak atik koding blog. mantap :))

    BalasHapus
  14. Floating menunya jadi transparan begitu. Kalau pakai ini mugkin lebih cocok di HP kali yah.

    BalasHapus
  15. Punya saya yang menu bawah title sih sudah ya... yang ini belum.... Kayak gini kadang bikin takut kalau salah lokasi ee lupa

    BalasHapus
  16. ni udh keren mba blog nya mantap menu dropdown floating nya

    BalasHapus
  17. wah... tutorialnya keren banget, saya mau coba juga floating menunya agar bisa tampil keren.
    :) ini mungkin juga koment pertama saya disini. salam persahabatan

    BalasHapus
  18. bisa muncul dari samping gitu ya, bagus, atraktif, memang lebih bagus transparent :D

    BalasHapus
  19. Mau nyoba ah, sepertinya menu dropdown gue kurang greget deh. nice pos mbak Devy. bermanfaat banget :)

    BalasHapus
  20. menarik juga ya ketika munculnya dan kayak ditarik pas udah menutup menunya...muantab....kalau dijadikan dialog box manarik juga kali ya sista...ok deh saya pelajari dulu ya...terima kasih tutornya dev...

    BalasHapus
  21. sepertinya trik ini bisa diterapkan di wordpress ya mba?

    BalasHapus
  22. Mbak, Menu & Sub menu yang dipasang di blog ini keren, boleh bagi tutorial pasangnya?

    http://www.nirvashmu.co.vu

    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