Menu CSS3 Dengan Efect Hover

Menu CSS3 Dengan Efect Hover   - Sudah beberapa hari ini diliputi dilema pada background .. susah nentuin yang pas , biarpun pada akhirnya sedikit merasa lega juga dengan yang sekarang ,memang belum puas tapi ya sudahlah . O..ya pada sedikit kesempatan ini saya akan coba share sebuah menu simple CSS3 dengan hover efect yang lumayan bisa diandalkan untuk merubah penampilan template . Untuk lengkapnya silahkan cek demonya .

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>

Kustomisasi 

  • Tempatkan CSS3 diatas kode ]]></b:skin> atau </style> 
  • HTML bisa ditempatkan dalam kerangka template atau pada Tata letak dan Add Gadget 
Catatan 
ul {
  list-style: none;
}
Tempatkan kode diatas sebelum kode CSS3  apabila pada hasil terdapat list .

45 komentar

PERTAMAX!
mantab kang Ruly :-d
- Salam damai-

demonya kok gak jalan mass

Perasaan jalan ko sob ...

yah jalan kok :D ^_^
- salam damai -

kang ruly chat google plus yuk ^_^ / FB?
banyak yang saya mau tanyakan (mau belajar)
- salam damai -

Tuh kan jalan hehe

kang ruly, fbnya mana??

keren kang, mau nyobain dulu di blog eksperimen ^_^

tuh yang dibawah footer sob ...

boleh tapi chat'y agak sorean ya ..
lagi ada yg namu nihh

monggo silahkan sob .. mudah-mudahan rasa'y gak asin hehe

udah add kang :) [ maaf ngerepotin ]
- salam damai -

ok makasih kang :) saya coba dulu... [ pake perasaan ]

saat di hover.. tulisan ganti tulisan

Sebenarnya itu ada background'y sob .. cuma warna'y saya gak ganti jadi cuma ngasih kesan slide tulisan saja ...

Ora opo-opo yg penting asyk hehe

Hehehehe tema postnya sama hari ini masalah menu, cuma bedanya yang ini css na janggotan (brewok) wkwwkwwkw.... Siipp kang keren... :-bd

haha .. kang adhy bewokan teu kang ??

boleh dicoba gak mas?? ^^

Di bawa pulang juga boleh kang :)

Nanti ta liat lag demo nyai ya kang Rul...soale lagi di kondangan nih....hehe :)

Sipp kang.... menu hari ini mantap....
Ijin comot kanggo koleksi he,,,

boleh dong sob silahkan ....

tuh kata mas bud dibawa juga boleh he

masih sempet buka y mas dikondangan juga ..hebat euy

tong dicomot atuh dibungkus wae ..kayak tai ono dicomot mah heuheu

asa rajin posting menu si amang yeuh :) mangstab lah

Pangalaman kang .. sok hese teh neangan menu teh

wah keren mantab!
- salam damai -
Daengrio[dot]com <-- artikel baru!!!!!

Kunjungan dini hari sobat dah lama nie ga mampir dimari jadi pangling hehehe.... :D
Engkin tiasa dicobian yeuh tutorialna hoyong belajar css susuganan jadi ngerti nya :)

Keren gan menu css nya,ini yg sedang dipikirkan untuk dipasang diblog saya

Demonya gak jalan, mungkin gak ada kakinya kali :D

ko gk ada efek hoverx ya...?

Wiiihh keren sob

Keren Menunya pakai Effects hover yah Kang Ruly, perlu di coba nih
Ijin praktek tar ada kesempatan yah Kang,.. nice deh artikel dan adminya

Nimbrung di artikel Kang Ruly nu sae ah..
Lho Kang Ruly bisa Bahasa Jowo juga he..?

emang kang susah nentuin desain yang pas sesuai dengan salera, kadang bisa berjamjam hanya untuk merubah tampilan...

Benber kata mas Sumberki diatas, bahwa susah nentuin dsain yang pas. Karena desain yang menurut kita cocok untuk kita belum tentu cocok untuk orang lain :)

widih, keren blog kang Ruly....

hah alakadrnya jeng ...

wah makasih bg tutorial nya yaaa
Blogwalking Yuk