Modifikasi Header Dengan Menu

Pada postingan kali ini cukup memuaskan karena otak bekerja maksimal hehe .. Pada satu situasi keberadaan header saya fikir menjadi hal penting dalam menciptakan/menentukan langkah lanjutan untuk sebuah desain/modifikasi template sebelum ke struktur yang lainnya dan kali ini saya akan membahas tentang modifikasi header dengan konsep simple yang didalamnya tersemat sebuah menu pada posisi right dengan menghasilkan efect sliding yang cukup atraktif , seperti pada demo dibawah ini : 

Full demo bisa dilihat disini 

SEE DEMO 

CSS  

.header {
  height: 100px;
  background: #236770;
  border-bottom: solid 4px#A7AAAA;
}
.title {
  color: #fff;
  font-size: 40px;
  margin: 20px;
}
.desc {
  color: #999;
  margin: 20px;
}
.nav {
  position: absolute;
  top: 0;
  right: 0;
}
.nav a {
  display: block;
  width: 200px;
  height: 25px;
  padding-left: 20px;
  color: #A7AAAA;
  border-left: solid 5px #A7AAAA;
  transition: all 300ms;
  overflow: hidden;
}
.nav a:hover {
  background: #fff;
  border-left: solid 5px #999;
}
.nav a {
  text-decoration: none;
}
.first {
  transition: all 300ms;
}
.second {
  color: #222;
  margin-left: 200px;
}
.third {
  color: #222;
  margin-left: 165px;
}
.fourth {
  color: #222;
  margin-left: 172px;
}
.fifth {
  color: #222;
  margin-left: 186px;
}
.nav a:hover .first {
  margin-left: -240px;
}

HTML

<div class="header">
<span class="title">Action Blog</span>
<br />
<span class="desc">Blogger Sharing & Keep Smile</span>
<div class="nav">
<a href="#"><span class="first">Home</span>
<span class="second">No Place Like...</span></a>
<a href="#"><span class="first">Experience</span>
<span class="third">Cool Stuff!</span></a>
<a href="#"><span class="first">Education</span>
<span class="fourth">...and Extra Credit!</span></a>
<a href="#"><span class="first">Contact</span>
<span class="fifth">What's up!?</span></a>
</div>
</div>

Saya tidak akan menjelaskan cara dalam menerapkan modifikasi ini karena pada perkembangannya brada sudah sangat  memahami CSS dan HTML serta posisinya. Artinya ini hanya kode dasar untuk brada kembangkan lebih inovatif dan kreatif lagi . 

Kalau tidak suka dengan efect sliding perhatikan CSS yang diblock , karena disana letak slidingnya. 

Resource : Basic Ty Strong