Kursus Membuat Web

iklan

Membuat Menu CSS 1

Menu ini dibuat menggunakan HTML 5 dan CSS 3

Gambar Menu
membuat menu css
Lihat Demo ..

Source Code HTML

Buat kode HTML 5 sebagai berikut

Source Code HTML
<!DOCTYPE html>
<html lang="id">
	<head>
		<title>Membuat Menu CSS - Kursus Membuat Web</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="menu.css" media="all">
	</head>
	<body>
		<nav>
			<ul>
				<li><a href="#">about Us</a></li>
				<li><a href="#">services</a></li>
				<li class="terpilih"><a href="#">solutions</a></li>
				<li><a href="#">training</a></li>
				<li><a href="#">support</a></li>
				<li><a href="#">clients</a></li>
				<li><a href="#">contacts</a></li>
			</ul>
		</nav>
	</body>
</html>

Source Code CSS

Selanjutnya buat kode CSS 3 sebagai berikut

Source Code CSS
ul {
  margin:0;
  padding:0;
  list-style:none;
}
li {
  float:left; 
  position:relative; 
  background:url(menu-line.jpg) 0 0 no-repeat; 
  padding-left:1px; 
  text-transform:uppercase; 
  font:11px/15px Arial, Helvetica, sans-serif;
}
li:first-child{ 
  background:none; 
  padding-left:0;
}
li a {
  display:block;
  background:#1f2025; 
  width:135px; 
  padding:19px 0 18px;
  text-align:center; 
  color:#eaeaea; 
  position:relative; 
  overflow:hidden;
  -webkit-transition:all 0.5s ease;
  -moz-transition:all 0.5s ease;
  -o-transition:all 0.5s ease;
  transition:all 0.5s ease;
  text-decoration:none; 
}
li.terpilih a,li a:hover{
  background:#e5e4e2;
  color:#1f2025;
}
Lihat Demo ..

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015