Cara Membuat Menu Navigasi Simpel CSS3

Banyak sekali style navigasi yang bisa kita temukan di Internet. Namun jika Anda lebih menyukai style atau gaya yang sederhana Anda bisa menemukannya disini yaitu menu navigasi seherhana dengan properti CSS3.

Demo   CODE

Ada pepatah mengungkapkan didalam sebuah kesederhanaan akan terlihat sebuah keindahan, pepatah itu itu pas sekali dengan navigasi satu ini ; cukup sederhana namun memiliki daya tarik. Fitur pada navigasi ini adalah effect hover yang akan muncuk ketika kursor di arahkan pada link. Sobat,,, jika ingin tampilannya lebih menarik Anda bisa memodifikasi. Yuuk sobat kita langsung menuju tutorialnya, ikuti setiap lahap - tahapnya ya.....

1. Login ke akun Bloger
2. Pilih Template, lalu klik Edit HTML
3. Selanjutnya dengan menggunakan Ctrl+F Anda cari kode ]]></b:skin>
4. Jika sudah menemukan, Anda copy kode dibawah ini dan pastekan diatasnya atau sebelumnya.

/*Simpel Menu Navigasi CSS3*/
.skew-menu {
font-family: Helvetica Neue, Helvetica, sans-serif;
text-align: center;
margin-top: 9em;
}
.skew-menu ul {
display: inline-block;
margin: 0;
padding: 0;
list-style: none;
transform: skew(-25deg);
}
.skew-menu ul li {
background: #fff;
float: left;
border-right: 1px solid #eee;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
text-transform: uppercase;
color: #555;
font-weight: bolder;
transition: all 0.3s linear;
}
.skew-menu ul li:first-child {
border-radius: 7px 0 0 7px;
}
.skew-menu ul li:last-child {
border-right: none;
border-radius: 0 7px 7px 0;
}
.skew-menu ul li:hover {
background: #eee;
color: #ff6347;
}
.skew-menu ul li a {
display: block;
padding: 1em 2em;
color: inherit;
text-decoration: none;
transform: skew(25deg);
}

5. Selanjutnya Anda cari kode <div class="content-wrapper"> , lalu salin kode dibawah ini dan pasangkan di atasnya.

<nav class="skew-menu">
<ul>
<li><a href="#">Shoes</a></li>
<li><a href="#">Sandals</a></li>
<li><a href="#">Shirts</a></li>
<li><a href="#">Jackets</a></li>
</ul>
</nav>

6. Simpan Template dan lihat hasilnya .

Memang cukup sederhana navigasinya tapi menarik bukan, sudah dulu ya semoga bermanfaat!

Bagikan Artikel ini