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>
öğesinin tamamlayıcısı 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.
Ancak iyileştirmek için yapabileceğimiz daha çok şey var.
Ana içerik öğesine, sayfa düzeni içeriğini anlamsal olarak barındıracak bir başlık ve bir 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üyü açma bağlantısı bulunur. 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. 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 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 az boyuta sahip kısıtlanmış bir görüntü alanındaysanız kenar çubuğu ve ana içerik öğelerini aynı satıra ve sütuna yerleştirin. Bu sayede, öğeler 1x1 ızgara şeklinde üst üste gelir.
Temel olarak bu duyarlı yığın işlevini kullanarak artık URL çubuğunun durumunu kullanarak kenar çubuğu'nun görünürlüğünü ve geçiş stilini değiştirebiliriz.
<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: kaydırılarak açılan kağıda benzeyen bir bileşen olan <nav>
ve URL'yi #
olarak ayarlayan bir kapatıcı <a>
bağlantı öğesi.
Bağlantı, kağıt kaydırmalı gezinme menüsünün sağı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 gerekiyor. 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 :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
öğesinin 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çık ve kapalı düğmelerimizi hedefler, dokunma ve dokunma stillerini belirtir ve görüntü alanı 540px
veya daha büyük olduğunda bunları gizler.
Bir miktar stilde değişiklik yapmak için erişilebilirliğe uygun CSS dönüşümleri ekleyelim.
css/sidenav.css
alanına aşağıdaki 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, sidenav öğesinde önemli bir etkinliği bekler.
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 parçası, 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 stilleri kontrol etmek için css/brandnav.css
dosyasını açın. Odaklandığım özellik grubu için önemli olmadığını düşünüyordum ve stilleri düzenden ayırmanın kopyalamayı 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? Her iki tarafta da bir tane olmak üzere birden fazla cihazınız 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.