Breaking News
random

Membuat Menu Fixed Bar Dengan Logo Hover

di
Saya tengok diluar sana bumi sedang diguyur hujan cukup lebat dan di atas meja kamarku mengepul asap dari secangkir kopi arabica dengan campuran sepotong kayu manis yang membuat suasana sore ini semakin meyakinkan lalu sesekali terdengar sabetan melodi dari tangan dingin Paul Gilbert  membuat aku semakin semangat untuk berbagi sebuah tutorial
dalam membuat Menu Fixed Bar Dengan Logo Hover " wkwkwk aku tertawa sendiri dengan sambutan kata pada postingan kali ini " super lebaaaaaaayyy .. tapi gak apa-apa hanya sekedar impropisasi saja untuk memberi tahu kalian dalam membuat postingan haruslah dengan suasana yang benar-benar enak biar dapat pahalanya. walah malah ngalor ngidul nih .. mending lihat dulu demonya gih .... 


Komposisi 

CSS
header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  border-bottom: 1px solid #e3e3e8;
}
#logo {
  float: left;
  font-size: 3em;
  margin: 0;
  padding: .4em;
  text-decoration: none;
  color: #333;
  border-right: 1px solid #e3e3e8;
  transition: .5s all;
}
#logo:hover {
  color: #fafafa;
  background-color: #333;
}
nav {
  float: left;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 2.2em 2em;
}
nav ul li {
  display: inline;
  padding: 0 .4em;
}
nav ul li a {
  color: #333;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.6em;
  padding-bottom: 1.3em;
  transition: .5s color;
}
nav ul li a:hover {
  border-bottom: 3px solid #333;
}
#current {
  color: #ff4629;
  border-bottom: 3px solid #333;
}
#fb:hover {
  color: #3b5998;
}
#twitter:hover {
  color: #00acee;
}
HTML 
<header>
   <a id="logo" href="#">Action-Blog</a>
  <nav>
    <ul>
      <li><a href="#" id="current">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#" id="fb">Facebook</a></li>
      <li><a href="#" id="twitter">Twitter</a></li>
    </ul>
  </nav>
</header> 
Saya tidak akan menjelaskan secara detail tentang langkah-langkah dalam menerapkanya tapi lihatlah warna-warna pada kode CSS dan HTML yang harus diperhatikan untuk langkah kreatifitas selanjutnya.

Artikel Menarik Lainnya :