Tutorial CSS3 : Membuat Slider Menu Sederhana Dengan CSS3 Tanpa Javascript

Kembali 1 minggu ini saya akan berlibur di kampung halaman, karena perkuliahan belum aktif + rasa jenuh yang melanda selama proses perwalian. Dimana saya dan 3 teman yang lainnya diberikan tugas untuk mengawasi aplikasi dan proses perwalian. Kerja udah kayak kuli, hampir 11 banding 12 sama kuliah. Yang dijanjikan akan mendapat uang capek alias pesangon, sampai saat ini belum cair juga. “Itulah kampus dan deritaku, kamu…???”

Sekian dulu curhatnya :D, dan sekarang saya akan membagikan sedikit tutorial sederhana tentang CSS3 yaitu Membuat Slider Menu Sederhana Dengan CSS3 Tanpa Javascript. Hampir sama dengan postingan saya beberapa hari lalu tentang membuat accordion menu dengan CSS3 tanpa sedikitpun sentuhan javascript. Efek-efek yang dimiliki CSS3 memang maknyoos, saya pun ketagihan untuk mencicipinya. Dan sama seperti menu accordion dengan CSS3 yang kemarin, slider menu dengan CSS3 ini tidak berjalan pada firefox. Dan sampai saat ini, saya belum tau juga apa penyebabnya. OK deh, langsung aja ke cara pembuatannya. Cekidot gan…!!!

1. Buka editor kesayangan rekan-rekan, berhubung saya lagi pakai Linux jadinya saya gunakan gedit. Kita akan menyusun kode-kode html’nya terlebih dahulu, seperti di bawah ini :

<ul class="slider">
	<li><a href="#">Beranda</a></li>
	<li><a href="#">Tentang Saya</a></li>
	<li><a href="#">Download</a></li>
	<li><a href="#">Sahabat</a></li>
	<li><a href="#">Tutorial</a></li>
</ul>

2. Selanjutnya kita akan mulai untuk membuat kode-kode CSS’nya. Dengan -webkit-transition-duration yang merupakan komponen dari CSS3, kita akan membuat sebuah efek transisi yang akan menghasilkan sebuah efek sliding.

body
{
font-family: Tahoma,Arial;
font-size: 12px;
}

ul.slider li
{
-webkit-transition-duration: 800ms;
width: 250px;
border:1px solid #F2F2F2;
margin:1px;
display: block;
}

ul.slider li:hover
{
margin-left: 30px;
}

ul.slider li a
{
-webkit-transition-duration: 800ms, 800ms, 800ms, 800ms;
background-color: #fff;
color: #afafaf;
padding: 10px;
}

ul.slider li a:link, ul.slider li a
{
display:block;
text-decoration:none;
}

ul.slider li a:hover
{
background-color: #3B5998;
color: #D8DFEA;
padding-left: 30px;
z-slider: 2;
}

3. Karena saya memisahkan file css dengan file html’nya, jangan lupa untuk memanggil file css di atas. Atau bagi yang tidak ingin repot, bisa juga menempatkan kode css di atas menjadi satu dengan file html’nya.

<link href="style.css" rel="stylesheet" type="text/css">

Silahkan dibuka via web browser, dan jangan terkejut jika efeknya tidak berjalan pada browser Firefox. Silahkan dicoba dengan Chrome, Opera, Midori, IE8. Semoga bisa bermanfaat untuk rekan-rekan yang kebetulan lagi ngoprek CSS.

Happy Blogging and Keep Coding

Cheerrrss….!!!!

[to_like][/to_like]