Membuat Menu Accordion

Cara mendapatkan 3 Dolar per hari, kerjanya cuma klik iklan yang muncul langsung dibayar caranya:klik gambar dibawah ini atau klik Register Clixsense, lengkapi identitas, tekan Sign-Up kemudian konfirmasi Email.Anda siap klik iklan. Info Lengkap

Assalamualaikum Wr,Wb......
Pada pertemuan kali ini saya ingin berbagi bagaimana cara membuat menu accordion sederhana. Salah satu fungsi dari Accordion menu adalah meringkas tampilan, dan juga dapat memperindah tampilan web anda. Yang saya share disini, hanya menu sederhana. Anda bisa mengutak-atik sesuka hati . langsung saja ya ..

1. Buka bloger.com
2. Klik Tata Letak
3. Klik Tambah Gadget
4. Klik HTML
5. Copykan kodedi bawah ini

<style> * { margin: 0; padding: 0; } .accordian { width: 600px; height: 240px; overflow: hidden; margin: 5px auto; box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); } .accordian ul { width: 800px; } .accordian li { position: relative; display: block; width: 100px; float: left; border-left: 1px solid #888; box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .accordian ul:hover li {width: 50px;} .accordian ul li:hover {width: 400px;} .accordian li img { display: block; } .image_title { background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; bottom: 0; width: 100px; } .image_title a { display: block; color: #fff; text-decoration: none; padding: 10px; font-size: 16px; } </style> <div class="accordian"> <ul> <li> <div class="image_title"> <a href="#">Tutorial Ms.Word</a> </div> <a href="#"> <img src="http://i59.tinypic.com/2rmmihw.jpg" title="Tutorial Ms.Word"/> </a> </li> <li> <div class="image_title"> <a href="#">Tutorial Ms.Excel</a> </div> <a href="#"> <img src="http://i58.tinypic.com/chusx.jpg" title="Tutorial Ms.Excel"/> </a> </li> <li> <div class="image_title"> <a href="#">Tutorial Power Point</a> </div> <a href="#"> <img src="http://i60.tinypic.com/2h6aydj.jpg" title="Tutorial Ms.Power Point"/> </a> </li> <li> <div class="image_title"> <a href="#">Tutorial Blog</a> </div> <a href="#"> <img src="http://i59.tinypic.com/2e64ufk.jpg" title="Tutorial Blog"/> </a> </li> <li> <div class="image_title"> <a href="#">Tutorial Visual Basic</a> </div> <a href="#"> <img src="http://i61.tinypic.com/ofstns.jpg" title="Tutorial Visual Basic"/> </a> </li> </ul> </div>


Hasilnya akan tampak seperti gambar dibawah

Arahkan Mouse pada area gambar (hasil eksekusi)

Sekiaia tutorial kali ini, semoga bermanfaat.........

Penulis: tutorial ~ Nurhasan Blogger | Blog Tutorial dan Informasi |

Artikel Membuat Menu Accordion ini dipublish oleh tutorial pada hari Wednesday, 8 April 2015
Terima kasih Anda telah membaca artikel tentang Membuat Menu Accordion.