Pure CSS3 Minimalistic Navigation Menu

CSS3Tuts+ -Anda mungkin pernah mendengar, animasi CSS3 adalah alat yang ampuh, yang memungkinkan Anda untuk membuat animasi yang berjalan tanpa perlu menerapkan script tambahan untuk halaman. Apa yang lebih baik, dalam generasi berikutnya dari browser kita akan memiliki alat bahkan lebih kuat, termasuk transformasi 3D (sudah ada di Safari).

Tapi apa bedanya bagi kita hari ini? Pada saat ini hanya tiga browser memberikan Anda kemampuan untuk menghidupkan properti CSS - Chrome, Safari dan Opera, yang bersama-sama mengambil hanya sebagian kecil dari pasar browser. Firefox diharapkan segera bergabung dengan klub, dan dengan rilis mendatang dari IE9, tiba-tiba masuk akal untuk memulai memanfaatkan teknik ini.

DEMO Download

HTML

Jadi hari ini kita membuat sesuatu yang praktis - sebuah CSS3 sederhana animasi menu navigasi, yang menurunkan anggun di browser lama dan masa depan-terbukti untuk bekerja dengan generasi berikutnya dari browser.
Menu ini disusun sebagai daftar unordered. Ini adalah struktur yang paling cocok untuk menu, karena menyediakan cara mudah untuk gaya link menu dan semantik benar.

<ul id="navigationMenu">
    <li>
     <a class="home" href="#">
            <span>Home</span>
        </a>
    </li>

    <li>
     <a class="about" href="#">
            <span>About</span>
        </a>
    </li>

    <li>
      <a class="services" href="#">
            <span>Services</span>
         </a>
    </li>

    <li>
     <a class="portfolio" href="#">
            <span>Portfolio</span>
        </a>
    </li>

    <li>
     <a class="contact" href="#">
            <span>Contact us</span>
        </a>
    </li>
</ul>

Di dalam setiap " </li> " memiliki hyperlink dengan rentang di dalamnya. Secara default ini rentang yang tersembunyi, dan hanya ditampilkan bila Anda mengarahkan mouse pada link tersebut. Setiap link memiliki nama kelas yang unik, yang digunakan untuk memberikan unique background dan style rentang batin, karena anda akan lihat sebentar lagi.

CSS

Setelah kita memiliki struktur dasar, kita sekarang dapat pindah ke CSS3 menciptakan efek mewah dan gaya. Ini bekerja bahkan pada browser, yang tidak mendukung animasi transisi CSS3 (semua browser kecuali Chrome, Safari dan Opera) meskipun dengan glitter kurang. Menu ini bahkan dapat digunakan dengan sempurna di browser setua IE6.

styles.css – Part 1

*{
 /* A universal CSS reset */
 margin:0;
 padding:0;
}

body{
 font-size:14px;
 color:#666;
 background:#111 no-repeat;

 /* CSS3 Radial Gradients */
 background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
 background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

 font-family:Arial, Helvetica, sans-serif;
}

#navigationMenu li{
 list-style:none;
 height:39px;
 padding:2px;
 width:40px;
}

Untuk style dari background, pertama kali saya memberikan warna background, yang bertindak sebagai fallback, dan kemudian menambahkan dua CSS3 gradien radial (untuk Firefox dan Chrome / Safari hormat) sebagai gambar latar belakang. Jika browser pengunjung tidak mendukung gradien, itu hanya akan mengabaikan aturan dan pergi dengan warna latar belakang polos.

Anda dapat lihat dalam style, bahwa sebagian besar aturan didahului oleh <ul id="navigationMenu"> dari daftar unordered - #navigationMenu. Hal ini untuk mencegah tabrakan dengan seluruh style halaman Anda, jika Anda memasukkan menu ke situs Anda.

styles.css – Part 2

#navigationMenu span{
 /* Container properties */
 width:0;
 left:38px;
 padding:0;
 position:absolute;
 overflow:hidden;

 /* Text properties */
 font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
 font-size:18px;
 font-weight:bold;
 letter-spacing:0.6px;
 white-space:nowrap;
 line-height:39px;

 /* CSS3 Transition: */
 -webkit-transition: 0.25s;

 /* Future proofing (these do not work yet): */
 -moz-transition: 0.25s;
 transition: 0.25s;
}

#navigationMenu a{
 /* The background sprite: */
 background:url('img/navigation.jpg') no-repeat;

 height:39px;
 width:38px;
 display:block;
 position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
 text-decoration:none;

 /* CSS outer glow with the box-shadow property */
 -moz-box-shadow:0 0 5px #9ddff5;
 -webkit-box-shadow:0 0 5px #9ddff5;
 box-shadow:0 0 5px #9ddff5;
}

Properti transisi CSS3 adalah satu yang benar-benar kuat dalam pembuatan efek pada menu ini. Ini memungkinkan Anda untuk menghidupkan perubahan yang terjadi pada elemen ketika sifat pseudo berlaku. Sebagai contoh di sini, ketika pengguna bergerak mouse mereka melalui link navigasi,:hover pseudo-properti berlaku, menunjukkan rentang yang dinyatakan tersembunyi.

Tanpa definisi dari properti transisi, perubahan ini adalah seketika. Tetapi dengan transisi akan terasa efeknya. Di sini kita memberitahu browser, bahwa durasi animasi adalah 250 milidetik. Anda bisa memberikan daftar properti spesifik yang akan di beri efek.

Transisi yang saat ini hanya didukung dalam browser WebKit berbasis (Safari dan Chrome), tapi versi berikutnya dari Firefox juga diharapkan untuk bisa mendukung,dengan menentukan -moz-transisi.

styles.css – Part 3

/* Green Button */

#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
 background-color:#7da315;
 color:#3d4f0c;
 text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
 background-color:#1e8bb4;
 color:#223a44;
 text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
 background-color:#c86c1f;
 color:#5a3517;
 text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
 background-color:#d0a525;
 color:#604e18;
 text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
 background-color:#af1e83;
 color:#460f35;
 text-shadow:1px 1px 0 #d244a6;
}

Pada bagian terakhir dari styling, kita menetapkan 5 desain yang berbeda untuk link navigasi. Semua gambar latar belakang untuk link yang terkandung dalam file sprite tunggal. Mereka memiliki satu normal dan keadaan melayang-layang di bawah yang lain. Ketika melayang-layang terjadi, latar belakang diimbangi untuk menunjukkan versi yang sesuai dari gambar latar belakang.

Sebuah file PSD termasuk dalam arsip download, sehingga Anda dapat menyesuaikan gambar sebanyak yang Anda suka.
Pure CSS3 Minimalistic Navigation Menu selesai!

DEMO Download

Reference English Version