Tutorial Membuat Navigasi Tab yang Responsif

Membuat Navigasi Tab

Membuat Navigasi Tab yang Responsif – Sebuah navigasi tab siap digunakan yang dioptimalkan untuk perangkat mobile, dapat digunakan untuk menu dengan posisi horisontal dan vertikal.

Navigasi tab akan sangat berguna ketika Anda perlu untuk mengatur sejumlah konten yang memiliki sisi sangat besar. Hal ini sangat umum untuk menggunakan tab di halaman produk, untuk informasi seperti pilihan pengiriman, info bahan produk, dll. Penggunaan lain dari tab di dashboard, di mana pengguna perlu cara cepat untuk beralih dari satu panel yang lain dan masih banyak lagi kegunaan yang lain.

Penggunaan kode dari komponen ini sangat mudah untuk digunakan. Sebagian besar menggunakan CSS, ditambah sedikit jQuery untuk memberi sedikit animasi pada bagian konten. Hal yang menarik adalah cara kita menangani pengalaman pengguna pada perangkat kecil, untuk memungkinkan pengguna yang memiliki banyak tombol dan menyesuaikan kebutuhan mereka, kami memutuskan untuk membiarkan scroll navigasi horizontal pada perangkat kecil – bukan menyembunyikan sepenuhnya atau menembak drop-down menu.

Tutorial lainya   Membuat Konten untuk Webiste

Kami memakai Ikon dari: Vicons oleh Victor Erixon.

Membuat struktur

Struktur HTML dibuat dalam 2 daftar(.cd-tabs-navigation  dan.cd-tabs-content  ), yang pertama adalah bagian navigasi dan yang kedua adalah bagian konten yang dimasukkan ke dalam sebuah div yang memiliki kelas.cd-tabs  .

Menambahkan Style

Kami menggunakan CSS media queries untuk mengubah posisi navigasi dari horisontal ke vertikal, dan begitu juga sebaliknya. Karena kita menganut pendekatan mobile pertama, elemen<nav>  memilikioverflow:auto  untuk menyembunyikan bagian dari daftar unordered yang lebarnya lebih tinggi. Selain itu kami menggunakan-webkit-overflow-scrolling: touch  untuk membuat effek scroll menjadi sedikit haus pada perangkat sentuh(Mobile Devices) yang akan selalu diterapkan pada elemen<nav>  .

Tutorial lainya   Apa itu Wordpress?

Selanjutnya mengenai penggunaan CSS dan jQuery dalam kasus ini adalah cukup mudah, Anda dapat men-download file dan bereksperimen dengan file tersebut. Demikian informasi yang saya sampaikan dalam artikel mengenai “Tutorial Membuat Navigasi Tab yang Responsif” semoga bermanfaat, berikan kritik dan saran anda mealui halaman komentar.

Navigasi Tab Responsif Demo

Penulis Tutorial

Penulis Tutorial

Kata terindah

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *