Cara Pasang Dark Style LavaLamp Drop Down Menu

Dark Style LavaLamp Drop Down Menu
Setelah membuat menu Versi Dark Style Css Drop Down Vertical, tentunya kurang lengkap tanpa dengan Versi Drop Down. Tampilannya juga tidak kalah dengan menu-menu lainnya, terlepas nanti sobat ingin pakai atau tidak di blog tercinta ada baiknya nyimak dulu atau di simpan dulu karena mungkin suatu saat mau di coba.

D E M O





Cara Pasang
Pertama
SIlahkan menuju Dasbord  lalu klik Template ---> Edit HTML

Silahkan Cari kode ]]></b:skin>

Letakkan Code berikut diatas ]]></b:skin>
/* Flying Css3 menu www.kumpulancara.com*/

.container {
    
    margin: 30px auto;
    width: 957px;}

#nav,#nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;}
#nav {
    background: url('http://2.bp.blogspot.com/-IoZ9tMxpD5s/UNLbVedz72I/AAAAAAAAF-4/0g2hRnNXf1c/s1600/menu_bg.png') no-repeat scroll 0 0 transparent;
    clear: both;
    font-size: 12px;
    height: 58px;
    padding: 0 0 0 9px;
    position: relative;
    width: 957px;}
#nav ul {
    background-color: #222;
    border:1px solid #222;
    border-radius: 0 5px 5px 5px;
    border-width: 0 1px 1px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    left: -9999px;
    overflow: hidden;
    position: absolute;
    top: -9999px;
    z-index: 2;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -moz-transition: -moz-transform 0.1s linear;
    -ms-transition: -ms-transform 0.1s linear;
    -o-transition: -o-transform 0.1s linear;
    -webkit-transition: -webkit-transform 0.1s linear;
    transition: transform 0.1s linear;
}
#nav li {
    background: url('http://4.bp.blogspot.com/-z53mWkvYJ0I/UNLbWUXvTMI/AAAAAAAAF_E/yb9T2LCiNg8/s1600/menu_line.png') no-repeat scroll right 5px transparent;
    float: left;
    position: relative;}
#nav li a {
    color: #FFFFFF;
    display: block;
    float: left;
    font-weight: normal;
    height: 30px;
    padding: 23px 20px 0;
    position: relative;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000000;
}
#nav li:hover > a {
    color: #00B4FF;
}
#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
    background: none repeat scroll 0 0 #121212;
    outline: 0 none;
}
#nav li:hover ul.subs {
    left: 0;
    top: 53px;
    width: 180px;
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);}
#nav ul li {
    background: none;
    width: 100%;}
#nav ul li a {
    float: none;}
#nav ul li:hover > a {
    background-color: #121212;
    color: #00B4FF;}
#lavalamp {
    background: url('http://2.bp.blogspot.com/-LtelbnLnk1g/UNLbUnweBaI/AAAAAAAAF-0/VzvjkJt3wlo/s1600/lavalamp.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 13px;
    position: absolute;
    top: 0px;
    width: 64px;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#nav li:nth-child(1):hover ~ #lavalamp {
    left: 13px;
}
#nav li:nth-child(2):hover ~ #lavalamp {
    left: 90px;
}
#nav li:nth-child(3):hover ~ #lavalamp {
    left: 170px;
}
#nav li:nth-child(4):hover ~ #lavalamp {
    left: 250px;
}
#nav li:nth-child(5):hover ~ #lavalamp {
    left: 330px;
}
#nav li:nth-child(6):hover ~ #lavalamp {
    left: 410px;
}
#nav li:nth-child(7):hover ~ #lavalamp {
    left: 490px;
}
#nav li:nth-child(8):hover ~ #lavalamp {
    left: 565px;
}
Silahkan di Simpan

Kedua
Sobat Sebaiknya pasang Menu ini pada widget di kiri atau kanan Blog supaya terlihat serasi.

Sekarang silahkan menuju Tata Letak + Tambah Gadget + HTML/JavaScript

Masukkanlah Code berikut kedalamnya
<div class="container">
<div class="container">

            <ul id="nav">
                <li><a href="http://www.kumpulancara.com/">Home</a></li>
                <li><a class="hsubs" href="#">Menu 1</a>
                    <ul class="subs">
                        <li><a href="#">Submenu 1</a></li>
                        <li><a href="#">Submenu 2</a></li>
                        <li><a href="#">Submenu 3</a></li>
                        <li><a href="#">Submenu 4</a></li>
                        <li><a href="#">Submenu 5</a></li>
                    </ul>
                </li>
                <li><a class="hsubs" href="#">Menu 2</a>
                    <ul class="subs">
                        <li><a href="#">Submenu 2-1</a></li>
                        <li><a href="#">Submenu 2-2</a></li>
                        <li><a href="#">Submenu 2-3</a></li>
                        <li><a href="#">Submenu 2-4</a></li>
                        <li><a href="#">Submenu 2-5</a></li>
                        <li><a href="#">Submenu 2-6</a></li>
                        <li><a href="#">Submenu 2-7</a></li>
                        <li><a href="#">Submenu 2-8</a></li>
                    </ul>
                </li>
                <li><a class="hsubs" href="#">Menu 3</a>
                    <ul class="subs">
                        <li><a href="#">Submenu 3-1</a></li>
                        <li><a href="#">Submenu 3-2</a></li>
                        <li><a href="#">Submenu 3-3</a></li>
                        <li><a href="#">Submenu 3-4</a></li>
                        <li><a href="#">Submenu 3-5</a></li>
                    </ul>
                </li>
                <li><a href="#">Menu 4</a></li>
                <li><a href="#">Menu 5</a></li>
                <li><a href="#">Menu 6</a></li>
                <li><a href="http://www.kumpulancara.com/">Back</a></li>
                <div id="lavalamp"></div>
            </ul>

        </div>

Silahhkan Ganti Code # dengan Link Blog anda dan Menu List dengan Nama Menunya
Cara Pasang Dark Style LavaLamp Drop Down Menu 10 out of 10 ratings.

13 comments:

  1. Makasih buat artikelnya gan.. sangat bagus dan berkualitas sekali gan...

    ReplyDelete
  2. lebih bagus ya setelah ditambah dengan CSS ini.. izin nyoba mas

    ReplyDelete
  3. mkasih yaa ats infonya.
    sngat brmnfaat gaan..
    slam skses. :)

    ReplyDelete
  4. sangat bermanfaat sekali infonya mkasih bnyak

    ReplyDelete
  5. kk kok ga keluar sih menu drop downnya nih blog ku ramazord.blogspot.com

    ReplyDelete
  6. @Muhamad Ramadhan Rahmat kemungkinan ada kesalahan peletakan code gan,...Trimakasih

    ReplyDelete
  7. Terimakasih atas infonya, artikelnya cukup menambah wawasan baru saya dan relatif mudah untuk difahami. teruslah berkreasi, anda yang terbaik.

    Kunjungi saya di tabung pemadam api

    kata terakhir salam dari saya
    moga hari ini menyenangkan,
    Sukses selalu!

    ReplyDelete
  8. kunjungan siang setelah saya membaca artikelnya bermnafaat sekali makasih banyak saya tunggu kunjungan balik nya

    ReplyDelete
  9. KEren sob tapi kok gak lurus ya lava lampnya ?
    tolong cek di http://url-ar.blogspot.com/

    ReplyDelete
  10. Artikel ini yang saya cari... saya ingin memilah-milah artikel yang saya posting, karena postingan saya masih menjadi satu..
    Makasih postingannya gan... salam kenal

    ReplyDelete

Terimakasih Kunjungan Anda - Silahkan Komentar- Salam Blogger Mohon Jangan Spam

Powered by Blogger.