Membuat Menu Lavalamp Animasi dengan CSS3 di blog

Cek Semua No HP yang Lupa di Semua Provider
Created : Admin TG | Label : Trik Internet | sumber : TG

Anda mungkin telah melihat menu animasi. Banyak menu animasi yang kita jumpai menggunakan Lavalamp (Plugin Jquery). Tapi hari ini kita akan menu baru yang akan memiliki animasi seperti Lavalamp tetapi tanpa javascript.

Animasi akan berlangsung dengan bantuan CSS3 Transisi. Menu kami akan bekerja pada warna hitam. Di hover itu menjadi lebih gelap dan panah muncul di atas teks menu. Dan anda juga bisa lihat demonya di bawah ini

DEMO

Dan untuk langkah langkahnya cuman ada 2 silahkan anda ikuti di bawah ini

1. Step 1 : Silahkan anda Copy script di bawah ini dan paste di atas [ ]]> ] / [ </style> ] >> Klik Simpan / Save
   

   #abt-nav,#abt-nav ul {
       list-style: none outside none;
       margin: 0;
       padding: 0;
   }
   #abt-nav {
       background: url('http://www.script-tutorials.com/demos/249/css/menu_bg.png') no-repeat scroll 0 0 transparent;
       clear: both;
       font-size: 12px;
       height: 58px;
       padding: 0 0 0 9px;
       position: relative;
       width: 100%;
   }
   #abt-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: scaleY(0);
       -ms-transform: scaleY(0);
       -o-transform: scaleY(0);
       -webkit-transform: scaleY(0);
       transform: scaleY(0);
   
       -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;
   }
   #abt-nav li {
       background: url('http://www.script-tutorials.com/demos/249/css/menu_line.png') no-repeat scroll right 5px transparent;
       float: left;
       position: relative;
   }
   #abt-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;
   }
   #abt-nav li:hover > a {
       color: #00B4FF;
   }
   #abt-nav li:hover, #abt-nav a:focus, #abt-nav a:hover, #abt-nav a:active {
       background: none repeat scroll 0 0 #121212;
       outline: 0 none;
   }
   #abt-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);
   }
   #abt-nav ul li {
       background: none;
       width: 100%;
   }
   #abt-nav ul li a {
       float: none;
   }
   #abt-nav ul li:hover > a {
       background-color: #121212;
       color: #00B4FF;
   }
   #lavalamp {
       background: url('http://www.script-tutorials.com/demos/249/css/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;
   }
   #abt-nav li:nth-of-type(1):hover ~ #lavalamp {
       left: 13px;
   }
   #abt-nav li:nth-of-type(2):hover ~ #lavalamp {
       left: 90px;
   }
   #abt-nav li:nth-of-type(3):hover ~ #lavalamp {
       left: 170px;
   }
   #abt-nav li:nth-of-type(4):hover ~ #lavalamp {
       left: 250px;
   }
   #abt-nav li:nth-of-type(5):hover ~ #lavalamp {
       left: 330px;
   }
   #abt-nav li:nth-of-type(6):hover ~ #lavalamp {
       left: 410px;
   }
   #abt-nav li:nth-of-type(7):hover ~ #lavalamp {
       left: 490px;
   }
   #abt-nav li:nth-of-type(8):hover ~ #lavalamp {
       left: 565px;
   }
   

   
   
2. Step 2: Layout >> Add Widget >> HTML/JavaScript. Copy Kode Di bawah ini dan Paste Di HTML / Javascript yang tadi
   

   <ul id="abt-nav">
       <li><a href="http://www.allbloggertricks.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.allbloggertricks.com/">Back</a></li>
       <div id="lavalamp"></div>
   </ul>
   
   

http://triksgratis.blogspot.com

Posted by Unknown, Published at 00:26 and have 1 komentar