Bir Slayt-Out menüsü oluşturun

Sep 13, 2025

Nasıl Yapılır

Geliştirmek için harika bir yol kullanıcı deneyimi Sitenizde bir kaydırıcı menü eklemek; Kullanıcıların istediklerini bulmaları için göz alıcı bir yol yaratır - sayfada nerede olursa olsun - ve üst NAV'ye geri dönmek zorunda kalmadıkları anlamına gelir.

Biz özellikle sitedeki slayt-out menüsünü seviyorum Dondurma salonu kozmetik , tarafından tasarlandı Hiroka Hasgawa (İstediğiniz siteleri görürseniz, onları kaydettiğinizden emin olun. Bulut depolama Ilham almak için). Bu kaydırma etkisinin kendi web sitenizdeki nasıl çoğaltılacağını öğrenmek için okuyun. İzlenim bırakan bir web sitesi oluşturmak için istekli mi? Doğru ağ sağlayıcısı hizmet veya Web Sitesi Oluşturucu Sadece bunu yapacağım.

01. Belge Başlangıcı

İlk adım, sayfa belgesini tanımlamaktır. Bu, baş ve gövde bölümünü içeren web sayfasını temsil eden bir HTML kabından oluşur. Kafa bölümü, harici CSS ve JavaScript kaynaklarını yüklemek için kullanılırken, gövde bölümü # 2 adımında oluşturulan görünür sayfa içeriğini saklamak için kullanılır.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; unvanı ve gt; menüsünü yukarı kaydırın; / unvan & gt;
& l la link rel = "StyleSheet" Type = "Metin / CSS" Media = "Ekran" href = "styles.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script;
/ head & gt;
& lt; vücut ve gt;
*** 2. adım burada
& lt; / body & gt;
& lt; / html & gt;

02. Sayfa İçeriği

Sayfa içeriği, bir navigasyon kabı ile birlikte bir başlıktan oluşur. Bu navigasyon bir dizi bağlantıyı saklar ve bir 'veri eylemi' niteliği atandı. Konteynere ve elemanlarına stil ve işlevsellik uygulamak için JavaScript ve CSS tarafından kullanılacak olan bu özelliktir.

03. CSS Başlatma

HTML şimdi tamamlandı, bu yüzden sunum biçimini başlatmak için 'styles.css' adlı yeni bir dosya oluşturun. Bu adım, HTML belgesini ve vücudunu, siyah bir arka plan ile birlikte görünür bir sınır aralığına sahip olmamak için ayarlar. Renk, içerik metninin devralması için varsayılan renk olarak beyaz olarak ayarlanır.

 html, vücut {
  Ekran bloğu;
  Genişlik:% 100;
  Yükseklik:% 100;
  Arka plan: # 000;
  Renk: #FFF; }

04. Gezinme Kurulumu

Navigasyon, sabit konumlandırma ile ve her şeyin üzerinde bir Z endeksiyle görüntülemektir, böylece kullanıcının nereye kaydırdığı yerden bağımsız olarak tam ekranı kapsayacak şekilde görünebilir. Başlangıçta, ekranın görünür görünüm alanının sol tarafındaki görüş dışında konumlandırılmıştır. Bir saniyenin içindeki değişiklikleri canlandırmak için bir geçiş kuralı uygulanır.

 nav {
  Ekran bloğu;
  Konum: Sabit;
  Kutu boyutlandırma: sınır kutusu;
  Üst: 0;
  Sol: -100vw;
  Z-index: 9999;
  Dolgu: .5EM 1EM .5EM 1EM;
  Genişlik: 100vw;
  Yükseklik: 100vh;
  Metin Hizası: Merkez;
  Arka plan: Kırmızı;
  Geçiş: Tüm 1s; }

05. nav aç ve simgesi

Navigasyonun sol konumu, bir önceki adımda tanımlanan animasyonlu geçişi tetiklediğinde, 'açık' bir sınıf uygulandığında sıfıra ayarlanır. Navigasyonun ilk çocuğu, ekranın sol tarafının ortasında her zaman görünür kalmak için sabit konumlandırmayı kullanan Genişletme simgesidir.

 nav.open {
  Sol: 0;
}
NAV *: First-Child {
  Konum: Sabit;
  Dolgu: 1EM;
  İmleç: İşaretçi;
  Sol: 0;
  Üst: 50vh;
  ikisini de temizle; }

06. Navigasyon bağlantıları

Gezinti kabının içindeki her bir bağlantı bağlantısı, varsayılan metnin boyutunun dört katı olarak ayarlanmıştır. Renkleri siyah olarak ayarlanır, dikey aralığın görülebilmesi için üstlerine bir marjla uygulanır. Ekranlarını 'blok' olarak ayarlamak, her bağlantının otomatik olarak dikey olarak istiflendiği görünmesini sağlar.

 nav a {
  Ekran bloğu;
  Yazı tipi boyutu: 4EM;
  Renk: # 000;
  Yazı Tipi-Ailesi: Arial;
  Metin Dekorasyonu: Yok;
  Marj-Top: .2EM;
}

07. JavaScript Dinleyici

'Code.js' adlı yeni bir dosya oluşturun. Bu adım, sayfanın yükleninceye kadar, 'Data-eylemi' niteliği 'Genişlet' olarak ayarlanan 'Veri-Eylem' özniteliğinin ilk çocuğunu aramaya kadar bekler. Bu ilk çocuk, açık simgesi olan, bir 'açık' sınıfın uygulanmasını veya 'açık' bir sınıfa sahip olmasını ya da olmayan bir 'açık' sınıfa sahip olmasını sağlayan bir 'tıklama' olay dinleyicisi var.

 window.addeventlistener ("yük", işlev () {
  var düğümleri = document.queryselectorall ('nav [veri-eylem = "genişlet"] *: ilk çocuk');
  için (var i = 0; i & lt; nodes.length; i ++) {
  Düğümler [i].addeventListener ("Tıkla", işlevi () {
  if (this.parentnode.classname == "açık") this.parentnode.classname = "";
  başka this.parentnode.classname = "açık";
  });
  }
});
***

Bu makale başlangıçta yaratıcı web tasarım dergisi web tasarımcısının 274 sayısında yayınlandı. Sayı 274 burada satın al veya Burada web tasarımcısına abone olun .

İlgili Makaleler:

Üst Web Navigasyon Eğilimleri
10 Büyük Kullanıcı Deneyimi Kuralları
Sitenize görsel ipuçları ekleyin

Bir Slayt-Out menüsü oluşturun

01. Belge Başlangıcı

02. Sayfa İçeriği

03. CSS Başlatma

04. Gezinme Kurulumu

05. nav aç ve simgesi

06. Navigasyon bağlantıları

07. JavaScript Dinleyici

Nasıl Yapılır - En Popüler Makaleler

WordPress'i görsel bir inşaat haline getirme

CSS özel özelliklerine bir giriş

CSS Gridli Moda Esnek Düzenler

CSS ekran özelliğini anlama

Duyarlı ve cihaz-agnostik formların nasıl tasarlanması

Web Geliştirmede Markdown Nasıl Kullanılır

InDesign'da bir kitap kapağı nasıl tasarlanır

Doku bir otantik olarak yıpranmış bir K-2O droid

Kategoriler