Kursus Membuat Web

iklan

Membuat Menu CSS 2

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 class="nav1"><a href="#">Home</a></li>
				<li class="nav2"><a href="#">News</a></li>
				<li class="nav3 terpilih"><a href="#">Services</a></li>
				<li class="nav4"><a href="#">Products</a></li>
				<li class="nav5"><a href="#">Contact</a></li>
			</ul>
		</nav>
	</body>
</html>

Source Code CSS

Selanjutnya buat kode CSS 3 sebagai berikut

Source Code CSS
*{
	margin:0;
	padding:0;
}
nav ul {
	overflow:hidden;
	background-color: #001A2E;
	list-style:none;
}
nav li {
	float:left;
	padding-left:2px;
	border: 1px solid #001527;
}
nav li a {
	display:block;
	height:66px;
	width:198px;
	font-size:24px;
	padding-top:90px;
	text-align:center;
	text-decoration:none;
	text-transform:uppercase;
}
nav li a:hover{
	color: #ffffff;
}
.nav1 {background:url(menu1.gif) center 35px no-repeat}
.nav2 {background:url(menu2.gif) center 30px no-repeat}
.nav3 {background:url(menu3.gif) center 35px no-repeat}
.nav4 {background:url(menu4.gif) center 35px no-repeat}
.nav5 {background:url(menu5.gif) center 35px no-repeat}
.nav1:hover, .nav1.terpilih {background:url(menu1_active.gif) center 31px no-repeat #001527;}
.nav2:hover, .nav2.terpilih {background:url(menu2_active.gif) center 31px no-repeat #001527;}
.nav3:hover, .nav3.terpilih {background:url(menu3_active.gif) center 31px no-repeat #001527;}
.nav4:hover, .nav4.terpilih {background:url(menu4_active.gif) center 31px no-repeat #001527;}
.nav5:hover, .nav5.terpilih {background:url(menu5_active.gif) center 31px no-repeat #001527;}
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