komputerdia.com - Masih "ngulik" perihal macam-macam hidangan kafe pada blogger, kali ini saya akan membagikan cara bagaimana menciptakan hidangan kafe atau hidangan navigasi dropdown responsive dengan perhiasan efek scroll tanpa harus menekan dan menggulir mouse.
Menu kafe yang satu ini memang dapat dikategorikan ke dalam hidangan kafe yang elegan, pasalnya penggunaan efek pada dropdown sudah tidak perlu memerlukan suatu tindakan yang harus kalian lakukan ibarat menggulir atau menekan kursor mouse.
Baca Juga :
- Cara Membuat Menu Bar Dengan Gaya Slide Responsive .
- Cara Membuat Menu Bar Responsive Ketika Di Klik Kanan .
- Cara Membuat Menu Navigasi Simple Dropdown Di Blog .
- Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog .
Langkah - Langkah Membuat Menubar Scroll Dropdown
- Masuk ke akun blogger kalian
- Pilih hidangan template atau theme, lalu cari kode ]]></b:skin>.
- Letakan isyarat dibawah ini diatas kode ]]></b:skin> .
nav{ width: 750px; margin: 1em auto; } ul{ margin: 0px; padding: 0px; list-style: none; } ul.dropdown{ position: relative; width: 100%; } ul.dropdown li{ font-weight: bold; float: left; width: 180px; position: relative; background: #ecf0f1; } ul.dropdown a:hover{ color: #000; } ul.dropdown li a { display: block; padding: 20px 8px; color: #34495e; position: relative; z-index: 2000; text-align: center; text-decoration: none; font-weight: 300; } ul.dropdown li a:hover, ul.dropdown li a.hover{ background: #3498db; position: relative; color: #fff; } ul.dropdown ul{ display: none; position: absolute; top: 0; left: 0; width: 180px; z-index: 1000; } ul.dropdown ul li { font-weight: normal; background: #f6f6f6; color: #000; border-bottom: 1px solid #ccc; } ul.dropdown ul li a{ display: block; color: #34495e !important; background: #eee !important; } ul.dropdown ul li a:hover{ display: block; background: #3498db !important; color: #fff !important; } .drop > a{ position: relative; } .drop > a:after{ content:""; position: absolute; right: 10px; top: 40%; border-left: 5px solid transparent; border-top: 5px solid #333; border-right: 5px solid transparent; z-index: 999; } .drop > a:hover:after{ content:""; border-left: 5px solid transparent; border-top: 5px solid #fff; border-right: 5px solid transparent; } - Langkah seterusnya, kalian cari kode </head>, dan letakkan isyarat berikut ditas isyarat </head> .
<script src="https://rawgit.com/mastamvan/backup/master/menudropscroll.js" type="text/j4vascript"></script>
- Selanjutnya kalian cari isyarat </body>, dan tempelkan isyarat dibawah ini sempurna diatas isyarat </body> .
<script src="https://rawgit.com/mastamvan/backup/master/menudropscroll2.js" type="text/j4vascript"></script>
- Tekan tombol simpan, untuk meyimpan setelan yang telah kalian buat.
- Langkah terakhir silahkan kalian masuk ke hidangan tata letak atau layout, pilih tambahkan gadget atau add widget , dan klik pada hidangan Html/JavaScript .
- Setelah itu kalian akan melihat tampilan ibarat gambar dibawah ini
- Pada bab judul biarkan saja kosong, dan pada bab konten silahkan kalian copy isyarat dibawah ini dan tempelkan pada kotak konten tersebut
<nav> <ul class="dropdown"> <li class="drop"><a href="#">Really Tall Menu</a> <ul class="sub_menu"> <li><a href="aciknadzirah.blogspot.com/">Lorem</a></li> <li><a href="aciknadzirah.blogspot.com/">Ipsum</a></li> <li><a href="aciknadzirah.blogspot.com/">Dolor</a></li> <li><a href="aciknadzirah.blogspot.com/">Lipsum</a></li> <li><a href="aciknadzirah.blogspot.com/">Consectetur </a></li> <li><a href="aciknadzirah.blogspot.com/">Duis</a></li> <li><a href="aciknadzirah.blogspot.com/">Sed</a></li> <li><a href="aciknadzirah.blogspot.com/">Natus</a></li> <li><a href="aciknadzirah.blogspot.com/">Excepteur</a></li> <li><a href="aciknadzirah.blogspot.com/">Voluptas</a></li> <li><a href="aciknadzirah.blogspot.com/">Voluptate</a></li> <li><a href="aciknadzirah.blogspot.com/">Malorum</a></li> <li><a href="aciknadzirah.blogspot.com/">Bonorum</a></li> <li><a href="aciknadzirah.blogspot.com/">Nemo</a></li> <li><a href="aciknadzirah.blogspot.com/">Quisquam</a></li> <li><a href="aciknadzirah.blogspot.com/">Adipisci </a></li> <li><a href="aciknadzirah.blogspot.com/">Excepteur</a></li> <li><a href="aciknadzirah.blogspot.com/">Consectetur </a></li> <li><a href="aciknadzirah.blogspot.com/">Duis</a></li> <li><a href="aciknadzirah.blogspot.com/">Voluptate</a></li> <li><a href="aciknadzirah.blogspot.com/">Ipsum</a></li> <li><a href="aciknadzirah.blogspot.com/">Dolor</a></li> <li><a href="aciknadzirah.blogspot.com/">Lipsum</a></li> </ul> </li> <li class="drop"><a href="#">Kinda Tall Menu</a> <ul class="sub_menu"> <li><a href="#">Lorem</a></li> <li><a href="aciknadzirah.blogspot.com/">Ipsum</a></li> <li><a href="aciknadzirah.blogspot.com/">Dolor</a></li> <li><a href="aciknadzirah.blogspot.com/">Lipsum</a></li> <li><a href="aciknadzirah.blogspot.com/">Consectetur </a></li> <li><a href="aciknadzirah.blogspot.com/">Duis</a></li> <li><a href="aciknadzirah.blogspot.com/">Sed</a></li> <li><a href="aciknadzirah.blogspot.com/">Natus</a></li> <li><a href="aciknadzirah.blogspot.com/">Excepteur</a></li> <li><a href="aciknadzirah.blogspot.com/">Voluptas</a></li> <li><a href="aciknadzirah.blogspot.com/">Voluptate</a></li> <li><a href="aciknadzirah.blogspot.com/">Malorum</a></li> <li><a href="aciknadzirah.blogspot.com/">Bonorum</a></li> <li><a href="aciknadzirah.blogspot.com/">Nemo</a></li> <li><a href="aciknadzirah.blogspot.com/">Quisquam</a></li> </ul> </li> <li class="drop"><a href="#">Average Menu</a> <ul class="sub_menu"> <li><a href="#">Lorem</a></li> <li><a href="aciknadzirah.blogspot.com/">Ipsum</a></li> <li><a href="aciknadzirah.blogspot.com/">Dolor</a></li> <li><a href="aciknadzirah.blogspot.com/">Lipsum</a></li> <li><a href="aciknadzirah.blogspot.com/">Consectetur </a></li> </ul> </li> <li><a href="aciknadzirah.blogspot.com/">No Menu</a> </li> </ul> </nav>
- Silahkan kalian ganti isyarat yang berwarna Merah , dengan alamt url yang akan kalian tuju
- Setelah semua pengaturan telah kalian atur, silahkan kalian tekan tombol simpan untuk mengakhiri langkah ini
- Silahkan kalian lihat perubahan pada blog kalian .
- Semoga bermanfaat untuk kalian semuanya
- Jika kalian berhasil maka kalian akan melihat hidangan kafe ibarat pada pola dibawah ini
Sumber Referensi : https://mastamvan.blogspot.co.id/