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 zaelaniachmas21@yahoo.com 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.