Komposisi
CSS3/.....---CSS3 BREWOK---.....\
nav {
font:700 16px/60px 'Lato', sans-serif;
width:90%;
margin:30px auto 0 auto;
background:#374D61;
overflow:hidden;
-webkit-border-radius:8px;
-moz-border-radius:8px;
-o-border-radius:8px;
border-radius:8px;
}
nav ul {
height:60px;
overflow:hidden;
}
nav ul li {
width:25%;
float:left;
text-align:center;
}
.item-container {
position:relative;
height:120px;
cursor:pointer;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.item-container:hover{
top:-60px;
}
.item-top,
.item-bottom {
height:60px;
position:relative;
}
.item-top {
color:#ffffff;
}
.item-bottom {
background:#4D6377;
color:#ffffff;
}
HTML
<nav>
<ul>
<li>
<div class="item-container">
<div class="item-top">Home</div>
<div class="item-bottom">Home</div>
</div>
</li>
<li>
<div class="item-container">
<div class="item-top">Work</div>
<div class="item-bottom">Work</div>
</div>
</li>
<li>
<div class="item-container">
<div class="item-top">About</div>
<div class="item-bottom">About</div>
</div>
</li>
<li>
<div class="item-container">
<div class="item-top">Contact</div>
<div class="item-bottom">Contact</div>
</div>
</li>
</ul>
</nav>
PERTAMAX!
BalasHapusmantab kang Ruly :-d
- Salam damai-
Keduax hehe
Hapuskang ruly chat google plus yuk ^_^ / FB?
Hapusbanyak yang saya mau tanyakan (mau belajar)
- salam damai -
boleh tapi chat'y agak sorean ya ..
Hapuslagi ada yg namu nihh
Keren gan menu css nya,ini yg sedang dipikirkan untuk dipasang diblog saya
Hapusdemonya kok gak jalan mass
BalasHapusPerasaan jalan ko sob ...
Hapusyah jalan kok :D ^_^
Hapus- salam damai -
Tuh kan jalan hehe
Hapuskang ruly, fbnya mana??
Hapustuh yang dibawah footer sob ...
Hapusudah add kang :) [ maaf ngerepotin ]
Hapus- salam damai -
Ora opo-opo yg penting asyk hehe
HapusDemonya gak jalan, mungkin gak ada kakinya kali :D
HapusNimbrung di artikel Kang Ruly nu sae ah..
HapusLho Kang Ruly bisa Bahasa Jowo juga he..?
keren kang, mau nyobain dulu di blog eksperimen ^_^
BalasHapusmonggo silahkan sob .. mudah-mudahan rasa'y gak asin hehe
Hapusok makasih kang :) saya coba dulu... [ pake perasaan ]
Hapuswkwkwk
Hapussaat di hover.. tulisan ganti tulisan
BalasHapusSebenarnya itu ada background'y sob .. cuma warna'y saya gak ganti jadi cuma ngasih kesan slide tulisan saja ...
HapusHehehehe tema postnya sama hari ini masalah menu, cuma bedanya yang ini css na janggotan (brewok) wkwwkwwkw.... Siipp kang keren... :-bd
BalasHapushaha .. kang adhy bewokan teu kang ??
Hapusboleh dicoba gak mas?? ^^
BalasHapusDi bawa pulang juga boleh kang :)
Hapusboleh dong sob silahkan ....
Hapustuh kata mas bud dibawa juga boleh he
HapusNanti ta liat lag demo nyai ya kang Rul...soale lagi di kondangan nih....hehe :)
BalasHapusmasih sempet buka y mas dikondangan juga ..hebat euy
HapusSipp kang.... menu hari ini mantap....
BalasHapusIjin comot kanggo koleksi he,,,
tong dicomot atuh dibungkus wae ..kayak tai ono dicomot mah heuheu
Hapusasa rajin posting menu si amang yeuh :) mangstab lah
BalasHapusPangalaman kang .. sok hese teh neangan menu teh
Hapuswah keren mantab!
BalasHapus- salam damai -
Daengrio[dot]com <-- artikel baru!!!!!
keren mas,,,
BalasHapuslumayan mas
HapusKunjungan dini hari sobat dah lama nie ga mampir dimari jadi pangling hehehe.... :D
BalasHapusEngkin tiasa dicobian yeuh tutorialna hoyong belajar css susuganan jadi ngerti nya :)
ko gk ada efek hoverx ya...?
BalasHapusWiiihh keren sob
BalasHapusKeren Menunya pakai Effects hover yah Kang Ruly, perlu di coba nih
BalasHapusIjin praktek tar ada kesempatan yah Kang,.. nice deh artikel dan adminya
emang kang susah nentuin desain yang pas sesuai dengan salera, kadang bisa berjamjam hanya untuk merubah tampilan...
BalasHapusBenber kata mas Sumberki diatas, bahwa susah nentuin dsain yang pas. Karena desain yang menurut kita cocok untuk kita belum tentu cocok untuk orang lain :)
BalasHapuswidih, keren blog kang Ruly....
BalasHapushah alakadrnya jeng ...
Hapuswah makasih bg tutorial nya yaaa
BalasHapusBlogwalking Yuk