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 

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

57 komentar

Rajin posting, top bgt deh :-bd

udh diterapin, tapi belum di modif itu ini :D
trims

Keren kang, memaksimalkan daerah header |o| =p*

Keren kang! :-bd
Posting juga atuh yang google nexus menu :)

Keliatan keren headernya....

hehehe cemerlang.. sipp juga kang sebelah kanan header dikasih menu.
his thanks

eh dicabut lg :D tema yang saya pake kurang pas untuk yang satu ini, ntar kl ganti tema saya coba lg deh, trims :-d

hehe .. kalau gak sesuai jagan dipaksain non ...

ya gitu deh kang .. soalnya kalau header kan peranan penting dalam sesain !!

siip nanti dicoba kang

lumayan mas mahfid ...

Ya difikir-fikir cukup keren mas ...

Belum akhir pekan gan, belum saatnya edit template. :)

Masih lama dung ....

behh,, kalau gini kan jadi rame tampilan blognya kang.. apa lagi efek menunya yg super kilat :-bd

Bener sob .. jadi makin variatif !!

Oke lah kalo begitu soalnya saya udah nyoba gak berhasil Kang :D

Info Cemerlang Kang Ruly, memanfaat kan daerah Header kreatif
Dan inovatif deh Kang Ruly ini jadi Nambah Kasep deh kalau begini
Tapi di cobi heula yeuh bari ngarampa da teu di pasian terang palih mana
Nempat keuna da Maklum Kang Abi mah enggal keneh di blog teh sae artikel na :)

Ikut nyimak disini deh bari ngadepong da katingalina teh Endah menu na :-)

Simple'y kayak gini ya kang http://jsfiddle.net/RulyNakula/DVR5n/show/ cuma ya itu untuk box'y harus bentrok sama validasi CSS3

Hehe alah eta kopina kadieuken atuh kang sa seruput mah

Benar mas masalah modifikasi di si mbah banyak cuma tinggal masalah kreatif'y saja .. percanten ka kang saud mah

Yang baru soal header,,,jadi kabita euyy hehe,,,top banget dah selalu ada yang baru disini,,,,,,,

keep posted before you sick :D

Sok atuh digentos kang headerna hehe

yes yes no no

silaturrahmi pagi dapat tutorial yang bermanfaat...
terima kasih gan... keep posting... :-bd

Jadi lebih bervariasi sob, keren...

terimakasih kembali sob ...

agak rumit juga ya untuk modifikasi header. terpaksa deh header blog saya masih bawaan dari sana nya. Thanks master atas tutorialnya :)

Tinggal teliti dan maunya aja sob ...

Header itu sama dengan mastaka,,,,kalau didak ada mastana ihhh seremmm atuh hihi

keheula can mantep kang Ruly,,,soalna pernah salah malah amuradul tea geuningan hehe,

edun pokonmah kang,,,,, kreatif pisan beda yeuh artikel jigana seep kopi aya kana 5 gelasna soalna mantap

Kade mastaka nya sanes babatok wkwkwkwk

Ken wae amburadul mah nupenting dicobian meh to panasaran kang heehe

apalan wae yeuh .. lain 5, 6 malah mah hehe

tutorial yang sederhana, namun sangat mudah dipahami...luarbiasa :-)

sederhana saya suka artikelnya .. bermanfaat sekali

Lumayan mas hehe

Terimakasih sob ...

itu js yg mana kang? soalnya yg saya dapat ada 3 dari sumbernya langsung...

dari sumber js'y gak jalan sob .. saya dapet js dari codrops

bener kang.. pantas saya heran, kok bsa2nya punya akang ngefek sdngkan saya tidak :s
oke,, makasih infona kang Ruly.. :-d

waah ilmu baru lagi nih :) thx kaangg

thx kembali sob ...

thx artikelnya kang :) bermanfaat sekali & templatenya bagus ..

salam hangat dari #DIAKUIN

keren mas, tapi blog saya rasanya kurang pas untuk menerapkan ini hehehe.... sudah padat hehehe... :)

Oks kembali salam super hehe

Ya sih kalau di lihat dah sangat sempurna jeng....

ikut nyimak deh gan.. ane masih blm pham mslh begituan :D

Sama saya juga masih newbie banget sob ...

Seperti blog saya nie Bang. Di bagian header ada menunya. Keren menurun saya pribadi. hehe

Apakah ini mas hendrik ??

Tutorial bagus mas Rully. Saya selalu kesulitan untuk mengatur menu navigasi sesuai kategori. Izin belajar ya mas..?