Free Licence Pure CSS3 Drop Down Menu Templates

Selasa, 27 Desember 2011

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?

View One of The Demo Download Files

13 Komentar

Achmad Zaelani

Kamis, 09 Februari 2012 02:10 PM

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.

Achmad Zaelani

Kamis, 08 Maret 2012 09:35 PM

Jujur gan saya binggung gan ..
seklainya tampil tulisan doang .. kalo bisa kirim email ke zaelaniachmas21@yahoo.com menditailnya .. maaf ya saya sudah nyusain agan .. :'(

Taufik Nurrohman

Kamis, 08 Maret 2012 11:32 PM

@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

Kamis, 04 Oktober 2012 06:52 PM

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:)