-Himee--

Find, Share, And Love

Jumat, 31 Juli 2015

Anime List Complete

  7/31/2015 02:11:00 AM    

sorry.. :3
nothing to found in here..
still under maintenance..

thanks for be patient.. ;)

Rabu, 29 Juli 2015

Cara Membuat Dropdown Menu 3 Level + Efek Animasi CSS3

  7/29/2015 07:03:00 AM    

Yap, pada kamis kali ini saya akan sharing tutorial membuat multilevel dropdown menu dengan efek animasi CSS3 keren. Bagi yang belum tahu, Dropdown menu adalah menu yang ketika disentuh dengan mouse (hover), akan keluar sub-menu-nya. Multilevel dropdown menu berarti menu yang sub-menunya memiliki sub menu lagi lebih dari 2 tingkat (banyak). Jadi, dropdown menu 3 level yang akan dibahas disini termasuk multi level dropdown menu.
3 level dropdown menu
Dropdown menu sangat bermanfaat untuk membuat taksonomi menu secara terstruktur. Biasanya digunakan jika menu pada website merupakan link kategori yang memiliki beberapa sub kategori. Dengan adanya dropdown menu, navigasi website menjadi mudah dan user-friendly.
So, bagaimana cara membuatnya? yuk simak bareng-bareng.

Kode HTML

<div class=”menu-wrapper”>
<ul class=”menu-horizontal”>
<li><a href=”#”>Menu 1</a></li>
<li><a href=”#”>Menu 2</a></li>
<li><a href=”#”>Menu 3 <span class=”arrow”></span></a>
<ul class=”submenu level-1″>
<li><a href=”#”>Level 1</a></li>
<li><a href=”#”>Level 1 <span class=”arrow”></span></a>
<ul class=”submenu level-2″>
<li><a href=”#”>Level 2</a></li>
<li><a href=”#”>Level 2  <span class=”arrow”></span></a>
<ul class=”submenu level-3″>
<li><a href=”#”>Level 3</a></li>
<li><a href=”#”>Level 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Kode CSS

.menu-wrapper {
margin:10px auto;
position: relative;
width:700px;
}
.menu-wrapper ul{
margin:0;
padding:0;
background-color: #333;
}
ul.menu-horizontal {
width:100%;
position: relative;
z-index:999;
}
ul.menu-horizontal li {
list-style: none;
}
/*Style menu horizontal*/
ul.menu-horizontal >li{
display: inline-block;
}
ul.menu-horizontal li a{
position: relative;
display: block;
padding:10px 20px;
text-decoration: none;
color:#eee;
}
ul.menu-horizontal li a:hover {
background-color:#DD3D36;
-webkit-transition:all 0.5s ease-in-out;
}
/*Style Tanda panah pada menu yang mempunyai sub menu*/
ul.menu-horizontal >li >a >span.arrow {
width:0;
height: 0;
border:5px solid transparent;
border-top:7px solid #eee;
position: absolute;
right: 5px;
top:17px;
}
/*Style tanda panah pada sub menu level 1 dan level 2*/
ul.menu-horizontal li ul li span.arrow {
width:0;
height: 0;
border:5px solid transparent;
border-left:7px solid #eee;
position: absolute;
right: 5px;
top:17px;
}
/*Menyembunyikan sub menu ketika tidak dihover*/
ul.submenu {
position: absolute;
display: none;
}ul.submenu li {
position: relative;
}
/*untuk menciptakan efek animasi ketika dihover*/
@-webkit-keyframes mantul-vertikal {
0%{top: -300px;opacity: 0;}
50%{top: 120%;opacity: 1;}
75%{top: 80%;opacity: 1;}
100%{opacity: 1;top:100%;}
}
@keyframes mantul-vertikal {
0%{top: -300px;opacity: 0;}
50%{top: 120%;opacity: 1;}
75%{top: 80%;opacity: 1;}
100%{opacity: 1;top:100%;}
}
@-webkit-keyframes mantul-horizontal {
0%{left:300%;opacity: 0}
50%{left: 80%;opacity: 1;}
75%{left: 110%;opacity: 1;}
100%{left:100%;opacity: 1}
}
@keyframes mantul-horizontal {
0%{left:300%;opacity: 0}
50%{left: 80%;opacity: 1;}
75%{left: 110%;opacity: 1;}
100%{left:100%;opacity: 1}
}
/*Menampilkan sub menu level 1 ketika menu di hover*/
ul.menu-horizontal li:hover ul.level-1 {
min-width: 150px;
display: block;
top:100%;
-webkit-animation:mantul-vertikal 1s;
animation:mantul-vertikal 1s;
}
/*Menampilkan sub menu level 1 ketika menu di hover*/
ul.menu-horizontal li ul li:hover ul.level-2 {
min-width: 150px;
display: block;
-webkit-animation:mantul-horizontal 1s;
animation:mantul-horizontal 1s;
top:0;
left:100%;
}
/*Menampilkan sub menu level 1 ketika menu di hover*/
ul.menu-horizontal li ul li ul li:hover ul.level-3 {
min-width: 150px;
display: block;
-webkit-animation:mantul-horizontal 1s;
animation:mantul-horizontal 1s;
top:0;
left:100%;
}
Tidak seperti biasanya, untuk tutorial yang satu ini saya tidak akan menjelaskan kode-kodenya karena pasti akan sangat rumit dan panjang. Sebagai gantinya, saya menjelaskannya secara langsung dengan comment di dalam kode. Sementara, untuk hasilnya anda bisa lihat demo dibawah ini :
Sementara untuk link downloadnya ada disini : http://goo.gl/bwTBnL
Bagaimana? tertarik.. jangan lupa langsung praktekkan. Jika bermanfaat, bagikan ke teman dengan share ke media sosial. Jangan lupa datang lagi hari senin dan kamis depan karena akan ada artikel perdana lainnya yang menunggu anda!.
Sekian, Semoga bermanfaat..

  No Comments

Selasa, 28 Juli 2015

Custon Rom Maxwest Orbit X50 for Mito A150 By Mpip Gandring

  7/28/2015 11:56:00 PM    

Custom Rom Maxwest Orbit X50 for Mito A150 by Mpip Gandring

Rom ini dibuat oleh mastah Mpip Gandring, Gw disini cuma ingin membantu share aja

Tutorial Instal Rom
  • Pastikan Mitsy pocket ente udah keadaan Root & Instal CWM/TWRP
  • Jangan lupa backup Stockrom Mitsy pocket pakai CWM/TWRP (buat jaga2 kalau hh bootlop)
  • Backup Aplikasi & Datanya pakai Titanium Backup, gunanya untuk mengembalikan aplikasi2 yg hilang setelah instal cusrom
  • Download Custom rom Maxwest,   LINKDownload===> Download
  • Taruh di Memory Card (Diluar Folder)

Langkah selanjutnya Instalasi Cusrom
  1. Masuk ke CWM/TWRP (Matikan HH, Tekan Pover + Volume Up Secara bersamaan sampai muncul logo Mito)
  2. Wipe Data & Factory Reset
  3. Wipe Cache & Cache Delvik
  4. Instal Zip from SD Card
  5. Chose Zip From SD Card
  6. Tunggu sampai proses selesai (enaknya sambil ngopi dulu) hehe
  7. Selesai
Proses Akhir
  • Instal Titanium Backup dari Playstore
  • Restore deh Aplikasi2 yg kalian backup tadi (BBM, WeChat, FB, DLL) gak repot kan???

Thanks To
  • Mastah Mpip Gandring
  • Admin Mitsy Pocket
  • Member Mitsy Pocket
  • Rifqi Muslimin
DWYOR

  No Comments

Langganan: Komentar (Atom)