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.
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?
13 Comments:
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 ..
@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.
Jujur gan saya binggung gan ..
seklainya tampil tulisan doang .. kalo bisa kirim email ke zaelaniachmas21@yahoo.com menditailnya .. maaf ya saya sudah nyusain agan .. :'(
@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.
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:)
Izin make ya Om
saya berusaha memahami dulu ya om.
Itu dari widget AddThis!
KERENNN BANGETTTT.... kakak ada konten posting sama sidebarnya gak hehehe
Oh navigasi mas sugeng dari sini... xixixixi
wah ternayata keren2 disini,, ijin untuk mencobanya sob,,
menu yang ini bagus pak, saya pengen pake yang warna ijo, tapi gak ada scriptnya. file downloadnya error.
Maaf pak belum sempat mengedit tautannya. Seluruh proyek Google Code Saya seingat Saya sudah Saya pindahkan semua ke GitHub, coba dicari.
Post a Comment
<< Home