Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

CSS Animasi Menu Dropdown Blogger

CSS Animasi Menu Dropdown Blogger CSS Animasi Menu Dropdown Blogger – pada tutorial ini setelah lama tidak membahas tentang menu navigasi blogger maka sekarang sedikit akan saya jelaskan tentang CSS animasi dropdown menu yang terpasang pada template Darkforyou dan Bluesforyou. Untuk membuat animasi menu dropdown ini tidak memerlukan adanya jquery dan disinilah letak kehebatan fitur CSS transition untuk membuat animasi CSS yang berjalan secara halus dengan mengatur efek pada transition-delay. Berikut lebih jelasnya untuk memasang CSS Animasi Menu Dropdown Blogger ke dalam blog.

1. Login ke akun blogger lalu masuk ke Edit HTML template.
2. Lalu taruh kode CSS berikut ini di atas kode ]]></b:skin>
.menu,.menu ul{list-style:none;margin:0;padding:0}
.menu{background:#252525;height:35px;width:100%;border-bottom:2px solid #181818;border-top:2px solid #303030}
.menu li{background:#252525}
.menu &gt; li{display:block;float:left;position:relative;box-shadow:2px 0 0 0 rgba(51,51,51,1)}
.menu a{border-left:3px solid rgba(0,0,0,0);color:gray;display:block;font-family:Electrolize,sans-serif;font-size:18px;line-height:35px;text-decoration:none;text-transform:uppercase;padding:0 25px}
.menu a:first-letter{color:#0091d6}
.menu li:hover{background-color:#1c1c1c}
.menu li:hover &gt; a{border-left:3px solid #0091d6;color:#fff}
.submenu{left:0;max-height:0;position:absolute;top:100%;z-index:0;perspective:400px;width:200%}
.submenu li{opacity:0;transform:rotateY(90deg);transition:opacity .4s, transform .5s;border-bottom:2px solid #181818;border-top:2px solid #303030}
.menu .submenu li:hover a{border-left:3px solid #454545;color:#fff}
.menu &gt; li:hover .submenu,.menu &gt; li:focus .submenu{max-height:2000px;z-index:10}
.menu &gt; li:hover .submenu li,.menu &gt; li:focus .submenu li{opacity:1;transform:none}
.menu li:hover .submenu li:nth-child(1){transition-delay:0s}
.menu li:hover .submenu li:nth-child(2){transition-delay:50ms}
.menu li:hover .submenu li:nth-child(3){transition-delay:100ms}
.menu li:hover .submenu li:nth-child(4){transition-delay:150ms}
.menu li:hover .submenu li:nth-child(5){transition-delay:200ms}
.menu li:hover .submenu li:nth-child(6){transition-delay:250ms}
.menu li:hover .submenu li:nth-child(7){transition-delay:300ms}
.menu li:hover .submenu li:nth-child(8){transition-delay:350ms}
.submenu li:nth-child(1){transition-delay:350ms}
.submenu li:nth-child(2){transition-delay:300ms}
.submenu li:nth-child(3){transition-delay:250ms}
.submenu li:nth-child(4){transition-delay:200ms}
.submenu li:nth-child(5){transition-delay:150ms}
.submenu li:nth-child(6){transition-delay:100ms}
.submenu li:nth-child(7){transition-delay:50ms}
.submenu li:nth-child(8){transition-delay:0s}
.menu &gt; li:nth-child(1) {border-right:2px solid #111}
.menu &gt; li:nth-child(2),.menu &gt; li:nth-child(3),.menu &gt; li:nth-child(4),.menu &gt; li:nth-child(5),.menu &gt; li:nth-child(6),.menu &gt; li:nth-child(7),.menu &gt; li:nth-child(8){border-right:2px solid #111;border-left:2px solid #333}
3. Selanjutnya untuk menampilkan menu ini dibawah header, jika menggunakan struktur template HTML5 maka cari kode </header> lalu taruh kode berikut ini tepat di bawahnya. Cara lain, bisa juga dengan menaruh kode berikut tepat di atas kode <div id='main-wrapper'> atau <article id='main-wrapper'>
<nav>
<ul class='menu'>
    <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
    <li><a href='#'>Menu 1</a>
        <ul class='submenu'>
            <li><a href='#'>Submenu a</a></li>
            <li><a href='#'>Submenu b</a></li>
            <li><a href='#'>Submenu c</a></li>
            <li><a href='#'>Submenu d</a></li>
            <li><a href='#'>Submenu e</a></li>
            <li><a href='#'>Submenu f</a></li>
            <li><a href='#'>Submenu g</a></li>
            <li><a href='#'>Submenu h</a></li>
        </ul>
    </li>
    <li class='active'><a href='#'>Menu 2</a>
        <ul class='submenu'>
            <li><a href='#'>Submenu a</a></li>
            <li><a href='#'>Submenu b</a></li>
            <li><a href='#'>Submenu c</a></li>
            <li><a href='#'>Submenu d</a></li>
            <li><a href='#'>Submenu e</a></li>
            <li><a href='#'>Submenu f</a></li>
            <li><a href='#'>Submenu g</a></li>
            <li><a href='#'>Submenu h</a></li>
        </ul>
    </li>
    <li><a href='#'>Menu 3</a>
        <ul class='submenu'>
            <li><a href='#'>Submenu a</a></li>
            <li><a href='#'>Submenu b</a></li>
            <li><a href='#'>Submenu c</a></li>
            <li><a href='#'>Submenu d</a></li>
            <li><a href='#'>Submenu e</a></li>
            <li><a href='#'>Submenu f</a></li>
            <li><a href='#'>Submenu g</a></li>
            <li><a href='#'>Submenu h</a></li>
        </ul>
    </li>
    <li><a href='#'>Menu 4</a></li>
    <li><a href='#'>Menu 5</a></li>
</ul>
</nav>
4. Langkah terakhir Simpan template.

Demikian tutorial sederhana untuk membuat CSS Animasi Menu Dropdown Blogger. Harapan saya setelah anda mengenal satu per satu elemen kode pada template maka anda bisa berkreasi sendiri untuk membuat tampilan blog seperti keinginan kreasi masing-masing.

Berlangganan artikel via email

40 Response to "CSS Animasi Menu Dropdown Blogger"

Pertamax dulu deh, dari pada keburu diambil orang haha...
Keren mas Andes css animasi menu dropdownnya, sip banget :)

Balas

belum sempat mengoptimalkan css transition nih mas, hehe
makasih buat kode hebatnya ya :D

Balas

Mas share juga donk cara bikin post homepage yang ada di template Darkforyou :)

Balas

kodenya emang hebat mas, saya pake template mas yang bluesforyou dan itu keren sekali mas, hehe

Balas

banyak yah mas andes untuk animasi dropdown.. bagaimana kita bisa kreasi :)

Balas

Hahaha saya tadinya mau post menu yg kayak gini mas .. eh keduluan sama yang punya template'y ....

Balas

keren mas, saya ijin nyimak aja

Balas

kalau templateku, langkah yang ke 3 aku taruh saja di HTML dibawah gambar header, praktis dan mudah menggantinya. terimakasih atas sharingnya.

Balas

saya g begitu paham dgn yg beginian cman tahu dikit2..btw menu dropdownya keren mas.

Balas

kalau edit-eedit template, Tika ampun deeehh :(

Balas

siapa cepat dia dapat kang hehe...

Balas

wah padahal menu drop down itu sudah bagus banget, apalagi di kasih animasi, pasti bakalan tambah keren mas menu nya :)

Balas

Selamat Malam Mas Andes. Maaf Kang Mas saya baru berkunjung lagi
Habis bongkar pasang Kerja bakti menghilangkar Error valid html 5 pada
Setiap Halaman posting. Artikel ini saya perlu banget nih Mas buat mengganti
Posisi navigasi atas pada account sosial saya. yang tidak valid html 5
Menu CSS Animation ini pasti deh buatan Mas Andes sudah valid W3C

Balas

pasti keren mbak soalnya ada animasinya juga, silahkan dicoba biar tambah keren blognya hehe :)

Balas

Kunjungan Pagi Mas..

Balas

mas anthonie dulu aja yang coba, nanti kalau berhasil, saya juga ikutan coba pasang di blog saya menu drop down nya ^^

Balas

sepertinya menarik mas untuk di pelajari lebih jauh

Balas

selamat malam mas andes...rasanya sudah lama tidak mampir kebognya mas andes ini hehe...ko ga muncul di dasbor saya ya postingan ini ??

WS ikut menimak dulu mas :)

Balas

kalau soal udat - edit buka - buka daleman templat saya nyerah deh mas

Balas

Apakah menu ini berbentuk horizontal gan??? apa vertikal?

Balas

bagus mas menu nya, apalagi pake animasi.
menambah daya tarik blog.

Balas

menu dropdown ini seperti yang dipake dalam templatenya mang yono nih :)

Balas

siapa dulu donk yang bikin kang hehe...

Balas

Kunjungan Pagi Mas....
Met berakhir pekan :)

Balas

Selamat malam Mas Andes datang lagi di artikelcss menu animasi DD
Baca lagi nih Mas agar saya lebih paham untuk saya pasang di blog saya
Terima kasih atasscript bermanfaat ini salam silaturahmi :)

Balas

Ketemu lagi nih sama Kang Saud Karrysta

Balas

artinya yang cepat yang kalah yah ,,,,ehhh salah,,,,MENANG dech

Balas

ehhh ada tutor baru nih rupanya,,,,jadi kepengennnnn

Balas

tumben nih mas Andes belum ada postingan yang baru, baru sibuk yah mas :)

Balas

Kemana sang author nih ko gak nongol-nongol seeehhhh hehe

Balas

wah sepertinya mas andes sedang berlibur di penghunjung tahun nich hehe :)

Balas

mas andes lagi liburan nih :) ga ada postingan baru :D

Balas

Assalamu'alaykum
Bagaimana kabarnya? Lama tak main kesini :)


http://aufalatifah.blogspot.com/2013/12/4th-day-japan-snow-and-wind.html

Balas

mas gmn cara isi menunya

Balas

makasih info x gan

Balas

keren mas,...tapi boleh gk minta tutor menu dropdown yang kyak diatas di blog mas-andes.blogspot.com?? thanks..

Balas

Maaf OTT..
konversi codenya error mas :D

Balas

terima kasih bro panduannya bagus sekali,mantap,dan mudah di pahami,salam sukses untuk anda

Balas

share trus ilmunya gan, thanks ya.

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "CSS Animasi Menu Dropdown Blogger" ini bermanfaat, share ke jejaring sosial.
Konversi Kode