CSS3 Slide Style Navigation Bar

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

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.