Kursus Membuat Web

iklan

Membuat Menu CSS 4

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>
		<div class="social">
			<ul>
				<li><a href="#" class="social-google"></a></li>
				<li><a href="#" class="social-facebook"></a></li>
				<li><a href="#" class="social-twitter"></a></li>
				<li><a href="#" class="social-linkedin"></a></li>
				<li><a href="#" class="social-forrst"></a></li>
				<li><a href="#" class="social-dribbble"></a></li>
			</ul>
		</div>
	</body>
</html>

Source Code CSS

Selanjutnya buat kode CSS 3 sebagai berikut

Source Code CSS
body{
  margin:0px;
  padding:0px;
}
.social{
  width:auto;
  height:46px;
}
.social ul{
  width:auto;
  height:46px;
  padding:0px;
  margin:0px;
}
.social ul li{
  width:46px;
  float:left;
  display:inline-block;
  height:46px;
  border: 1px solid #d5d5d5;
  list-style-type: none;
  background-color:white;
  margin-left:-1px;
}
.social ul li a{
  border:0px;
}
.social-google{
  width:46px;
  display:block;
  height:46px;
  background-image: url(social-slider.png);
  background-repeat: no-repeat;
  background-position: -7px -1px;
}
.social-google:hover{
  width:46px;
  display:block;
  height:46px;
  background-image: url(social-slider.png);
  background-repeat: no-repeat;
  background-position: -7px -47px;
}
.social-facebook{
  width:46px;
  display:block;
  height:46px;
  background-image: url(social-slider.png);
  background-repeat: no-repeat;
  background-position: -53px -2px;
}
.social-facebook:hover{
  width:46px;
  display:block;
  height:46px;
  background-image: url(social-slider.png);
  background-repeat: no-repeat;
  background-position: -53px -48px;
}
.social-twitter{
  width:46px;
  display:block;
  height:46px;
  background-image: url(social-slider.png);
  background-repeat: no-repeat;
  background-position: -102px -2px;
}
.social-twitter:hover{
  width:46px;
  display:block;
  height:46px;
  background-image: url(social-slider.png);
  background-repeat: no-repeat;
  background-position: -102px -48px;
}
.social-linkedin{
  width:46px;
  display:block;
  height:46px;
  background-image: url(social-slider.png);
  background-repeat: no-repeat;
  background-position: -147px -2px;
}
.social-linkedin:hover{
  width:46px;
  display:block;
  height:46px;
  background-image: url(social-slider.png);
  background-repeat: no-repeat;
  background-position: -147px -48px;
}
.social-forrst{
  width:46px;
  display:block;
  height:46px;
  background-image: url(social-slider.png);
  background-repeat: no-repeat;
  background-position: -194px -2px;
}
.social-forrst:hover{
  width:46px;
  display:block;
  height:46px;
  background-image: url(social-slider.png);
  background-repeat: no-repeat;
  background-position: -194px -48px;
}
.social-dribbble{
  width:46px;
  display:block;
  height:46px;
  background-image: url(social-slider.png);
  background-repeat: no-repeat;
  background-position: -242px -2px;
}
.social-dribbble:hover{
  width:46px;
  display:block;
  height:46px;
  background-image: url(social-slider.png);
  background-repeat: no-repeat;
  background-position: -242px -48px;
}
.social ul li a{
  transition:background .3s;
  -moz-transition:background .3s; /* Firefox 4 */
  -webkit-transition:background .3s; /* Safari and Chrome */
  -o-transition:background .3s; /* Opera */
}
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