DTE :]

Tuesday, December 27, 2011

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

Labels: ,

posted by Taufik Nurrohman at December 27, 2011

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 ..

    By Blogger Achmad Zaelani, at Thursday, February 9, 2012 at 2:10:00 PM GMT+7  

  • @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.

    By Blogger Taufik Nurrohman, at Monday, February 13, 2012 at 10:15:00 AM GMT+7  

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

    By Blogger Achmad Zaelani, at Thursday, March 8, 2012 at 9:35:00 PM GMT+7  

  • @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.

    By Blogger Taufik Nurrohman, at Thursday, March 8, 2012 at 11:32:00 PM GMT+7  

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

    By Blogger Unknown, at Thursday, October 4, 2012 at 6:52:00 PM GMT+7  

  • Izin make ya Om

    By Blogger Mas Sugeng, at Friday, October 19, 2012 at 8:29:00 PM GMT+7  

  • saya berusaha memahami dulu ya om.

    By Blogger Wisata Belanja, at Sunday, October 21, 2012 at 7:44:00 PM GMT+7  

  • Itu dari widget AddThis!

    By Blogger Taufik Nurrohman, at Monday, October 22, 2012 at 8:49:00 PM GMT+7  

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

    By Anonymous Anonymous, at Saturday, February 16, 2013 at 3:33:00 PM GMT+7  

  • Oh navigasi mas sugeng dari sini... xixixixi

    By Anonymous Anonymous, at Saturday, February 16, 2013 at 3:34:00 PM GMT+7  

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

    By Anonymous Anonymous, at Saturday, March 30, 2013 at 3:47:00 PM GMT+7  

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

    By Blogger Harmansyah, at Sunday, March 26, 2017 at 1:26:00 PM GMT+7  

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

    By Blogger Taufik Nurrohman, at Tuesday, April 11, 2017 at 11:12:00 AM GMT+7  

Post a Comment



<< Home