header ilmugrafis
Home Tutorials Fonts IG Store Contact
 
ilmugrafis » WEB DESAIN - DREAMWEAVER » Session 1  |  » Session 2

Rollover Menu Website dengan CSS

Publish: 25 November 2013 | Author & Copyright: Johan | Status: FREE tutorial Dreamweaver

Setelah kemarin membuat tutorial belajar Photoshop, biar tidak jenuh maka kali ini penulis mencoba sesuatu yang lain. Kali ini penulis akan membuat tutorial rollover menu website dengan CSS. Aplikasi yang dipakai yaitu Dreamweaver.

Dengan menu ini maka tampilan website anda akan lebih menarik dan membuat pengunjung semakin betah berlama - lama di website anda, dan juga membuat website anda terlihat lebih profesional dan modern.

Bagaimana cara membuat rollover menu dengan CSS (tanpa javascript) sehingga website tetap ringan dan tidak memberatkan beban server?

ok mari kita ikuti langkah - langkahnya :

Sebelum melangkah lebih lanjut, maka saya terangkan dulu apa yang dimaksud Rollover Menu!
Rollover adalah istilah bila kursor berada disebuah link maka link tersebut akan bereaksi (misal berganti warna,dll). Sebagai contoh, anda bisa melihat menu website dari www.apple.com ,dimana ketika kursor diarahkan ke menu utama maka dia akan berganti warna. (contoh : pada Mac)

apple menu
gambar : menu website apple

Ok sekarang mari kita membuatnya :

1. Pertama - tama kita buat dulu image background menu untuk rollover menu kita dengan Photoshop

karena disini saya lebih menjelaskan ke tehnik css nya, bukan ke cara mendesainnya, jadi silahkan buka - buka lagi ya pelajaran tentang photoshop dasar hehehe ^_^v (peace!)

oke sebagai contoh saya telah membuat gambar ini :

tombol background
gambar : background tombol
[kalau malas membuat download disini (klik kanan > save image ke komputer)]

Gambar diatas adalah background tombol yang akan kita pergunakan. Gambar diatas terbagi menjadi 2 bagian, yaitu bagian atas untuk tombol yang tidak ditempati kursor (state), dan bagian kedua adalah bagian aktif ketika ditempati kursor (Over/Rollover)

pada contoh kali ini saya berinama file tersebut dengan nama tombol.gif. Ukuran 125 x 80 pixel

ukuran button
gambar : button.gif

2. Perhatikan gambar diatas, dan perhatikan baik-baik pada ukuran yang saya berikan pada bagian atas. nah ukuran itu yang nanti akan kita pergunakan sebagai ukuran dari tombol. Yang kita perlukan sekarang adalah membuat kode html untuk tombol diatas:

<a href="#">Rollover</a>

Nah kemudian sekarang kita buat untuk CSS nya :

a {
display: block;
background: url(tombol.gif) top center; /*alamat gambar tombol anda*/
width: 125px /*Lebar Tombol*/
height: 40px /*Tinggi Tombol*/
text-align: center; /*Supaya Teks Ditengah (vertical)*/
line-height: 40px; /*Supaya Teks Ditengah (Horizontal)*/
font-family: Geneva, Arial, Sans-Serif; /*(Jenis Huruf)*/
color: #fff; /*(Warna Huruf)*/
text-decoration: none; /*Jangan pergunakan garis bawah*/
}

a:hover { /*Posisi kursor diatas tombol*/
background: url(tombol.gif) bottom center;
}


Intinya, kita menukar posisi image pada tombol.gif, bila tidak aktif maka ia menggunakan background bagian atas, ketika aktif maka akan digunakan background bagian bawah. Kenapa kita harus menggunakan display:block? Dikarenakan <a> merupakan inline tag, maka ia harus menggunakan display:block agar menjadi block tag dan dapat merespon link area. Tidak susah kan?

rollover menu
Versi demonya KLIK DISINI

Mau Download sourcenya untuk belajar?
download source
Download Disini

Anda bisa memodifikasi dan mengembangkannya sendiri untuk keperluan website anda, terima kasih, semoga bermanfaat (keep Smile)

Tutorial Terkait :
« Membuat Drop Down Menu Sederhana di Website

Share URL Share the URL of this Tutorial in IM, Email or post in forums

* Klik Link, copy (ctrl + c) dan paste (ctrl + v)
 

author

Info dan Kontak Penulis

Johan Felisitas
Tentang Penulis : Lahir di Surabaya 1986, Menyukai komputer grafis terutama program photoshop dan coreldraw. Saat ini bekerja sebagai designer grafis di salah satu perusahaan swasta di Surabaya.
Motto : Berikan yang terbaik, untuk mendapatkan yang terbaik!

Penulis dapat dihubungi via:
Twitter: @johanfelisitas
Google+ :
Facebook : facebook.com/tomuramaster
Email : johan.felisitas[at]gmail[dot]com



Rekomendasi ilmugrafis

DREAMWEAVER WEBDESIGN
Desain Website Dreamweaver

CD Tutorial ini berisi tips dan trik desain website dengan Dreamweaver dan Photoshop...



[adv.] Supported by
dumetschool kursus desain grafis
DumetSchool.com

PHOTOSHOP
Photoshop Dasar
Photoshop Teks Effect
Photoshop Photo Efek
Photoshop Alternatif
Photoshop Plugins

CORELDRAW
CorelDRAW Dasar
CorelDRAW Logo
CorelDRAW Bebas
CorelDRAW Tools

FOTOGRAFI
Lightroom

VECTOR
Adobe Illustrator

ANIMASI
Flash
Swishmax

3D MODELING
3dsMAX
AutoCAD
Cinema 4D
Blender

VIDEO EDITING
Adobe Premiere
After Effect
Pinnacle

WEB DESIGN
Dreamweaver
jQuery

PUBLISHING
InDesign
Ms. Paint

FREEWARE
Gimp
Inkscape

ARTS
News
Artikel
Gallery
Jasa Desain

FRIENDS
Photoshop Desain
Hog Pictures

Link to us


bantuan information

ilmugrafis launcher
Privacy policy
Peta Situs | Term of Use web edukasi - ilmugrafis.com Indonesia
Copyright © 2017 ilmuGrafis. All Rights Reserved. | RSS | Subscribe
Hak Cipta Dilindungi Undang - Undang & Dmca
eXTReMe Tracker