Web Developer Jakarta Responsif Navigasi

Salah satu bagian paling sulit untuk responsified pada sebuah situs web adalah “Navigasi”, bagian ini benar-benar penting untuk aksesibilitas website, karena ini adalah salah satu cara pengunjung melompati halaman web.

Sebenarnya Web Developer Jakarta ada banyak cara untuk membuat responsif navigasi situs web dan bahkan beberapa plugin jQuery tersedia untuk melakukannya dalam satu detik.

Namun, daripada menerapkan solusi instan, dalam posting ini, kita akan memandu Anda melalui tentang cara untuk membangun navigasi sederhana dari tanah dan menggunakan pertanyaan media CSS3 dan jQuery sedikit untuk menampilkannya dalam ukuran layar kecil seperti smartphone dengan benar.

Pada bagian ini, kita mulai styling navigasi. Web Developer Jakarta sini hanya dekoratif, Anda dapat memilih setiap warna yang Anda inginkan. Tapi dalam kasus ini, kami (saya pribadi) ingin tubuh memiliki warna lembut dan creamy.

Tag nav yang mendefinisikan navigasi akan memiliki 100% lebar penuh jendela browser, sedangkan ul mana berisi link menu utama kami akan memiliki 600px untuk lebar.

Jika Anda melihat Web Developer Jakarta dari markup HTML di atas, kita sudah menambahkan clearfix dalam atribut kelas untuk kedua nav dan ul untuk menghapus hal-hal di sekitar ketika kita mengapung elemen di dalamnya menggunakan CSS clearfix ini hack. Jadi, mari kita tambahkan aturan gaya berikut di style sheet.

Web Developer Jakarta Link menu akan dipisahkan dengan batas kanan 1px, kecuali yang terakhir. Ingat posting sebelumnya pada model kotak, lebar menu akan diperluas untuk 1px membuatnya 101px sebagai penambahan perbatasan, jadi di sini kita mengubah model kotak-sizing ke perbatasan-kotak untuk menjaga menu tetap 100px.

Sejak navigasi kami awalnya 600px fix-lebar, pertama kita akan menentukan gaya bila dilihat dalam 600px atau lebih rendah ukuran layar, sehingga secara praktis, ini adalah breakpoint pertama kami.

Dalam ukuran layar ini, masing-masing dua link menu akan ditampilkan berdampingan, sehingga lebar ul sini akan 100% dari jendela browser sedangkan link menu akan memiliki 50% untuk lebar.