Modifikasi Header Dengan Menu
.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