Codelab: Sidenav bileşeni oluşturma

Adam Argyle

Bu codelab'de, web'de duyarlı bir kayarak açılan yan gezinme düzeni bileşeninin nasıl oluşturulacağı açıklanmaktadır. Bileşeni, HTML ile başlayıp CSS ve JavaScript ile devam ederek adım adım oluşturacağız.

Bu bileşeni oluşturmak için seçilen CSS web platformu özellikleri hakkında bilgi edinmek üzere Building a Sidenav component (Bir Sidenav bileşeni oluşturma) başlıklı blog yayınımı inceleyin.

Kurulum

  1. Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remix'i tıklayın.
  2. app/index.html adlı kişiyi aç.

HTML

Öncelikle, HTML kurulumunun temel bilgilerini edinin. Böylece, üzerinde çalışabileceğiniz içerik ve bazı kutular olur.

Aşağıdaki HTML'yi <body> etiketine bırakın.

<aside></aside>
<main></main>

<aside>, birincil sayfa içeriğini barındıran <main> öğesinin tamamlayıcı öğesi olarak gezinme menüsünü içerir.

Ardından, bu anlamsal öğeleri sayfa içeriğinin geri kalanıyla dolduracağız.

<aside> öğesinin içine bir gezinme öğesi, bazı gezinme bağlantıları ve bir kapatma bağlantısı ekleyin.

<aside>
  <nav>
    <h4>My</h4>
    <a href="#">Dashboard</a>
    <a href="#">Profile</a>
    <a href="#">Preferences</a>
    <a href="#">Archive</a>

    <h4>Settings</h4>
    <a href="#">Accessibility</a>
    <a href="#">Theme</a>
    <a href="#">Admin</a>
  </nav>

  <a href="#"></a>
</aside>

Bağlantılar <nav> öğelerinde, <nav> öğeleri ise <aside> kenar çubuklarında harika görünür. Ancak daha iyi olmak için yapabileceğimiz başka şeyler de var.

Ana içerik öğesine, düzen içeriğini anlamsal olarak tutmak için bir başlık ve makale ekleyin.

<main>
  <header>
    <a href="#sidenav-open" class="hamburger">
      <svg viewBox="0 0 50 40">
        <line x1="0" x2="100%" y1="10%" y2="10%" />
        <line x1="0" x2="100%" y1="50%" y2="50%" />
        <line x1="0" x2="100%" y1="90%" y2="90%" />
      </svg>
    </a>
    <h1>Site Title</h1>
  </header>

  <article>
    {put some placeholder content here}
  </article>
</main>

Başlıkta menü açma bağlantısı bulunur. Kenar çubuğunda kapat düğmesi bulunur. Yakında öğeleri görüntü alanı boyutuna göre gösterecek ve gizleyeceğiz.

<article> öğesine yer tutucu bir cümle yapıştırdık. `` öğesini kendi içeriğinizle değiştirin veya aşağıda verilen lorem ipsum metnini yapıştırın:

<h2>Totam Header</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum consectetur, necessitatibus velit officia ut impedit veritatis temporibus soluta? Totam odit cupiditate facilis nisi sunt hic necessitatibus voluptatem nihil doloribus! Enim.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>

<h3>Subhead Totam Odit</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>

<h3>Subhead</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>

Bu içerik ve uzunluğu, sayfanın görüntü alanı yüksekliğinizi aştığında kaydırılabilir olmasına neden olur.

Şimdiye kadar bir kenar notu öğesi, gezinme, bağlantılar ve kenar gezinme çubuğunu kapatma yolu eklediniz. Ayrıca ana öğeye bir başlık, bir kenar çubuğu açma yöntemi ve bir makale eklediniz. Bu kod temiz, semantik ve neredeyse zamandan bağımsız olsa da herkes için daha temiz ve net hale getirebiliriz. Kenar çubuğundaki bağlantıyı açma seçeneği daha net işaretlenebilir.

Başlık açık bağlantı öğesine title ve aria-label özelliklerini ekleyin:

<a href="#sidenav-open" class="hamburger">
<a href="#sidenav-open" title="Open Menu" aria-label="Open Menu" class="hamburger">

Açık SVG simgesi de daha net bir şekilde işaretlenebilir. Açık bağlantı öğesinin içindeki SVG'ye aşağıdaki özellikleri ekleyin:

<svg viewBox="0 0 50 40">
<svg viewBox="0 0 50 40" role="presentation" focusable="false" aria-label="trigram for heaven symbol">

Yan gezinme çubuğundaki kapatma bağlantısı daha net işaretlenebilir. Sidenav kapatma bağlantı öğesine title ve aria-label özelliklerini ekleyin:

<a href="#"></a>
<a href="#" title="Close Menu" aria-label="Close Menu"></a>

CSS

Öğeleri yerleştirme zamanı. Ana içerik ve sidenav, <body> etiketinin doğrudan alt öğeleridir. Bu nedenle, başlangıç için iyi bir yerdir.

css/sidenav.css öğesine aşağıdaki CSS'yi ekleyin. Böylece <body> öğesi alt öğeleri yerleştirir.

body {
  display: grid;
  grid: [stack] 1fr / min-content [stack] 1fr;

  @media (max-width: 540px) {
    & > :matches(aside, main) {
      grid-area: stack;
    }
  }
}

Bu düzen temelde şunu ifade eder: İçinde her şeyin bulunduğu stack adlı bir satır oluştur ve bu satırda 2 sütun olsun. Bu sütunlardan 2. sütunun adı da stack olsun. 1. sütun, minimum içerik ihtiyaçlarına göre boyutlandırılmalı, 2. sütun ise geri kalan alanı kaplayabilir. Ardından, 540px veya daha küçük bir görüntü alanında yan gezinme ve ana içerik öğelerini aynı satır ve sütuna yerleştirin. Bu durumda, öğeler 1x1 ızgarada üst üste yerleştirilir.

Bu duyarlı yığınlama işlevini temel alarak, artık URL çubuğunun durumundan yararlanıp yan gezinme çubuğunun görünürlüğünü ve geçiş stilini değiştirebiliriz.

<aside> öğesini app/index.html içinde tekrar güncelleyin:

<aside>
<aside id="sidenav-open">

Bu sayede CSS, bir öğeyi ve URL karmasını birlikte eşleştirebilir. Bu, :target kullanımı için önemlidir. Artık öğenin kimliği, <a> etiketleriyle ayarlayacağımız URL karmasıyla eşleşebilir.

Ayrıca, JavaScript'i daha kolay hedeflemek için yan gezinme çubuğunu kontrol eden temel öğelere kimlikler ekleyin. Öncelikle, açık olan gezinme çekmecesinin bağlantısına bir kimlik ekleyin:

<a href="#sidenav-open" class="hamburger" title="Open Menu" aria-label="Open Menu">
<a href="#sidenav-open" id="sidenav-button" class="hamburger" title="Open Menu" aria-label="Open Menu">

Ardından, kenar çubuğu kapatma bağlantısına bir kimlik ekleyin:

<a href="#" title="Close Menu" aria-label="Close Menu"></a>
<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu"></a>

Bu, makro <body> duyarlı yığın düzenini tamamlar ve bizi URL çubuğuna bağlar. Devam edelim.

<aside> uygulamasının da düzeni nettir. Bu öğenin 2 alt öğesi vardır: kayarak açılan kağıt benzeri bileşen olan <nav> ve URL'nin # olarak ayarlanması gereken kapatma <a> bağlantı öğesi. Bağlantı, kağıt slaytlı gezinme çubuğunun sağında görünmez. Böylece kullanıcılar, görsel bileşeni kapatmak için "tıklayarak devre dışı bırakabilir".

Aşağıdaki CSS'yi css/sidenav.css alanına ekleyin:

#sidenav-open {
  display: grid;
  grid-template-columns: [nav] 2fr [escape] 1fr;
}

Burada oran ve adların çok güzel bir dokunuş olduğunu düşünüyorum. Izgara, tasarımcıya çok fazla kontrol sağlayabilir.

Ardından, ana içeriği koşullu olarak yerleştirmem ve herhangi bir belge kaydırma işleminde konumumu korumam gerekiyor. Bu, position: sticky ve overscroll-behavior için harika bir iş.

Sidenav için aşağıdaki stilleri ekleyin:

#sidenav-open {
  display: grid;
  grid-template-columns: [nav] 2fr [escape] 1fr;

  @media (max-width: 540px) {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow: hidden auto;
    overscroll-behavior: contain;

    visibility: hidden; /* not keyboard accessible when closed */
  }
}

Bu stiller, yan gezinme çubuğunun görüntü alanı yüksekliğinde olmasını, dikey olarak kaydırılmasını ve kaydırma işlemini içermesini sağlar. En önemlisi, öğeyi gizler. Varsayılan olarak, görüntü alanı 540px veya daha küçük olduğunda bu yan gezinme çubuğunu gizleyin. Aksi takdirde!

#sidenav-open öğesine bir :target sözde seçici ekleyin:

#sidenav-open {

  @media (max-width: 540px) {

    &:target {
      visibility: visible;
    }
  }
}

Bu öğenin kimliği ve URL çubuğu aynı olduğunda visibility değerini visible olarak ayarlayın. Sayfayı kaydırdıktan sonra yan menüyü açın veya yan gezinme çubuğu açıkken sayfayı kaydırmayı deneyin. Ne düşünüyorsunuz?

Aşağıdaki CSS'yi app/sidenav.css dosyasının en altına ekleyin:

#sidenav-button,
#sidenav-close {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  touch-action: manipulation;

  @media (min-width: 540px) {
    display: none;
  }
}

Bu stiller, açık ve kapalı düğmelerimizi hedefler, dokunma ve dokunmatik stillerini belirtir ve ayrıca görüntü alanları 540px veya daha büyük olduğunda bunları gizler.

Biraz stil katmak için erişilebilirliğe saygı göstererek CSS dönüşümleri ekleyelim. Aşağıdaki CSS'yi css/sidenav.css alanına ekleyin:

#sidenav-open {
  --easeOutExpo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: .6s;

  ...

  @media (max-width: 540px) {
    ...

    transform: translateX(-110vw);
    will-change: transform;
    transition:
      transform var(--duration) var(--easeOutExpo),
      visibility 0s linear var(--duration);

    &:target {
      visibility: visible;
      transform: translateX(0);
      transition: transform var(--duration) var(--easeOutExpo);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    --duration: 1ms;
  }
}
`prefers-reduced-motion` medya sorgusuna göre, süre uygulanmış ve uygulanmamış etkileşim demosu.

JavaScript ekleme

Escape tuşu menüyü kapatmalıdır. Bu JS'yi js/index.js dosyasına ekleyin:

const sidenav = document.querySelector('#sidenav-open');

sidenav.addEventListener('keyup', e => {
  if (e.code === 'Escape') {
    document.location.hash = '';
  }
});

Bu işlev, yan gezinme çubuğu öğesindeki önemli etkinlikleri dinler. Escape ise URL karmasını boş olarak ayarlar ve yan gezinme çubuğunun geçişini kapatır.

Kullanıcı deneyimi JavaScript'inin bir sonraki parçası odak yönetimidir. Açma ve kapatma işlemlerini kolaylaştırmak için, yan gezinme çubuğu bir geçişi tamamlayana kadar bekliyorum. Ardından, yan gezinme çubuğunun açık mı yoksa kapalı mı olduğunu belirlemek için URL karmasıyla çapraz kontrol yapıyorum. Ardından, JavaScript kullanarak odağı, kullanıcının az önce bastığı düğmeyle tamamlayıcı olan düğmeye ayarlıyorum.

Aşağıdaki JavaScript'i js/index.js alanına ekleyin:

const closenav = document.querySelector('#sidenav-close');
const opennav = document.querySelector('#sidenav-button');

sidenav.addEventListener('transitionend', e => {
  if (e.propertyName !== 'transform') {
    return;
  }

  const isOpen = document.location.hash === '#sidenav-open';

  isOpen
    ? closenav.focus()
    : opennav.focus();
});

Deneyin

  • Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından Tam Ekran'a basın. tam ekran

Sonuç

Bileşenle ilgili ihtiyaçlarımın özeti bu şekilde. Bu kodu geliştirebilir, URL yerine JavaScript durumuyla çalıştırabilir ve genel olarak kendinize göre uyarlayabilirsiniz. Her zaman eklenecek daha fazla bilgi veya ele alınacak daha fazla kullanım alanı vardır.

Bu bileşene uyguladığım düzenle ilgili olmayan stilleri incelemek için css/brandnav.css'ı açın. Odaklandığım özellikler için önemli olmadığını düşündüm ve stilleri düzenden ayırmanın kopyalama ve yapıştırma işlemlerini kolaylaştıracağını umdum. Burada daha fazla bilgi edinebilirsiniz.

Kayarak açılan duyarlı sidenav bileşenlerini nasıl oluşturursunuz? Hiç birden fazla (ör. her iki tarafta da birer tane) piercing'iniz oldu mu? Çözümünüzü YouTube videosunda paylaşmak isteriz. Kodunuzu bize tweet atarak veya YouTube'da yorum olarak gönderin. Bu sayede herkese yardımcı olabilirsiniz.