Membuat Slider Menu dengan CSS3

Kamis, 14 Mei 2015

Halo semuanya Kali ini saya akan membagikan sedikit tutorial sederhana tentang CSS3 yaitu Membuat Slider Menu Sederhana Dengan CSS3 Tanpa 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. Check this out gan!.

Langkah 1

Buka editor kesayangan rekan-rekan, berhubung saya lagi pakai Linux jadinya saya gunakan gedit. Kita akan menyusun kode-kode .htmlnya 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>

Langkah 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;
}

Langkah 3

Karena saya memisahkan file css dengan file .htmlnya, 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 versi lama. Silahkan dicoba dengan Firefox, Chrome, Opera, Midori, IE versi terbaru. Semoga bisa bermanfaat untuk rekan-rekan yang kebetulan lagi ngoprek CSS. Sampai jumpa di tutorial selanjutnya :).

HASIL AKHIR

Labels: Design Web

Thanks for reading Membuat Slider Menu dengan CSS3. Please share...!