Bu codelab'de, web'de duyarlı bir kaydırmalı yan gezinme düzeni bileşeni oluşturmayı öğreneceksiniz. HTML, CSS ve JavaScript'den başlayarak bileşeni 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 Yan gezinme menüsü bileşeni oluşturma başlıklı blog yayınımı inceleyin.
Kurulum
- Projeyi düzenlenebilir hale getirmek için Düzenlemek için remiks oluştur'u tıklayın.
app/index.html
adlı kişiyi aç.
HTML
Öncelikle, HTML kurulumunun temel özelliklerini öğrenin. Böylece, üzerinde çalışabileceğiniz içerikler 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>
'ye tamamlayıcı bir öğe olarak gezinme menüsünü barındırır.
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>
öğelerinin içinde, <nav>
öğeleri ise <aside>
kenar çubuklarında harika görünür.
Yine de, daha iyi olmak için yapabileceğimiz daha fazla şey var.
Ana içerik öğesinde, 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ı var. Ayrıntılar bölümünde kapat düğmesi bulunur. Yakında, öğeleri ekran boyutuna göre göstereceğiz ve gizleyeceğiz.
<article>
öğesine bir yer tutucu cümle yapıştırdık. `` öğesini kendi bilgilerinizle değiştirin veya aşağıdaki 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, görüntü alanı yüksekliğinizi aştığında sayfanın kaydırılabilir olmasına neden olur.
Şimdiye kadar bir gezinme menüsü, bağlantılar ve yan gezinme menüsünü kapatma seçeneği içeren bir aside öğesi eklediniz. Ana öğeye bir başlık, kenar çubuğunu açma yöntemi ve bir makale de eklediniz. Bu açıklama zaten net, anlamlı ve zamansız. Ancak herkes için daha net ve anlaşılır hale getirebiliriz. Yan gezinme menüsündeki açık bağlantı daha net bir şekilde işaretlenebilir.
Başlıktaki 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 işaretlenebilir. Open link öğ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 menüsündeki kapat bağlantısı daha net işaretlenebilir.
Kenar çubuğu kapatma bağlantısı öğesine title
ve aria-label
özelliklerini ekleyin:
<a href="#"></a>
<a href="#" title="Close Menu" aria-label="Close Menu"></a>
CSS
Öğeleri düzenleyin. Ana içerik ve yan gezinme menüsü, <body>
etiketinin doğrudan alt öğeleridir. Bu nedenle, başlangıç için bu öğeleri incelemek iyi bir fikirdir.
<body>
öğesinin alt öğeleri düzenleyebilmesi için css/sidenav.css
öğesine aşağıdaki CSS'yi ekleyin.
body {
display: grid;
grid: [stack] 1fr / min-content [stack] 1fr;
@media (max-width: 540px) {
& > :matches(aside, main) {
grid-area: stack;
}
}
}
Bu düzen temel olarak şunu söyler: Her şeyi içeren stack
adlı bir satır ve bu satırda 2 sütun oluşturun. Bu sütunlardan ikincisi de stack
olarak adlandırılmalıdır. 1. sütun, minimum içerik ihtiyaçlarına göre boyutlandırılmalıdır. 2. sütun ise kalan alanı alabilir.
Ardından, 540px
veya daha düşük bir kısıtlı görüntü alanındaysanız kenar gezinme çubuğu ve ana içerik öğelerini aynı satır ve sütuna yerleştirin. Böylece, öğeler 1x1 boyutunda bir ızgarada birbirinin üstünde olacak.
Bu duyarlı yığın oluşturma işlevini temel alarak, artık yan gezinme bölmesinin görünürlüğünü ve geçiş stilini değiştirmek için URL çubuğunun durumundan yararlanabiliyoruz.
<aside>
öğesini app/index.html
'te 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 hedeflemeyi kolaylaştırmak için kenar çubuğunu kontrol eden önemli öğelerin kimliklerini ekleyin. Öncelikle, kenar çubuğundaki açık bağlantıya 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>
'ün düzeni de düzenlidir. 2 alt öğesi vardır. <nav>
, kayan ve kağıda benzer görünümlü bileşen ve URL'yi #
değerine ayarlayan bir kapanış <a>
bağlantı öğesidir.
Bağlantı, kağıt kaydırma menüsünün sağ tarafında görünmez. Bu sayede kullanıcılar görsel bileşeni kapatmak için "tıklayarak kapatabilir".
css/sidenav.css
alanına aşağıdaki CSS'yi ekleyin:
#sidenav-open {
display: grid;
grid-template-columns: [nav] 2fr [escape] 1fr;
}
Oran ve adların burada çok hoş bir dokunuş olduğunu düşünüyorum. Burada ızgaranın öne çıkabileceği ve tasarımcıya çok fazla kontrol sağlayabileceği bir alan var.
Ardından, ana içeriği koşullu olarak yer paylaşımına eklemem ve belge kaydırıldığında konumumu korumam gerekir. Bu, position: sticky
ve bazı overscroll-behavior
için harika bir iş.
Yan gezinme menüsü 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, kenar çubuğunun görüntü alanı yüksekliğinde olmasını, dikey olarak kaydırılmasını ve kaydırma çubuğunu 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 menüsünü gizleyin. Aksi takdirde!
#sidenav-open
öğesine bir :target
sözde seçici ekleyin:
#sidenav-open {
@media (max-width: 540px) {
&:target {
visibility: visible;
}
}
}
Söz konusu öğenin ve URL çubuğunun kimliği aynı olduğunda visibility
değerini visible
olarak ayarlayın. Sayfayı kaydırdıktan sonra yan menüyü açın veya yan menü açıkken sayfayı kaydırmayı deneyin. Ne düşünüyorsunuz?
app/sidenav.css
dosyasının alt kısmına aşağıdaki CSS'yi 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çma ve kapatma düğmelerimizi hedefler, dokunma ve dokunma stillerini belirtir ve görüntü alanı 540px
veya daha büyük olduğunda düğmeleri gizler.
Biraz yaratıcılık sağlamak için, saygılı erişilebilirlik ile CSS dönüştürmeleri ekleyelim.
css/sidenav.css
adlı kampanyaya şu CSS'yi 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;
}
}
JavaScript ekleyin
Escape
tuşu menüyü kapatır. Aşağıdaki 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 komut, yan gezinme öğesindeki bir önemli etkinliği dinler.
Değer Escape
ise URL karması boş olarak ayarlanır ve kenar çubuğu geçişi sonlandırılır.
UX JS'nin bir sonraki bölümü ise odak yönetimidir. Açma ve kapatmayı kolaylaştırmak istediğim için, kenar çubuğu bir tür geçişi tamamlayana kadar beklerim, ardından açık olup olmadığını belirlemek için URL karmasıyla çapraz kontrol yaparım. Ardından, kullanıcının bastığı düğmenin tamamlayıcısı olan düğmeye odaklanmak için JavaScript'i kullanırım.
js/index.js
alanına aşağıdaki JavaScript'i 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, ardından Tam Ekran'a basın.
Sonuç
Bileşenle ilgili ihtiyaçlarımızı özetledik. Bu kodu temel alıp URL yerine JavaScript durumuyla çalıştırabilir ve genel olarak kendi kullanımınıza uygun hale getirebilirsiniz. Her zaman ekleyebileceğiniz daha fazla özellik veya ele alabileceğiniz daha fazla kullanım alanı vardır.
Bu bileşene uyguladığım düzenle ilgili olmayan stillere göz atmak için css/brandnav.css
öğesini açın. Odaklandığım özellik kümesi için bunun önemli olmadığını düşünüyordum ve stilleri düzenden ayırmanın
kopyalama ve yapıştırmayı teşvik edeceğini umuyordum. Buradan daha fazla bilgi edinebilirsiniz.
Kaydırılabilir duyarlı yan gezinme bileşenlerini nasıl oluşturursunuz? Hiç var mı? Örneğin, iki tarafta birden fazla olanlar var mı? Çözümünüzü bir YouTube videosunda paylaşmak isterim. Bana tweet atarak veya YouTube'da kodunuzu paylaşarak bu konuda herkese yardımcı olabilirsiniz.