PricingLoginStart free
Tailwind CSS Academy · Pelajaran

Bar Sisi Mudah Alih Boleh Runtuh

Laksanakan bar sisi laci gelongsor untuk mudah alih dengan togol JavaScript, latar tindanan dan peralihan translate yang lancar.

Pelajaran 4 daripada 413 langkah

Bar Sisi Mudah Alih Boleh Runtuh ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah Itu Drawer Bar Sisi Mudah Alih

Drawer bar sisi mudah alih meluncur masuk dari tepi kiri skrin apabila butang hamburger ditekan dan meluncur keluar apabila ditutup. Tidak seperti bar sisi komputer meja yang sentiasa kelihatan, drawer mudah alih disembunyikan di luar skrin secara lalai menggunakan transformasi CSS.

Tiga elemen berfungsi bersama: lapisan tindihan latar yang menggelapkan bahagian halaman yang lain, panel bar sisi yang meluncur masuk dan butang togol pada bar atas yang membuka serta menutup drawer.

<!-- Closed state: sidebar off-screen left -->
<aside id="drawer" class="fixed inset-y-0 left-0 w-72 bg-white z-50
                          -translate-x-full transition-transform duration-300">
  <!-- sidebar content -->
</aside>

<!-- Backdrop: hidden until drawer opens -->
<div id="backdrop" class="fixed inset-0 bg-black/50 z-40 hidden"></div>

Togol JavaScript Buka/Tutup

Togol ini berfungsi dengan membuang kelas -translate-x-full daripada drawer dan membuang kelas hidden daripada lapisan tindihan. Operasi sebaliknya dilakukan semasa menutup.

Fungsi pembantu ringkas openDrawer() dan closeDrawer() memastikan logiknya kemas. Tambahkan overflow-hidden pada body apabila drawer terbuka untuk menghalang kandungan halaman di belakang lapisan tindihan daripada menatal.

<script>
  const drawer = document.getElementById('drawer');
  const backdrop = document.getElementById('backdrop');

  function openDrawer() {
    drawer.classList.remove('-translate-x-full');
    backdrop.classList.remove('hidden');
    document.body.classList.add('overflow-hidden');
  }

  function closeDrawer() {
    drawer.classList.add('-translate-x-full');
    backdrop.classList.add('hidden');
    document.body.classList.remove('overflow-hidden');
  }

  // Clicking backdrop closes the drawer
  backdrop.addEventListener('click', closeDrawer);
</script>

Peralihan Gelongsor Masuk Dengan Tailwind

transition-transform duration-300 Tailwind pada panel drawer menghasilkan animasi gelongsor yang lancar apabila -translate-x-full ditogol. duration-300 menetapkan peralihan ease selama 300ms, yang terasa pantas tetapi tidak mengejutkan.

Anda boleh menyesuaikan pelicinan dengan ease-in-out dan melaraskan tempoh kepada duration-200 untuk pengalaman yang lebih pantas pada antara muka yang lebih ringkas. Perkara pentingnya ialah tiada bingkai utama CSS tersuai diperlukan — utiliti peralihan Tailwind mengendalikan semuanya.

<!-- Drawer with slide transition -->
<aside
  id="drawer"
  class="fixed inset-y-0 left-0 w-72 bg-gray-900 text-white z-50
         -translate-x-full transition-transform duration-300 ease-in-out
         flex flex-col">
  <!-- Header -->
  <div class="flex items-center justify-between px-5 py-4 border-b border-gray-800">
    <span class="font-bold text-white">Menu</span>
    <button onclick="closeDrawer()" class="text-gray-400 hover:text-white">
      <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
      </svg>
    </button>
  </div>
</aside>

Penggayaan Lapisan Tindihan Latar

Lapisan tindihan latar meredupkan kandungan di belakang drawer yang terbuka, sekali gus menunjukkan secara visual bahawa drawer itu ialah panel berfokus yang memerlukan perhatian. Gunakan fixed inset-0 bg-black/50 z-40 supaya ia meliputi seluruh ruang pandang dengan warna hitam berkelegapan 50%.

Lapisan tindihan berada pada z-40 (di bawah drawer pada z-50) supaya drawer dipaparkan di atasnya. Menambahkan peralihan kemunculan dengan transition-opacity duration-300 menjadikan lapisan tindihan muncul dengan lebih semula jadi.

<div
  id="backdrop"
  class="fixed inset-0 bg-black/50 z-40 hidden
         transition-opacity duration-300">
</div>

Pautan Navigasi Drawer

Di dalam drawer, pautan navigasi menggunakan corak yang sama seperti bar sisi komputer meja tetapi boleh menggunakan teks yang sedikit lebih besar kerana ini ialah antara muka sentuhan: text-base dan bukannya text-sm untuk keterbacaan yang lebih baik pada skrin mudah alih.

Tambahkan tingkah laku tap-highlight-color: transparent dengan menggunakan active:bg-gray-800 untuk memberikan maklum balas visual segera apabila pautan ditekan. Senarai ini boleh ditatal menggunakan flex-1 overflow-y-auto.

<nav class="flex-1 overflow-y-auto px-4 py-6 space-y-1">
  <a href="/" onclick="closeDrawer()"
     class="flex items-center gap-3 px-3 py-3 rounded-lg text-base font-medium
            bg-gray-800 text-white">
    Home
  </a>
  <a href="/features" onclick="closeDrawer()"
     class="flex items-center gap-3 px-3 py-3 rounded-lg text-base font-medium
            text-gray-300 hover:bg-gray-800 hover:text-white
            active:bg-gray-800 transition-colors">
    Features
  </a>
  <a href="/pricing" onclick="closeDrawer()"
     class="flex items-center gap-3 px-3 py-3 rounded-lg text-base font-medium
            text-gray-300 hover:bg-gray-800 hover:text-white
            active:bg-gray-800 transition-colors">
    Pricing
  </a>
</nav>

Butang Hamburger Pada Bar Atas

Pada peranti mudah alih, butang menu hamburger berada pada bar atas yang menggantikan bar sisi. Gunakan lg:hidden pada bar atas ini supaya ia hanya dipaparkan pada skrin kecil apabila bar sisi disembunyikan.

Berikan butang sasaran sentuhan yang selesa, sekurang-kurangnya 44×44px, dengan menggunakan p-2 bersama ikon 24px (w-6 h-6), yang menghasilkan jumlah 44px seperti yang disyorkan oleh HIG Apple dan garis panduan Reka Bentuk Material Google.

<header class="lg:hidden flex items-center justify-between px-4 py-3 bg-white border-b border-gray-200">
  <span class="font-bold text-gray-900">AppDash</span>
  <button
    onclick="openDrawer()"
    aria-label="Open navigation"
    class="p-2 text-gray-600 hover:bg-gray-100 active:bg-gray-200 rounded-lg">
    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
    </svg>
  </button>
</header>

Tekan Escape pada Papan Kekunci untuk Menutup

Kebolehcapaian menghendaki elemen tindanan seperti laci boleh ditutup dengan kekunci Escape. Tambahkan pendengar keydown pada dokumen yang menyemak event.key === 'Escape' dan memanggil closeDrawer().

Ini ialah keperluan WCAG 2.1 untuk semua permukaan modal. Tanpa sokongan Escape, pengguna yang hanya menggunakan papan kekunci akan terperangkap di dalam laci.

<script>
  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') {
      closeDrawer();
    }
  });
</script>

Variasi Laci Sebelah Kanan

Sesetengah antara muka menggunakan laci sebelah kanan untuk penapis, panel tetapan atau paparan butiran, bukannya navigasi. Gantikan left-0 dengan right-0 dan ubah transformasi tertutup daripada -translate-x-full kepada translate-x-full supaya panel meluncur masuk dari tepi kanan.

Teknik yang sama digunakan untuk bar sisi troli beli-belah, panel pemberitahuan dan anak tetingkap butiran dalam aplikasi satu halaman.

<!-- Right drawer -->
<aside
  id="right-drawer"
  class="fixed inset-y-0 right-0 w-80 bg-white shadow-xl z-50
         translate-x-full transition-transform duration-300 ease-in-out
         flex flex-col">
  <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
    <h2 class="text-lg font-semibold text-gray-900">Filter Options</h2>
    <button onclick="closeRightDrawer()" class="p-1 text-gray-400 hover:text-gray-600 rounded">
      <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
      </svg>
    </button>
  </div>
  <div class="flex-1 overflow-y-auto p-5">
    <!-- Filter controls go here -->
  </div>
</aside>

Penggayaan Petunjuk Leret untuk Menutup

Pada peranti sentuhan, pengguna sering menjangka mereka boleh meleraikan laci dengan leretan. Walaupun pengesanan leretan sebenar memerlukan JavaScript (API Peristiwa Sentuhan), anda boleh memberikan petunjuk visual dengan menambahkan pemegang seretan di bahagian atas laci — bar mendatar pendek yang menunjukkan laci boleh dileret.

Gayakannya sebagai segi empat tepat kecil berbucu bulat: mx-auto mt-2 w-10 h-1 rounded-full bg-gray-300. Ini ialah kebiasaan UX yang lazim daripada aplikasi mudah alih asli dan disesuaikan untuk web.

<aside class="fixed inset-y-0 left-0 w-72 bg-gray-900 z-50 flex flex-col -translate-x-full transition-transform duration-300">
  <!-- Drag handle -->
  <div class="flex justify-center pt-3">
    <div class="w-10 h-1 rounded-full bg-gray-600"></div>
  </div>
  <!-- Header -->
  <div class="flex items-center justify-between px-5 py-4 mt-1 border-b border-gray-800">
    <span class="font-bold text-white">Menu</span>
    <button onclick="closeDrawer()" class="text-gray-400 hover:text-white">
      &times;
    </button>
  </div>
</aside>

Perangkap Fokus untuk Kebolehcapaian

Apabila laci dibuka, fokus papan kekunci sepatutnya terperangkap di dalamnya. Ini menghalang navigasi kekunci Tab daripada sampai ke kandungan yang tersembunyi di sebalik tindanan, yang boleh mengelirukan pengguna pembaca skrin.

Walaupun pelaksanaan perangkap fokus penuh memerlukan JavaScript (beralih antara elemen yang boleh difokuskan menggunakan Tab dan Shift+Tab), pastikan butang tutup sentiasa menjadi elemen pertama yang boleh difokuskan di dalam laci dan menerima autofocus atau difokuskan secara program apabila laci dibuka.

<script>
  function openDrawer() {
    const drawer = document.getElementById('drawer');
    const backdrop = document.getElementById('backdrop');
    drawer.classList.remove('-translate-x-full');
    backdrop.classList.remove('hidden');
    document.body.classList.add('overflow-hidden');

    // Move focus into drawer for accessibility
    const closeBtn = drawer.querySelector('button[data-close]');
    if (closeBtn) closeBtn.focus();
  }
</script>

<!-- Close button receives focus first -->
<button
  data-close
  onclick="closeDrawer()"
  class="text-gray-400 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white rounded"
  aria-label="Close menu">
  <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
  </svg>
</button>

Pemasangan Lengkap Susun Atur Laci

Laci mudah alih yang lengkap menggabungkan semua bahagian: bar atas dengan butang menu hamburger, panel laci di luar skrin dengan butang tutup dan pautan navigasi, serta tindanan latar belakang. Ketiga-tiga bahagian ini ialah elemen HTML yang berasingan dan disambungkan oleh JavaScript.

Pada desktop (titik henti lg:), sembunyikan bar atas dengan lg:hidden dan paparkan bar sisi kekal sebagai gantinya. Pembahagian mudah antara mudah alih dan desktop ini menjadi asas bagi setiap susun atur papan pemuka moden.

<!-- Top bar (mobile only) -->
<header class="lg:hidden sticky top-0 bg-white border-b border-gray-200 z-30 flex items-center justify-between px-4 py-3">
  <span class="font-bold">AppDash</span>
  <button onclick="openDrawer()" aria-label="Open menu" class="p-2 text-gray-600 hover:bg-gray-100 rounded-lg">
    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
    </svg>
  </button>
</header>

<!-- Backdrop -->
<div id="backdrop" class="hidden fixed inset-0 bg-black/50 z-40" onclick="closeDrawer()"></div>

<!-- Drawer panel -->
<aside id="drawer" class="fixed inset-y-0 left-0 w-72 bg-gray-900 text-white z-50 flex flex-col -translate-x-full transition-transform duration-300">
  <div class="flex items-center justify-between px-5 py-4 border-b border-gray-800">
    <span class="font-bold text-white">AppDash</span>
    <button data-close onclick="closeDrawer()" aria-label="Close menu" class="text-gray-400 hover:text-white">&times;</button>
  </div>
  <nav class="flex-1 overflow-y-auto px-4 py-6 space-y-1">
    <a href="/" class="block px-3 py-3 rounded-lg text-base font-medium bg-gray-800 text-white">Home</a>
    <a href="/features" class="block px-3 py-3 rounded-lg text-base font-medium text-gray-300 hover:bg-gray-800 hover:text-white">Features</a>
  </nav>
</aside>

Semakan Pantas

Uji pemahaman anda tentang konsep Penguasaan Tailwind CSS daripada pelajaran ini.

Jawab dalam pelajaran interaktif

Rumusan Pelajaran

Dalam pelajaran ini, anda telah mempelajari bahawa: laci mudah alih menggunakan tiga elemen — tindanan latar belakang, panel yang meluncur masuk dan pencetus menu hamburger; animasi gelongsor menogol -translate-x-full dengan transition-transform duration-300; dan kebolehcapaian memerlukan sokongan kekunci Escape, pengurusan fokus ke dalam laci apabila dibuka serta latar belakang yang boleh diklik untuk menutupnya. Seterusnya, kita akan menggayakan input teks dan kawasan teks.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
30
Pelajaran
120
Mula belajar secara percumaLihat kursus penuh

Soalan Lazim

Adakah pelajaran “Bar Sisi Mudah Alih Boleh Runtuh” percuma?

Ya — teks penuh “Bar Sisi Mudah Alih Boleh Runtuh” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Tailwind CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Bar Sisi Mudah Alih Boleh Runtuh”?

Laksanakan bar sisi laci gelongsor untuk mudah alih dengan togol JavaScript, latar tindanan dan peralihan translate yang lancar. Anda berlatih Tailwind CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Tailwind CSS Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Tailwind CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Bar Sisi Mudah Alih Boleh Runtuh” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tailwind CSS Academy ini?

Ya. Setiap pelajaran Tailwind CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Membina Bar Navigasi Responsif
  2. Navigasi Lekat dan Tetap
  3. Tataletak Bar Sisi Menegak
  4. Bar Sisi Mudah Alih Boleh Runtuh
← Kembali ke Tailwind CSS Academy