Sayda Sayda: Web

Membuat Drop Down Menu Sederhana di Website

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

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
membuat css

tulis Kode CSS di bawah ini

/* CSS untuk drop down menu dimulai */
ul
{
list-style:none;
padding:0px;
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;
text-decoration:none;
display:block;
width:100px;
height:25px;
line-height:25px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border: 1px solid #560E00;
}
ul li a:hover
{
color:#cccccc;
background:#560E00;
font-weight:bold;
text-decoration:none;
display:block;
width:100px;
text-align:center;
-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;
text-decoration:none;
display:block;
width:100px;
text-align:center;
margin-top:2px;
}
ul li.sublinks a:hover
{
color:#000000;
background:#FFEFC6;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;
}
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,
memasukkan css

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:
css oke

klik browse, lalu ambil "dropdown.css", OK
Nah setelah langkah di atas benar maka akan ada code seperti ini di halaman html kita.
code css

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">
<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
memasukkan jquery

tulis codenya, Letakkan di bawah tag Title

setelah itu tambahkan code Javascript ini,
letakkan di bawah tag JQuery

ini gambarnya
tambahan javascript

Selesai, dan hasilnya kira - kira seperti ini

Gambar: Drop down menu sederhana

Drop down menu telah selesai dibuat, Lihat Demo Drop Down menu ini Disinis. Anda bisa mengganti menu - menu sesuai keinginan anda dengan mengedit teks "Menu One" atau "Menu Two" dan Sub menu "Link 1" sampai dengan "Link 5" pada halaman coding HTML, silahkan dikembangkan sesuai keinginan. Sampai ketemu di tutorial website lainnya. Source code Drop Down menu ini bisa anda download disini. Terima kasih, semoga bermanfaat. Jika ada Saran maupun pertanyaan silahkan kontak saya. Terima kasih, semoga bermanfaat

Membuat Slideshow Foto Auto dengan jQuery

Sewaktu membaca inbox di gmail ternyata ada seorang yang menanyakan kepada saya bagaimana cara untuk membuat Automatic Animasi Slideshow atau Slide Foto Auto dengan menggunakan jQuery. Biasanya fitur ini dipakai untuk membuat animasi pada headline berita pada sebuah halaman utama website. Sehingga berita akan tampil bergantian sesuai dengan pengaturan waktu (timer) yang anda inginkan.

Download dulu bahan - bahan (support file) pembuatan animasiSlideshow foto otomatis autoplay :

Download Now

Isi Support Files :
A. jquery-1.8.0.min
B. head.css
C. headline.js
D. headnews.html
E. bahan foto slideshow

Tanpa bertele - tele dan panjang lebar maka berikut ini tutorial cara membuat animasi Slideshow Foto Otomatis yang akan saya jelaskan secara singkat jelas dan padat.

1. Langkah pertama adalah bersabar & fokus... hehehe...
ok, mari kita pelajari kode yang ada di dalam headnews.html. (Klik kanan "headnews.html" lalu pilih open with notepad / dreamweaver ) untuk mengetahui kode di dalamnya.

coba perhatikan kodenya :

Script diatas fungsinya untuk menghubungkan ketiga bahan : jquery-1.8.0.min + head.css + headline.js

Sedangkan kode diantara <script type="text/javascript"> ... </script> adalah untuk memanggil fungsi jquery. Bingung? ok silahkan anda baca lagi apa itu jQuery di Tentang jQuery

2. Sekarang masuk ke tahap input / memanggil gambar, perhatikan kode berikut ini :

Kode ini terletak diantara tag <body> ... </body>

<div id="divTrigger">
<a href="javascript:;" onClick="bukaContent(this,'div1')" id="slideAwal">1</a>
<a href="javascript:;" onClick="bukaContent(this,'div2')">2</a>
<a href="javascript:;" onClick="bukaContent(this,'div3')">3</a>
<a href="javascript:;" onClick="bukaContent(this,'div4')">4</a>
</div>
<div id="divContent">
<div id="div1">
<span class="title">Slide 1</span>
<img src="images/1-slide.jpg" align="left" />
Slide show pertama! wow!
</div>
<div id="div2">
<span class="title">Slide 2</span>
<img src="images/2-slide.jpg" align="left" />
Slide show kedua! awesome!
</div>
<div id="div3">
<span class="title">Slide 3</span>
<img src="images/3-slide.jpg" align="left" />
Slide show ketiga! cute!
</div>
<div id="div4">
<span class="title">Slide 4</span>
<img src="images/4-slide.jpg" align="left" />
Slide show keempat, Finish! hehehe ayo - ayo jangan bengong aja gan! Kembali fokus...!
</div>
</div>

Anda tinggal mengganti input dari Title (judul foto slideshow), img src (ini untuk menghubungkan image / foto yang akan kita slideshow), dan teks (berfungsi sebagai deskripsi / tambahan keterangan)

Mudah bukan, nantinya anda tinggal mengutak - atik inputnya

3. Untuk merubah ukuran border maka kita bisa mengutak - atiknya di head.css, jadi buka head.css di aplikasi notepad atau dreamweaver
step 2

Sesuaikan dengan ukuran gambar. Disini gambar saya resolusinya adalah 700 x 350

Jadi usahakan ukurannya tidak lebih kecil gambar slideshow kita.

Hasilnya Lihat Disini :

Animasi Foto Slide Automatis dengan jQuery Slideshow telah saya tes di browser mozilla firefox, google chrome, android browser, opera browser maupun opera mini dan semuanya berjalan baik dan lancar (all work). Terima kasih, semoga bermanfaat