Menu Vertikal Super Ajaib

• Home
• About
• Clients
• Contact Us

S

ilahkan arahkan Cursor ke arah Menu Vertikal di samping postingan ini lihat Effect nya,kerenkan..?Jika sobat juga ingin membuat Menu Vertikal Super Ajaib Tersebut silahkan sobat ikuti tutorial ini sampai selesai ..

1. Anggap sobat sudah ada di dasboard
2. Pilih template ==Edit Html ==gunakan ctrl + F cari kode ]]></b:skin> pasang kode berikut tepat di atas kode ]]></b:skin>


.mainNav {
    float: left;
    transform: perspective(500px);
    transform-style: preserve-3d;
}
.mainNav ul {
      list-style: none;
      padding: 0;
}
.mainNav a {
    background-color:green;
    background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)),
                      linear-gradient(-72deg, hsla(0,0%,100%,.05) 50%, transparent 50%);
    backface-visibility: hidden;
    box-shadow: inset 0 0 .25em hsla(0,0%,0%,.1),
                inset 0 0 1.5em hsla(0,0%,0%,.25);
    color: #322;
    display: block;
    font: bold 1em/3 sans-serif;
    padding: 0 1.5em;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.25);
    transition: .5s;
    transform-origin: 50% 0;
    transform-style: preserve-3d;
    width: 6em;
}
.mainNav a:after {
    background-color: red;
    background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)),
                      linear-gradient(-72deg, hsla(0,0%,100%,.05) 50%, transparent 50%),
                      linear-gradient(hsla(0,0%,0%,.25), hsla(0,0%,0%,.25));
    box-shadow: inset 0 0 .25em hsla(0,0%,0%,.2),
                inset 0 0 1.5em hsla(0,0%,0%,.4);
    bottom: 0;
    color: #fff;
    content: attr(data-title);
    left: 100%;
    line-height: 3;
    position: absolute;
    top: 0;
    transform: rotateY(90deg);
    transform-origin: 0 0;
    width: 100%;
}
.mainNav a:before {
    background-color: inherit;
    background-image: linear-gradient(hsla(0,0%,100%,.07), hsla(0,0%,0%,.07)),
                      linear-gradient(hsla(0,0%,0%,.5), hsla(0,0%,0%,.5));
    bottom: 0;
    content: '';
    height: 9em;
    left: 100%;
    position: absolute;
    top: 0;
    transform-origin: 0 0;
    width: 100%;
}
.mainNav li:nth-child(-n+2) a:before {
    transform: rotateX(-90deg) translateX(-9em) translateZ(3em);
}
.mainNav li:nth-child(n+3) a:before {
    transform: rotateX(-90deg) translateX(-9em);
}
.mainNav li:hover a {
    transform: rotateY(-90deg) translateX(-4.5em) translateZ(4.5em);
    z-index: 10;
}​

3. Lalu Save
Untuk XHTML nya silahkan sobat taruh di bagian sidebar dengan caraPilih Tata Letak ==Tambah Gadget === Pilih Html Java script lalu masukkan kode di bawah ini:

<nav class="mainNav">
    <ul>
        <li><a href="#" data-title="Home">Home</a></li>
        <li><a href="#" data-title="About">About</a></li>
        <li><a href="#" data-title="Clients">Clients</a></li>
        <li><a href="#" data-title="Contact Us">Contact Us</a></li>
    </ul>
</nav>

Jika Sobat ada kesulitan silahkan ajukan pertanyaan di form komentar

Judul Artikel :Menu Vertikal Super Ajaib

Terima Kasih Sobat sudah membaca Artikel saya Tentang Menu Vertikal Super Ajaib Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih