Cara Pasang Dark Style LavaLamp Drop Down Menu ~ Kumpulan Tips & Triks Seputar Internet

Sunday, January 22, 2017

Cara Pasang Dark Style LavaLamp Drop Down Menu

12:47 AM / by Eris WiFi / with No comments /

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

Letakkan Code berikut diatas ]]>

/* 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguqQx8D-YVvyo6Y4P1x4a6jDQ4TLPTlwYYz1GEKvYsAQcLL5AJA7Rh_SnjSwmvHtu2ZdVGVEza5baHmL45_QknLvQ1buRRhO_LBi4VJcqUbKqMH7AU9M01j0M5VsZlt0I2QZznKAlB-7E/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLzufrVJoSVouSUsEMdPM0-bqCBqYLmQvaO1bDtIV0BPci5xibL9djJoofGLbjHxS-s6R-n1hev2aCeoIb7OppHAVOHvIx0VPc8bkWrIiCOjpDMm8l1B0GgjVLkA7ID-uzIunId_52eY/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTtIKFMWvrWA9WRnd0W1WhkD34bXnoHcl9mPNUeVhs4-4kUD1JgXvaElMjbjS7q1ae1YNPOgzlFfluI2eAKqGb47m8gCttJ8YmCF6xLahHTf9olZWA9zb3j7tJgeZd0SkzpXQSVhVctmY/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

                                    Home
                  Menu 1                                                Submenu 1
                          Submenu 2
                          Submenu 3
                          Submenu 4
                          Submenu 5
                      
                  
                  Menu 2                                                Submenu 2-1
                          Submenu 2-2
                          Submenu 2-3
                          Submenu 2-4
                          Submenu 2-5
                          Submenu 2-6
                          Submenu 2-7
                          Submenu 2-8
                      
                  
                  Menu 3                                                Submenu 3-1
                          Submenu 3-2
                          Submenu 3-3
                          Submenu 3-4
                          Submenu 3-5
                      
                  
                  Menu 4
                  Menu 5
                  Menu 6
                  Back

Silahhkan Ganti Code # dengan Link Blog anda dan Menu List dengan Nama Menunya

reff : http://www.kumpulancara.com/2013/01/cara-pasang-dark-style-lavalamp-drop.html