Mecha versi 2.6.3 sudah dirilis!

Free Licence Pure CSS3 Drop Down Menu Templates

Free download a set of CSS3 Drop Down Menus with free license. This menu can be used for personal or commercial use without attribution. Simply don't add a "naughty attribution". That's all :D

But because it uses CSS3, please make sure that you have to consider about browser supports.

All of the menu effect are come from CSS Transition. ie-support-html5.js required to ensure that Internet Explorer can read the <nav> tag.

Example menu

Sorry, I don't have much time to make all the demo page because it's so boring I think. Moreover each of them look similar right?

View One of The Demo Download Files

13 Komentar

Achmad Zaelani

gan sori saya ganggu klo cara masang menu nafigasi kya gini gmna di blog ..
mohon penjelasanya ya ..
dan jgn lupa mampir ke zone-informations.co.cc ya ..

Taufik Nurrohman

@Achmad Zaelani: Coba buka file HTMLnya (yang ada di folder Item kalau tidak salah hehe...) menggunakan Notepad. Di situ terdapat tag <style> di dalam tag <head> dan kerangka menunya di dalam <body>. Ikuti saja tempat meletakkannya. Salin semua CSS itu kemudian letakkan di atas </head>, potong kerangkanya kemudian letakkan di mana saja di dalam tag <body> sesuai keinginan.

Achmad Zaelani

Jujur gan saya binggung gan ..
seklainya tampil tulisan doang .. kalo bisa kirim email ke [email protected] menditailnya .. maaf ya saya sudah nyusain agan .. :'(

Taufik Nurrohman

@Achmad Zaelani Salin kode ini, taruh di atas </head>:

<style type='text/css'>
nav{
font:bold 16px Calibri,Arial,Sans-Serif;
}
nav *{margin:0 0 0 0;padding:0 0 0 0;list-style:none;}
nav ul{
background:#0A8603;
background:-webkit-linear-gradient(top, #0A8603, #1F6A1C);
background:-moz-linear-gradient(top, #0A8603, #1F6A1C);
background:-ms-linear-gradient(top, #0A8603, #1F6A1C);
background:-o-linear-gradient(top, #0A8603, #1F6A1C);
background:linear-gradient(top, #0A8603, #1F6A1C);
height:40px;
-webkit-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4), inset 0px 2px 0px rgba(255,255,255,0.2), 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4), inset 0px 2px 0px rgba(255,255,255,0.2), 0px 1px 3px rgba(0,0,0,0.4);
box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4), inset 0px 2px 0px rgba(255,255,255,0.2), 0px 1px 3px rgba(0,0,0,0.4);
}
nav li{float:left;display:inline;}
...
...
...
nav li.sub li.sub > a:after{
content:"";
width:0px;
height:0px;
border-width:4px;
border-style:solid;
border-color:transparent transparent transparent #F1B215;
position:absolute;
top:16px;
right:10px;
}
<style>

Lalu salin kode ini, dan taruh di tempat manapun sesuai keinginan:

<nav>
<ul>
<li><a href='#'>Beranda</a></li>
<li><a href='#'>Profil</a></li>
<li class='sub'><a href='#'>Jurnal</a>
<ul>
<li><a href='#'>2000</a></li>
<li><a href='#'>2001</a></li>
<li class='sub'><a href='#'>2002</a>
<ul>
<li><a href='#'>21 April</a></li>
<li><a href='#'>22 April</a></li>
<li class='sub'><a href='#'>23 April</a>
<ul>
<li><a href='#'>Senin</a></li>
<li><a href='#'>Selasa</a></li>
<li><a href='#'>Rabu</a></li>
<li><a href='#'>Kamis</a></li>
</ul>
</li>
<li><a href='#'>24 April</a></li>
<li><a href='#'>25 April</a></li>
</ul>
</li>
<li><a href='#'>2003</a></li>
<li><a href='#'>2004</a></li>
</ul>
</li>
<li><a href='#'>Komentar</a></li>
<li><a href='#'>Kontak</a></li>
</ul>
</nav>

Sudah, begitu saja. Di dalam file HTML, kalau dibuka menggunakan Notepad atau Notepad++ akan tampil kode-kode itu. Tinggal menyesuaikan saja.

Unknown

Mas, mungkin ini g ada hubungannya, tapi saya masih penasaran kenapa di banyak postingan di blog ini, alamat url nya tidak berakhiran ".html" saja ?
contoh di postingan ini, ada tambahan "#.UG13lBce6E5"...

Masih newbie, 0:)

Mas Sugeng

Izin make ya Om

Anonim

Oh navigasi mas sugeng dari sini... xixixixi

Unknown

saya berusaha memahami dulu ya om.

Anonim

KERENNN BANGETTTT.... kakak ada konten posting sama sidebarnya gak hehehe

Anonim

wah ternayata keren2 disini,, ijin untuk mencobanya sob,,

Harmansyah

menu yang ini bagus pak, saya pengen pake yang warna ijo, tapi gak ada scriptnya. file downloadnya error.

Taufik Nurrohman

Maaf pak belum sempat mengedit tautannya. Seluruh proyek Google Code Saya seingat Saya sudah Saya pindahkan semua ke GitHub, coba dicari.

Komentar telah ditutup.