Menüyü bir CSS seçicisinde gösterin

Nasıl yapılır kılavuzu Tüm planlar 2 dk okuma

Uygulama menünüzü eşleşen her öğenin içine yerleştirir ve içeriğinin yerini alır. Otomatik olarak değiştir ve Mevcut menüyü değiştir seçeneklerinin çalışmadığı özel veya büyük ölçüde düzenlenmiş temalarda, belirli bir konum için ya da yalnızca masaüstü veya yalnızca mobil menüler için kullanın.

Not

Uygulama bu seçeneği geliştiricilere veya diğer seçenekler çalışmadığında önerir. CSS seçicileri konusunda kendinizi rahat hissetmiyor musunuz? Bize ulaşın, menüyü sizin için ücretsiz kuralım.

CSS seçicilerini ayarlayın

1. Menüyü bu CSS seçicisinde göster’i seçin

   Menü düzenleyicide sol çubuktaki Ayarlar sekmesine tıklayın. Konum altında Menüyü bu CSS seçicisinde göster’i seçin.

   

   İki seçici alanıyla Menüyü bu CSS seçicisinde göster

2. Seçicileri girin

   Ayarlar bölümünde açıklanan iki alanı doldurun. Gri #SiteNav ve #AccessibleNav kaydedilmiş değerler değil, yer tutuculardır.

3. Kaydedin ve yayınlayın

   Kaydet’e tıklayın, ardından menüyü yayınlayın. Mağazanızı masaüstünde ve mobilde kontrol edin.

Ayarlar

Ana menünüzün CSS seçicisi

Masaüstü menünüzü içeren öğe, örneğin #SiteNav, .header__inline-menu veya nav.main-menu. Menüyü yalnızca mobilde göstermek için boş bırakın.

Mobil menünüzün CSS seçicisi

Mobil menünüzü içeren öğe, örneğin #AccessibleNav veya .menu-drawer. Temanızın mobil menüsünü korumak için (yalnızca masaüstü) boş bırakın.

• Birden fazla öğe: Seçicileri virgülle ayırın, örneğin .header__inline-menu, .sticky-header nav. Menü her eşleşmenin içine yerleşir.
• Her iki düzen için tek öğe: Her iki alana da aynı seçiciyi girin. Uygulama, ekran boyutuna göre masaüstü ve mobil düzen arasında geçiş yapar.
• Tek bir bağlantıyı değil, kapsayıcıyı seçin: Menünün tamamını saran öğeyi (genellikle bir <nav> veya <ul>) eşleştirin; aksi hâlde menü tek bir öğenin içine yerleşir.
• Kararlı seçicileri tercih edin: Kimlikler veya .header__inline-menu gibi tema sınıfları. body > div:nth-child(3) > … gibi otomatik oluşturulan seçiciler tema değiştiğinde bozulur.

Bir CSS seçicisi bulun

Alanların altındaki Menünüzün CSS seçicisini nasıl bulursunuz? bağlantısına da tıklayabilirsiniz.

1. Menüyü inceleyin

   Mağazanızı Chrome’da açın, menüye sağ tıklayın ve Inspect (İncele) seçeneğini seçin.

2. Menü kapsayıcısını bulun

   Elements panelinde etiketlerin üzerine gelin. Vurgusu menünün tamamını kaplayan en yakın <nav> veya <ul> öğesini bulun.

3. Seçiciyi kopyalayın

   # ve ardından id değerini (#SiteNav) ya da . ve ardından anlaşılır bir sınıfı (.header__inline-menu) kullanın. Aksi hâlde etikete sağ tıklayın, Copy > Copy selector seçeneğini seçin ve uygulamaya yapıştırın.

4. Mobil için tekrarlayın

   DevTools’ta cihaz simgesine tıklayın, bir telefon seçin ve mobil menüyü (hamburger simgesi) açın. Mobil seçiciyi almak için tekrarlayın.

İpucu

Bir seçiciyi kaydetmeden önce test edin: DevTools Console bölümünde document.querySelectorAll('your-selector') komutunu çalıştırın. Boş bir liste seçicinin yanlış olduğu anlamına gelir.

Menüyü temanızda hiç menü olmayan bir yerde mi istiyorsunuz? Bkz. Özel bir menü konumu ekleyin.

İlgili sayfalar

• Özel bir menü konumu ekleyinTema koduna kendi kapsayıcınızı ekleyerek menüyü tam istediğiniz yerde gösterin.
• Masaüstü ve mobil için farklı menüler kullanabilir miyim?Masaüstünde bir menü, mobilde başka bir menü gösterin veya bazı öğeleri cihaza göre gizleyin.
• Menüm mağazamda neden görünmüyor?Menü mağazanızda yoksa veya yanlış görünüyorsa adım adım kontrol listesi.

Bu sayfa yardımcı oldu mu?

Sorun bildir