Advertise

Horizontal Navigasi Dengan Tab Pointer No Image

Untuk kali ini saya coba melengkapi atau menambahkan sedikit koleksi menu navigasi horizontal untuk blogger, yang mungkin ingin merubah tampilan menu navigasi di blognya. Untuk demonya bisa lihat gambar dibawah atau klik link demo yang ada di bawah.

navigasi horizontal tab pointer
Demo Navigasi

Untuk pemasangannya navigasi horizontal saya rasa blogger sudah paham jadi silahkan lihat kodenya di bawah ini.

Kode CSS (Cascading Style Sheet)
.menu {
padding:0; margin:0; list-style-type:none; white-space:nowrap; }
.menu li {
float:left; min-width:100px; }
.menu a {
position:relative; display:block; text-decoration:none; min-width:100px; float:left; }
* html .menu a { width:100px; }
.menu a span {
display:block; color:#fff; background:#7cbc0a; border:1px solid #fff;
border-width:2px 1px; text-align:center; padding:4px 16px; cursor:pointer; }
* html .menu a span { width:100px; cursor:hand; w\idth:66px; }
.menu a b { display:block; border-bottom:2px solid #06a; }
.menu a em { display:none; }
.menu a:hover { background:#fff; }
.menu a:hover span { color:#fff; background:#08c; }
.menu a:hover em {
display:block; overflow:hidden; border:6px solid #06a; border-color:#06a #fff;
border-width:6px 6px 0 6px; position:absolute; left:50%; margin-left:-6px; }

Kode HTML
<ul class="menu">
<li><a href="#"><b><span>Menu Satu</span></b><em></em></a></li>
<li><a href="#"><b><span>Menu kedua</span></b><em></em></a></li>
<li><a href="#"><b><span>Menu ketiga</span></b><em></em></a></li>
<li><a href="#"><b><span>Menu Empat</span></b><em></em></a></li>
<li><a href="#"><b><span>Menu Lima</span></b><em></em></a></li>
</ul>

15 komentar:

  1. nah bikin bingung lagi mau ganti gak ya menu horizontalku?..huehuehuheu...ada2 aja brader ni.....

    BalasHapus
  2. berkunjung kemari setelah sekian lama menghilang ...
    makasih sob tutorialnya jadi teringat kembali..
    soalnya kadang² lupa juga css buat tab navigasi ...

    BalasHapus
  3. Wah navigasi yang cukup simple dan menarik....
    saya save dulu kodenya....nanti saya coba.
    trimakasih untuk share ilmunya.....!!!

    Selamat pagi.

    BalasHapus
  4. wah makin dahsyat neh gan...
    sayangw aktuku masih saja sempit buat utak atik blog. suatu saat kursusin yah..

    BalasHapus
  5. mantab bener sob, punyaku udah ada tapi.. :((

    BalasHapus
  6. nah, kalau di blognya sudah ada bro apa bisa tetap dipasangi yg ini?

    BalasHapus
  7. sepertinya cocok diterapkan di blog ane. kebetulan masih memakai bawaan blogger

    BalasHapus
  8. kelihatannya enteng nich navinya...

    BalasHapus
  9. makin mantaff nich menunya, save dulu sob...

    BalasHapus
  10. wah . , keren banget . ,

    makin keren aja bro . , hebat !! salut . ,

    BalasHapus
  11. Kren2 nih ttutorial...itulah kelebihan blogger bisa bikin inprov sendiri..

    BalasHapus
  12. wah keren bngt gan,,
    mau aku ganti,,,tapi eman2 menu yang aku buat,,hehee
    makash gan

    BalasHapus
  13. wooowww mantap nie gan tutornya ijin follow sobat jgn lupa follow balik ya

    BalasHapus
  14. hmmm .. pingin-nya sih buat navigasi kaya blog ini sob, asli dari template ya ini
    kepingin nih .. hiks..hiks..hikss

    BalasHapus