Floating Menu Dropdown Dengan Transisi

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:

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/AVvXsEhxFV-GQ2dC365w8hhlz1if0wdfqUIdFePlsvsVfX_XbVNo-9Rl5cOTebGA_Kx_hpP1jf7VVXxEih28-ZRp-6FrKQTbUxXoO40HLALUsijX2Bf8Z1pchnt8LoXzP7qO-_uuKfYMEqk6I8g/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...