Kutistettava mobiilisivupalkki
Toteuttakaa mobiilille liukuva sivupalkkavalikko JavaScript-vaihtokytkimellä, peittävällä taustalla ja sulavalla translate-siirtymällä.
Kutistettava mobiilisivupalkki on ilmainen Tailwind CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Tailwind CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mikä on mobiilin piirtoalueena toimiva sivupalkki
Mobiilin piirtoalueena toimiva sivupalkki liukuu näytön vasemmasta reunasta näkyviin, kun hampurilaispainiketta napautetaan, ja liukuu pois, kun se suljetaan. Toisin kuin työpöydän aina näkyvissä oleva sivupalkki, mobiilipiirtoalue on oletuksena näytön ulkopuolella CSS-muunnoksen avulla.
Kolme elementtiä toimii yhdessä: taustan peittävä kerros, joka tummentaa muun sivun, sivupalkkipaneeli, joka liukuu näkyviin, sekä vaihtopainike yläpalkissa, jolla piirtoalue avataan ja suljetaan.
<!-- 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>Avaamisen ja sulkemisen JavaScript-vaihto
Vaihto toimii poistamalla piirtoalueelta -translate-x-full-luokan ja taustan peittävältä kerrokselta hidden-luokan. Sulkeminen peruuttaa molemmat toiminnot.
Yksinkertaiset apufunktiot openDrawer() ja closeDrawer() pitävät logiikan selkeänä. Lisää body-elementtiin overflow-hidden, kun piirtoalue on avoinna, jotta sivun sisältö ei vieri peittävän kerroksen takana.
<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>Liukumisen siirtymä Tailwindillä
Piirtoaluepaneelin transition-transform duration-300 luo sulavan liukuanimaation, kun -translate-x-full-luokkaa vaihdetaan. duration-300 määrittää 300 millisekunnin ease-siirtymän, joka tuntuu nopealta mutta ei äkilliseltä.
Voit mukauttaa kiihtymistä luokalla ease-in-out ja muuttaa kestoksi duration-200, jos haluat yksinkertaisissa käyttöliittymissä nopeamman vaikutelman. Olennaista on, että omia CSS-avainruutuja ei tarvita — Tailwindin siirtymäapuohjelmat hoitavat kaiken.
<!-- 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>Taustan peittävän kerroksen tyylit
Taustan peittävä kerros himmentää avoimen piirtoalueen takana olevaa sisältöä ja viestii visuaalisesti, että piirtoalue on huomiota vaativa kohdistettu paneeli. Käytä luokkia fixed inset-0 bg-black/50 z-40, jotta se peittää koko näkymän 50-prosenttisella mustalla peittävyydellä.
Peittävä kerros on tasolla z-40 (piirtoalueen z-50-tason alapuolella), joten piirtoalue piirtyy sen päälle. Kun lisäät häivytyssiirtymän luokilla transition-opacity duration-300, peittävän kerroksen ilmestyminen näyttää luonnollisemmalta.
<div
id="backdrop"
class="fixed inset-0 bg-black/50 z-40 hidden
transition-opacity duration-300">
</div>Piirtoalueen navigointilinkit
Piirtoalueen navigointilinkeissä käytetään samaa mallia kuin työpöydän sivupalkissa, mutta teksti voi olla hieman suurempaa, koska kyseessä on kosketuskäyttöliittymä: käytä text-base-luokkaa text-sm-luokan sijaan, jotta teksti on helpompi lukea mobiilinäytöillä.
Lisää tap-highlight-color: transparent -toiminta käyttämällä active:bg-gray-800-luokkaa, joka antaa välittömän visuaalisen palautteen linkkiä napautettaessa. Luettelo on vieritettävä luokilla 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>Hampurilaispainike yläpalkissa
Mobiilissa hampurilaispainike sijaitsee yläpalkissa, joka korvaa sivupalkin. Käytä tässä yläpalkissa luokkaa lg:hidden, jotta se näkyy vain pienillä näytöillä, joilla sivupalkki on piilotettu.
Anna painikkeelle vähintään 44×44 pikselin kokoinen mukava kosketusalue käyttämällä luokkaa p-2 24 pikselin kuvakkeen (w-6 h-6) kanssa. Näin kokonaiskooksi tulee 44 pikseliä, mikä vastaa Applen HIG:n ja Googlen Material Designin suosituksia.
<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>Sulkeminen Esc-näppäimellä
Saavutettavuus edellyttää, että peittokerroksen kaltaiset elementit, kuten sivuvedokset, voidaan sulkea Escape-näppäimellä. Lisää dokumenttiin keydown-kuuntelija, joka tarkistaa ehdon event.key === 'Escape' ja kutsuu funktiota closeDrawer().
Tämä on WCAG 2.1:n vaatimus kaikille modaalipinnoille. Ilman Escape-tukea pelkällä näppäimistöllä sivustoa käyttävät käyttäjät jäävät loukkuun sivuvedokseen.
<script>
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
closeDrawer();
}
});
</script>Oikean reunan sivuvedos
Joissakin käyttöliittymissä käytetään oikean reunan sivuvedosta suodattimille, asetuspaneeleille tai tietonäkymille navigoinnin sijaan. Korvaa left-0 luokalla right-0 ja muuta suljetun tilan muunnos arvosta -translate-x-full arvoon translate-x-full, jotta paneeli liukuu näkyviin oikeasta reunasta.
Samaa tekniikkaa käytetään yksisivuisten sovellusten ostoskorin sivupalkkeihin, ilmoituspaneeleihin ja tietoruuduille.
<!-- 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>Sulkemisen pyyhkäisyvihjeen tyylittely
Kosketuslaitteilla käyttäjät usein odottavat voivansa pyyhkäistä sivuvedoksen kiinni. Varsinainen pyyhkäisyn tunnistus edellyttää JavaScriptiä (Touch Events API), mutta voit antaa visuaalisen vihjeen lisäämällä sivuvedoksen yläreunaan vetokahvan — lyhyen vaakasuuntaisen palkin, joka ilmaisee pyyhkäisyn olevan mahdollista.
Tyylittele se pieneksi pyöristetyksi suorakulmioksi: mx-auto mt-2 w-10 h-1 rounded-full bg-gray-300. Tämä on natiivien mobiilisovellusten yleinen käyttöliittymäkäytäntö, jota on sovellettu verkkoon.
<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">
×
</button>
</div>
</aside>Saavutettavuuden kohdistusloukku
Kun sivuvedos on avoinna, näppäimistön kohdistuksen tulisi pysyä sen sisällä. Näin sarkainnäppäimellä siirtyminen ei ulotu peittokerroksen takana olevaan piilotettuun sisältöön, mikä voi hämmentää ruudunlukijan käyttäjiä.
Täydellisen kohdistusloukun toteuttaminen edellyttää JavaScriptiä (kohdistettavissa olevien elementtien kierrättämistä Tab- ja Shift+Tab-näppäimillä), mutta varmista aina, että sulkemispainike on sivuvedoksen ensimmäinen kohdistettava elementti ja saa autofocus-määritteen tai että kohdistus siirretään siihen ohjelmallisesti sivuvedoksen avautuessa.
<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>Sivuvedoksen täydellinen kokoaminen
Täydellinen mobiilin sivuvedos yhdistää kaikki osat: hampurilaispainikkeella varustetun yläpalkin, näytön ulkopuolella olevan sivuvedospaneelin sulkemispainikkeineen ja navigointilinkkeineen sekä taustan peittokerroksen. Nämä kolme osaa ovat itsenäisiä HTML-elementtejä, jotka JavaScript yhdistää toisiinsa.
Työpöytänäytöllä (lg:-katkoskohta) piilota yläpalkki luokalla lg:hidden ja näytä sen sijaan pysyvä sivupalkki. Tämä mobiili- ja työpöytänäkymän jako on kaikkien nykyaikaisten hallintapaneelien perusta.
<!-- 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">×</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>Pikatarkistus
Testaa, miten hyvin hallitset tämän oppitunnin Tailwind CSS Mastery -käsitteet.
Oppitunnin kertaus
Tässä oppitunnissa opit, että mobiilin sivuvedos käyttää kolmea elementtiä — taustan peittokerrosta, sisään liukuvaa paneelia ja hampurilaispainiketta; liukuanimaatiossa vuorotellaan luokkia -translate-x-full ja transition-transform duration-300; ja saavutettavuus edellyttää Escape-näppäimen tukea, kohdistuksen hallintaa ja siirtämistä sivuvedokseen sen avautuessa sekä napsautettavaa taustan peittokerrosta sulkemista varten. Seuraavaksi tyylittelemme tekstikenttiä ja tekstialueita.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Kutistettava mobiilisivupalkki” ilmainen?
Kyllä – oppitunnin ”Kutistettava mobiilisivupalkki” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Tailwind CSS Academy-kurssin, päivitä CoddyKit PROhon. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Kutistettava mobiilisivupalkki”?
Toteuttakaa mobiilille liukuva sivupalkkavalikko JavaScript-vaihtokytkimellä, peittävällä taustalla ja sulavalla translate-siirtymällä. Harjoittelet Tailwind CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Tailwind CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Tailwind CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Kutistettava mobiilisivupalkki”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Tailwind CSS Academy-oppitunnilla?
Kyllä. Jokainen Tailwind CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Responsiivisen navigointipalkin rakentaminen
- Tahmea ja kiinteä navigointi
- Pystysuuntainen sivupalkkiasettelu
- Kutistettava mobiilisivupalkki