Membuat Menu Responsive Ala Google

Saya yakin Anda sudah familiar dengan desain google, karena anda setiap saat menggunakan internet pasti akan membuka google. Oke sekarang kita akan coba membuat desain ala google khususnya pada menu. Menu google akan muncul setelah Anda melakukan pencarian, diantara menunya yaitu ada Web, Images, Videos dan News. Ciri khas pada menu google yaitu ada semacam garis di bawah menunya.

Buat dulu file htmlnya

<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>Menu Ala Google</title>
</head>
<body>
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>Web</span></a></li>
<li><a href='#'><span>Images</span></a></li>
<li><a href='#'><span>News</span></a></li>
<li class='last'><a href='#'><span>Videos</span></a></li>
</ul>
</div>
</body>
<html>

Selanjutnya buat file css nya

#cssmenu {
  background: #ffffff;
  width: auto;
}
#cssmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1;
  display: block;
  zoom: 1;
}
#cssmenu ul:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#cssmenu ul li {
  display: inline-block;
  padding: 0;
  margin: 0;
}
#cssmenu.align-right ul li {
  float: right;
}
#cssmenu.align-center ul {
  text-align: center;
}
#cssmenu ul li a {
  color: #aaa;
  text-decoration: none;
  display: block;
  padding: 15px 25px;
  font-family:'Calibri';
  font-weight: 300;
  font-size: 14px;
  position: relative;
  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;
}
#cssmenu ul li a:hover {
  color: #f96e5b;
}
#cssmenu ul li a:hover:before {
  width: 100%;
}
#cssmenu ul li a:after {
  content: "";
  display: block;
  position: absolute;
  right: -3px;
  top: 19px;
  height: 6px;
  width: 6px;
  background: #ffffff;
  opacity: .5;
}
#cssmenu ul li a:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #f96e5b;
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
  display: none;
}
#cssmenu ul li.active a {
  color: #f96e5b;
}
#cssmenu ul li.active a:before {
  width: 100%;
}
#cssmenu.align-right li.last > a:after,
#cssmenu.align-right li:last-child > a:after {
  display: block;
}
#cssmenu.align-right li:first-child a:after {
  display: none;
}

Jenis huruf menggunakan calibri dan ketebalan 300 font-family:'Calibri'; font-weight: 300; dan warna #aaa. Sedangkan css untuk garis bawah tiap menu yaitu :

#cssmenu ul li a:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #f96e5b;
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}

Hasilnya adalah sebagai berikut, walaupun tidak mirip - mirip amat sih, silahkan di bandingkan.

Membuat Menu Responsive Ala Google

Posting Komentar

Categories

Recent Comments

Popular Posts