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>

Komentar

Belantara Indonesia mengatakan…
nah bikin bingung lagi mau ganti gak ya menu horizontalku?..huehuehuheu...ada2 aja brader ni.....
berkunjung kemari setelah sekian lama menghilang ...
makasih sob tutorialnya jadi teringat kembali..
soalnya kadang² lupa juga css buat tab navigasi ...
BLOGINKOM mengatakan…
Wah navigasi yang cukup simple dan menarik....
saya save dulu kodenya....nanti saya coba.
trimakasih untuk share ilmunya.....!!!

Selamat pagi.
Rawins mengatakan…
wah makin dahsyat neh gan...
sayangw aktuku masih saja sempit buat utak atik blog. suatu saat kursusin yah..
Gadget News|Tech Blog mengatakan…
mantab bener sob, punyaku udah ada tapi.. :((
BLOG-SANTAI mengatakan…
nah, kalau di blognya sudah ada bro apa bisa tetap dipasangi yg ini?
Belajar Ngeblog mengatakan…
sepertinya cocok diterapkan di blog ane. kebetulan masih memakai bawaan blogger
Suparyanto mengatakan…
kelihatannya enteng nich navinya...
Belajar CorelDRAW mengatakan…
makin mantaff nich menunya, save dulu sob...
Ladida mengatakan…
wah . , keren banget . ,

makin keren aja bro . , hebat !! salut . ,
rizal mengatakan…
Kren2 nih ttutorial...itulah kelebihan blogger bisa bikin inprov sendiri..
wah keren bngt gan,,
mau aku ganti,,,tapi eman2 menu yang aku buat,,hehee
makash gan
Arga Anggriawan mengatakan…
wooowww mantap nie gan tutornya ijin follow sobat jgn lupa follow balik ya
Horier mengatakan…
hmmm .. pingin-nya sih buat navigasi kaya blog ini sob, asli dari template ya ini
kepingin nih .. hiks..hiks..hikss

Postingan populer dari blog ini

Motion Tween dan Shape Tween

Mengenal Symbol dalam Animasi Flash

Membuat Bayangan Di Dalam Text