Konsep dari Responsive Menu Web Design

Selama ini kursusan yang paling baik menerapkan konsep belajar web design yaitu Kursus Web Design. Ketika belajar ke web desain responsif kita dihadapkan dengan berbagai teknik tentang cara terbaik untuk menangani mengubah menu navigasi kami untuk layar kecil. Sumber daya tampaknya tak ada habisnya. Itulah sebabnya aku akan menunjukkan empat konsep utama dan membahas keuntungan dan kerugian dari semua itu.

Tiga dari mereka yang dibuat dengan murni CSS dan satu menggunakan satu baris JavaScript.
Sebelum Kita Mulai

Dalam kode yang disajikan dalam artikel ini, saya tidak menggunakan vendor-prefiks untuk menjaga CSS lebih mudah untuk melihat dan memahami. Contoh-contoh CSS lebih kompleks menggunakan SCSS. Setiap contoh-host di CodePen di mana Anda dapat melihat CSS disusun jika Anda inginkan.

Semua konsep menu dalam artikel ini didasarkan pada struktur HTML sederhana yang saya sebut menu dasar. Peran atribut digunakan untuk menentukan konsep tertentu (full-horizontal, pilih, adat-dropdown dan off-kanvas).

Berikut Kode HTML nya :

<nav role="">
  <ul>
    <li><a href="#">Stream</a></li>
    <li><a href="#">Lab</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>​

Berikut Kode CSS ntuk media screen responsive, atur saja class pada tag ul atau li jika diperlukan : 

@media screen and (max-width: 44em) {

}