Perjumpaan kali ini kita akan membahas atau update tutorial tentang Navigation Menus dan untuk tema tutorial kali ini saya beri nama CSS3 Slide Style Navigation Bar.

Ini adalah Navigation Menus yang menarik untuk blogger Navigation Menus ini memiliki efek yang terbilang tampil beda dari kebanyakan menu-menu lainnya. Keistimewaan lagi tentang menu ini adalah, menu ini ringan untuk di gunakan, dan tidak mempengaruhi kecepatan atau pemuatan blog Anda, karna menu ini bekerja dengan CSS3, tanpa menggunakan bantuan dari jQuery sama sekali.

Untuk lebih jelasnya tentang Navigation Menus ini atau efek  yang di gunakan oleh menu ini silahkan Anda lihat demonya untuk memperjelasnya.


Lihat Demo


Untuk membuatan menu tersebut kita hanya perlu menggunakan bantuan CSS, dan untuk lebih jelasnya kode apa saja untuk membuatanya silahkan Anda perhatikan kode-kode di bawah ini, dan silahkan rubah sendiri jika ada beberapa yang Anda rasa harus di rubah.


The CSS ver CSS3



OW {
        max-width: 900px !important;
            margin: 100px auto;
            margin-top: 20px;
        }
        OW ul {
            list-style: none;
            overflow: hidden;
        }
        OW li a {
            background: #000;
            border-right: 1px solid #fff;
            color: #fff;
            display: block;
            float: left;
            font: 400 13px 'Montserrat Alternates', Arial;
            padding: 10px;
            text-align: center;
            text-decoration: none;
            text-transform: uppercase;
            width: 80px;
            -webkit-transition: transform 1s;
            -moz-transition: transform 1s;
        }

        OW#nojquery li a:hover, .rotate {
            -moz-animation: animrotate 2s; 
            -webkit-animation: animrotate 2s; 
            background: #222;
        }
        @-moz-keyframes animrotate {
            100% {background: blue;-moz-transform: perspective( 200px ) rotateY( 360deg );}
        }

        @-webkit-keyframes animrotate {
            100% {background: blue;-webkit-transform: perspective( 200px ) rotateY( 360deg );}
 }



The HTML/JavaScript



<OW id="nojquery">
   <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Portfolio</a></li>
     <li><a href="#">Services</a></li>
     <li><a href="#">Blog</a></li>
     <li><a href="#">Contact</a></li>
   </ul>
</OW> 


Dari Meja Editor!
Saya rasa cukup sekian untuk kali ini, Saya harap Anda menyukai Artikel kali ini, jika ada pertanyaan tentang artikel di atas silahkan lemparkan pertanyaan Anda di kotak komentar Saya akan berusaha secepat mungkin untuk membalas dan membantu Anda.

Poskan Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top