Publish: 7 Juni 2012 Author & Copyright: Johan Status: FREE tutorial

Ukuran: px

Mulai penontonan dengan halaman:

Download "Publish: 7 Juni 2012 Author & Copyright: Johan Status: FREE tutorial"

Suhendra Kusuma
7 tahun lalu
Tontonan:

1 Kumpulan Tutorial dan belajar ilmu website mulai dari hosting dan coding seperti belajar HTML, CSS, Javascript, Javascript, JQuery, ASP.Net hingga SEO dan Desain web dengan Dreamweaver dan Photoshop untuk mempercantik halaman website Membuat Drop Down Menu Sederhana di Website Publish: 7 Juni 2012 Author & Copyright: Johan Status: FREE tutorial Pada tutorial Dreamweaver kali ini saya akan mencoba memberikan penjelasan bagaimana cara membuat drop down menu yang simple dan sederhana agar bisa dan mudah dipelajari serta dikembangkan mungkin nantinya oleh para calon web developer maupun web designer yang singgah di website ilmugrafis. Sedikit penjelasan, Dropdown Menu merupakan menu yang bila kita sorot dengan mouse maka menu tersebut akan memunculkan menu yang lain (sub menu). Saat ini banyak sekali yang sudah menggunakan Drop Down menu karena alasan terlihat lebih modern dan canggih, menambah keindahan website sampai menghemat space/ruang di websitenya karena dengan drop down kita bisa memberikan sub menu tersembunyi pada menu di website kita. Ok, mari kita mencoba membuatnya: 1. Buka aplikasi dreamweaver kita, disini saya menggunakan Dreamweaver 8 karena ringan di komputer saya. Bagi yang sudah menggunakan dreamweaver CS5 bahkan CS6 tenang saja karena cara ini bisa diaplikasikan untuk semua dreamweaver (start >> all program >> Dreamweaver) 2. buat CSS file, caranya. Klik File >> New >> Tab General >> Basic Page >> Css tulis Kode CSS di bawah ini /* CSS untuk drop down menu dimulai */ ul list-style:none; padding:0px;

2 margin:0px ul li display:inline; float:left; ul li a color:#ffffff; background:#990e00; margin-right:5px; font-weight:bold; font-size:12px; font-family:verdana; height:25px; line-height:25px; -webkit-border-radius:5px; -moz-border-radius:5px; border: 1px solid #560E00;

3 ul li a:hover color:#cccccc; background:#560e00; font-weight:bold; -webkit-border-radius:5px; -moz-border-radius:5px; border: 1px solid #000000; ul li.sublinks a color:#000000; background:#f6f6f6; border-bottom:1px solid #cccccc; font-weight:normal; margin-top:2px;

4 ul li.sublinks a:hover color:#000000; background:#ffefc6; font-weight:normal; ul li.sublinks display:none; /* CSS drop down menu sederhana end */ wow banyak bener, tenang copy dan paste saja CSS ini ke CSS yang baru anda buat dengan dreamweaver, save dan beri nama "dropdown.css" 3. Sekarang buat halaman web, pakai saja HTML agar lebih simple, karena jika memilih format PHP butuh bantuan Sever untuk mengoprasikannya caranya mirip css tadi, cuma urutannya File >> New >> Basic Page >> Html >> Ok sekarang panggil css yang kita buat, caranya:

5 klik browse, lalu ambil "dropdown.css", OK Nah setelah langkah di atas benar maka akan ada code seperti ini di halaman html kita. itu artinya style (CSS) yang kita buat telah masuk ke halaman html 4. Masukkan kode ini ke code html kita. pilih code  <ul> <li><a href="#" class="dropdown">menu One</a></li> <li class="sublinks"> <a href="#">link 1</a> <a href="#">link 2</a> <a href="#">link 3</a> <a href="#">link 4</a> <a href="#">link 5</a> </li> </ul>   <ul> <li><a href="#" class="dropdown">menu Two</a></li> <li class="sublinks">

6 <a href="#">link 1</a> <a href="#">link 2</a> <a href="#">link 3</a> <a href="#">link 4</a> <a href="#">link 5</a> </li> </ul>   copy dan paste code di atas di bagian antara <body>... </body>, bagi yang belum mengerti tag seperti ini lihat tutorial BELAJAR WEBSITE HTML 4. Tambahkan JQuery Script, wow apa lagi ini ya? tenang... lebih jelasnya klik Pengenalan JQuery Website tulis codenya, Letakkan di bawah tag Title setelah itu tambahkan code Javascript ini, letakkan di bawah tag JQuery <script type="text/javascript"> $(function() $('.dropdown').mouseenter(function() $('.sublinks').stop(false, true).hide(); var submenu = $(this).parent().next();

7 submenu.css( position:'absolute', top: $(this).offset().top + $(this).height() + 'px', left: $(this).offset().left + 'px', zindex:1000 ); submenu.stop().slidedown(300); submenu.mouseleave(function() $(this).slideup(300); ); ); ); </script> ini gambarnya Selesai, dan hasilnya kira - kira seperti ini Gambar: Drop down menu sederhana

dokumen-dokumen yang mirip

SImple Pop-Up Modal dengan CSS3 dan Jquery

SImple Pop-Up Modal dengan CSS3 dan Jquery Oleh: d-newbie Assalamualaikum wr.wb. bertemu lagi dengan saya, kali ini saya akan menulis tutorial tentang pop-up, apa itu pop-up? Kalo menurut wikipedia pop-up