Cara Membuat Slider Menu Menggunakan CSS3

Menu merupakan bagian penting dari sebuah website, pada menu berisi link-link untuk mengarahkan user atau pengguna ke halaman tertentu, agar pengunjung dapat lebih mudah dalam menentukan sebuah kategori atau mencari sebuah informasi, jika website tidak memiliki menu maka user atau pengunjung kesulitan untuk menentukan kategori yang ingin dicari. Cara kerja dari menu slider yang kita buat kali ini yaitu, ketika kursor kita arahkan ke menu tersebut maka menu tersebut akan bergeser, Slider menu yang kita buat kali ini juga dapat membuat website kita lebih menarik, biar tidak penasaran kita langsung saja masuk kestudy casenya tentang Cara Membuat Slider Menu Menggunakan CSS3.

Cara Membuat Slider Menu Menggunakan CSS3 langkah pertama kita akan membuat file indexnya terlebih dahulu, dan selanjutnya kita akan membuat file CSS untuk mengatur style dari menu tersebut, untuk membuat file indexnya silahkan teman-teman buka text editornya dan silahkan teman-teman simpan script yang terdapat dibawah ini dengan nama index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Cara Membuat Slider Menu Menggunakan CSS3</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
	<div class="container">
		<menu>
			<ul>
			    <li><a href="#">Home</a></li>
			    <li><a href="#">Galery</a></li>
			    <li><a href="#">News</a></li>
			    <li><a href="#">Video</a></li>
			    <li><a href="#">Contact</a></li>
			    <li><a href="#">Setting</a></li>
			</ul>
		</menu>
	</div>
</body>
</html>

Setelah kita membuat file indexnya berikutnya kita akan membuat file CSSnya yang berfungsi untuk mengatur style dari menu yang akan kita buat, dan silahkan teman-teman simpan script yang terdapat dibawah ini dengan nama style.css

body {font-family:Arial; font-size: 15px;}

menu{text-align: center;}

menu ul li
{
-webkit-transition-duration: 800ms;
width: 150px;
border:1px solid #F2F2F2;
display: block;
}

menu ul li:hover {margin-left: 40px;}

menu ul li a
{
background-color: #050505;color: #afafaf;padding: 15px;
-webkit-transition-duration: 800ms, 800ms, 800ms, 800ms;
}

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

menu ul li a:hover {background-color: #A9250D; color: #D8DFEA;padding-left: 30px;}

Berikutnya silahkan di save semua filenya, jika kita jalankan pada browser maka akan terlihat hasilnya seperti dibawah ini.

Bagaimana teman-teman cukup mudah bukan Cara Membuat Slider Menu Menggunakan CSS3-nya, sekian dulu tutorial saya kali ini tentang Cara Membuat Slider Menu Menggunakan CSS3,

Semoga bermanfaat

Terimakasih

Cara Membuat Slider Menu Menggunakan CSS3

Kategori