Rabu, 10 November 2010

Single Menu Pure CSS With Hover Effect

Sudah tidak tahu juga nih berapa postingan mengenai menu sudah Beben kasih :D (search saja deh yah) Menu yang ini cocok bagi sobat yang suka dengan minimalis dalam tampilan blognya. Hanya dengan mencantumkan satu link, dan ketika disorot akan muncul semua link yg ada disana ;)) Biasa sob hasil bloglang secara ganteng kalem ;)) ;) Belom kebayang kali yah kayak apa menu ini :D Baiklah, Beben akan kasih screenshot dolo biar terlihat jelas: Satu disorot cursor jadi banyak :P Ooopppsss...menu ini fixed posisi sob, jadi walau di scroll akan tetap keberadaannya :D


Kode CSS

#nav {
z-index: 10;
text-align: left;
_display:none;
position:fixed;
top:0;
right:30px;
font-family:Verdana;
color:#cbcbcb;
font-size:12px;
background-color:#a0f;
cursor:default;
}
#nav h3 {
font-weight:normal;
font-size:100%;
text-align:right;
padding:10px 10px 0;
margin:0;
height:25px;
color:#000;
}
#nav:hover h3 {
color:#fff;
}
#nav div.nav-section {
display: none;
padding: 4px;
color:#fff;
}
#nav:hover div.nav-section {
display: block;
}
#nav ul {
display:none;
background-color:#f9f9f9;
border:1px solid #ccc;
border-top-width:0;
padding:4px 8px;
margin:0;
}
#nav ul + ul {
border-bottom-width:3px;
}
#nav:hover ul {
display:block;
}
#nav li {
margin:3px 0;
list-style:none;
}
#nav a {
color:#556680;
text-decoration:none;
}
#nav a:hover {
color:#a00;
text-decoration:underline;
}
#nav span.nav-langs {
color: #888;
font-size: 7pt;
}
#nav span.nav-langs > a {
color: #888;
}

Kode HTML

Letakan didalam tag <body> Jangan sampai bentrok dengan tag yang lainnya!!!

Select Text

Karena ID yg digunakan disini yaitu ID kebanyakan menu yaitu NAV! Maka jika tetap mau memakai menu ini harap diganti dengan ID yg lain supaya tidak terjadi clash!!!

Click Here for Get CSS Code

Resource by: http://dmitrysoshnikov.com/

Tidak ada komentar:

Posting Komentar