Mobil Menü (OffCanvas) Tasarım Modülü

OffCanvas Tasarım modülü, sitenizin mobil menüsünün (off-canvas menü) görünümünü tamamen özelleştirmenizi sağlar. Arkaplan rengi, menü seviyeleri, hover efektleri ve hamburger düğmesi gibi tüm görsel unsurları kod yazmadan, panel üzerinden kontrol edebilirsiniz. Modül kendisi herhangi bir içerik üretmez — yalnızca mevcut off-canvas menüye CSS tabanlı tasarım kuralları uygular.

✨ Öne Çıkan Özellikler

• Off-canvas menünün arkaplan rengini veya görseli ile üst boşluğunu ayarlayabilme
• Menü başlık alanının renk, boyut, hizalama ve kenarlık ayarları
• Menü iç alanının dört yönlü boşluk (margin) kontrolü
• Alt seviye menüler için,
  1. seviye menü linklerinin renk, boyut, kalınlık, kenarlık ve iç boşluk ayarları
  2. seviye menüde hover ve aktif durumu için ayrı renk tanımları
  3. seviye alt menü linklerinin boşluk, kenarlık, satır yüksekliği ve kalınlık ayarları
  4. seviye alt menüde hover ve aktif durumu için ayrı renk tanımları
• Hamburger düğmesinin ikon boyutu, renk, zemin, kenarlık ve köşe yuvarlaklığı ayarları
• Konum seçimi gerektirmez; siteye eklendiğinde otomatik çalışır

⚠️ Önemli: Modül Eklemeden Önce Mevcut CSS Temizliği

Bu modülü eklemeden önce, sitenizin CSS (Less) düzenleme ekranında #offCanvas { ... } bloğunu ve içindeki tüm satırları bulup silmeniz gerekir. Aynı şekilde #canvasToggle ile ilgili CSS kuralları varsa onları da kaldırın.

Bu adımı atlarsanız, şablondaki mevcut CSS kuralları ile modülün ürettiği CSS kuralları çakışır ve beklenmedik görünüm sorunları yaşarsınız. Modülün ayarları doğru çalışmayabilir veya bazı değerler şablondaki eski kurallar tarafından ezilir.

Yapmanız gereken:

1. Site yönetim ekranından Şablon Düzenle sayfasına gidin
2. CSS (Less) alanında #offCanvas ifadesini aratın
3. #offCanvas { ... } bloğunu ve bu seçiciye ait tüm alt kuralları (hover, menü seviyeleri dahil) silin
4. #canvasToggle ile başlayan kurallar varsa onları da silin
5. Kaydet butonuna basın

Bu işlem bir kez yapıldıktan sonra, off-canvas menünün tüm görünüm kontrolü bu modüle devredilmiş olur.

🚀 Başlarken

Bu modülü kullanabilmek için aktif bir sitenizin olması yeterlidir. Sitenizde off-canvas menü zaten mevcut yapıda bulunur — bu modül o menünün görünümünü özelleştirir. Modül herhangi bir görsel içerik veya HTML çıktısı üretmez; yalnızca CSS kuralları oluşturur.

🖥️ Modül Ekleme

1. Paneldeki site yönetim ekranından Modül Ekle akışını başlatın
2. Modül türü listesinden OffCanvas Tasarım (Mobil Menü) seçeneğini seçin
3. Bu modül konum seçimi gerektirmez; otomatik olarak eklenir
4. Modül düzenleme sayfasına yönlendirileceksiniz

📢 Tüm Sayfalarda Yayınlama

Off-canvas menü her sayfada görünebildiğinden, tasarım kurallarının tüm sayfalarda geçerli olması için modülü tüm sayfalarda yayınlamanız önerilir.

1. Modül düzenleme sayfasında Yayınlandığı Sayfalar bağlantısına tıklayın
2. Açılan sayfada Tüm Sayfalarda Yayınla seçeneğini işaretleyin
3. Kaydet butonuna basın

Bu işlem bir kez yapıldıktan sonra, siteye eklenen yeni sayfalar dahil tüm sayfalarda off-canvas menü tasarımınız otomatik olarak aktif olacaktır.

🎨 Genel Ayarlar

Modül ayarlarının ilk bölümünde off-canvas menünün genel görünümünü belirlersiniz:

Arkaplan

Menünün arkaplan rengini, gradyanını veya görselini tanımlayın. Renk seçici açılır penceresi üzerinden RGB/RGBA renk, CSS gradyan veya görsel URL'si girebilirsiniz. Koyu tonlar, menü öğelerinin okunabilirliği için önerilir.

Üst Boşluk (px)

Menü içeriğinin üst kenardan ne kadar aşağıda başlayacağını piksel cinsinden belirler. Değer aralığı: 0 ile 200 piksel arası.

🏷️ Modül Başlığı Ayarları

Off-canvas menüdeki modül başlık alanının (.modul-baslik) görünümünü özelleştirir. Menü içindeki modüllerin başlık metinleri bu ayarlardan etkilenir.

Başlık Rengi

Başlık metninin rengini belirler. Varsayılan değer beyazdır (rgba(255,255,255,1)). Arkaplan renginize uygun kontrastlı bir renk seçmeniz önerilir.

Başlık Font Boyutu

Başlık metninin boyutunu rem cinsinden belirler. Maksimum 4rem değerine kadar ayarlanabilir.

Başlık Hizalama

Başlık metninin yatay hizalamasını belirler:

• Sol — Metin sola hizalanır
• Orta — Metin ortalanır (varsayılan)
• Sağ — Metin sağa hizalanır

Başlık Dönüştürme

Başlık metninin büyük/küçük harf dönüşümünü belirler:

• Normal — Girilen metin olduğu gibi görünür
• BÜYÜK HARF — Tüm harfler büyük yazılır
• küçük harf — Tüm harfler küçük yazılır
• İlk Harf Büyük — Her kelimenin ilk harfi büyük yazılır

Başlık Alt Boşluk (px)

Başlığın altındaki boşluğu piksel cinsinden belirler. Değer aralığı: 0 ile 60 piksel arası.

Başlık Alt Kenarlık

Başlığın altına çizgi ekler. Kenarlık seçici açılır penceresi üzerinden çizgi kalınlığı, stili ve rengini belirleyebilirsiniz (örn. 1px solid rgba(255,255,255,0.3)).

📐 Modül İç Alan Ayarları

Menü içindeki modüllerin iç alanı (.modul-ic) için dört yönlü boşluk değerlerini ayarlar:

• Üst Boşluk (px) — İç alanın üstündeki boşluk (0–120 px)
• Sağ Boşluk (px) — İç alanın sağındaki boşluk (0–40 px)
• Alt Boşluk (px) — İç alanın altındaki boşluk (0–120 px)
• Sol Boşluk (px) — İç alanın solundaki boşluk (0–40 px)

Bu değerler, menüdeki modül içeriklerinin menü kenarlarına olan mesafesini kontrol eder. Sıfır değeri vermek ilgili yöndeki boşluğu tamamen kaldırır.

🔗 1. Seviye Menü Linkleri

Ana menü öğelerinin görünümünü kontrol eden ayarlar:

Link Rengi

1. seviye menü linklerinin metin rengini belirler. Varsayılan değer açık gridir (rgba(221,221,221,1)). Arkaplan renginize göre kontrastlı bir renk seçin.

Font Boyutu

Menü linklerinin boyutunu rem cinsinden belirler. Maksimum 4rem.

Font Kalınlığı

Menü linklerinin kalınlığını belirler. Değer aralığı: 100 (en ince) ile 900 (en kalın) arası. Yaygın değerler: 400 (normal), 600 (yarı kalın), 700 (kalın).

Alt Kenarlık (Ayırıcı Çizgi)

Menü öğeleri arasına ayırıcı çizgi ekler. Kenarlık seçici üzerinden çizgi stilini belirleyebilirsiniz. Menü öğelerini görsel olarak birbirinden ayırmak için kullanışlıdır.

İç Boşluk (px)

Her menü linkinin etrafındaki iç boşluğu piksel cinsinden belirler. Değer aralığı: 0 ile 30 piksel arası. Daha büyük değerler menü öğelerini daha geniş ve tıklanabilir hale getirir.

🖱️ 1. Seviye Hover / Aktif Durumu

Ziyaretçi menü öğesinin üzerine geldiğinde veya aktif sayfadayken görünecek renkleri belirler:

Hover Yazı Rengi

Üzerine gelindiğinde link metninin alacağı renk. Boş bırakırsanız hover'da renk değişmez.

Hover Zemin Rengi

Üzerine gelindiğinde link arkaplanının alacağı renk. Menü öğesinin vurgulanmasını sağlar. Boş bırakırsanız zemin rengi değişmez.

📂 2. Seviye Alt Menü

Ana menü öğelerinin altındaki alt menü bölümünün görünümünü kontrol eden ayarlar:

Dikey İç Boşluk (px)

Alt menü bloğunun üst ve alt iç boşluğunu piksel cinsinden belirler. Değer aralığı: 0 ile 30 piksel arası.

Sol Boşluk (px)

Alt menü öğelerinin sol kenara olan girintisini belirler. Değer aralığı: 0 ile 40 piksel arası. Alt menüyü ana menüden görsel olarak ayırt etmek için 15–25 piksel arası önerilir.

Sol Kenarlık (Dikey Çizgi)

Alt menünün soluna dikey bir ayırıcı çizgi ekler. Kenarlık seçici üzerinden çizgi stilini belirleyebilirsiniz (örn. 2px solid rgba(255,255,255,0.2)). Alt menünün hiyerarşik yapısını görsel olarak vurgular.

Satır Yüksekliği (px)

Alt menü linklerinin satır yüksekliğini piksel cinsinden belirler. Değer aralığı: 20 ile 60 piksel arası. Daha küçük değerler daha kompakt bir alt menü oluşturur.

Font Kalınlığı

Alt menü linklerinin kalınlığını belirler. Değer aralığı: 100 ile 900 arası. Ana menüden daha ince bir değer (örn. 300 veya 400) kullanarak hiyerarşiyi vurgulamanız önerilir.

🖱️ 2. Seviye Hover / Aktif Durumu

Alt menü öğelerinde hover ve aktif durumunun görünümünü belirler:

Hover Yazı Rengi

Üzerine gelindiğinde alt menü linkinin alacağı metin rengi. Boş bırakırsanız hover'da renk değişmez.

Hover Zemin Rengi

Üzerine gelindiğinde alt menü linkinin arkaplan rengi. Boş bırakırsanız zemin rengi değişmez.

☰ Hamburger Düğmesi Ayarları

Mobil görünümde menüyü açan hamburger düğmesinin (☰ ikonu) görünümünü özelleştirir:

İkon Boyutu

Hamburger ikonunun boyutunu rem cinsinden belirler. Maksimum 6rem. Varsayılan boyut genellikle yeterlidir; sitenizin header yüksekliğine göre ayarlayabilirsiniz.

İkon Rengi

Hamburger ikonunun rengini belirler. Header arkaplanınıza göre kontrastlı bir renk seçmeniz önerilir.

Zemin Rengi

Hamburger düğmesinin arkaplan rengini belirler. Şeffaf bırakmak isterseniz bu alanı boş bırakın.

Kenarlık

Düğmenin etrafındaki kenarlığı belirler. Kenarlık seçici üzerinden çizgi kalınlığı, stili ve rengini ayarlayabilirsiniz. Kenarlık istemiyorsanız boş bırakın.

Köşe Yuvarlaklığı (px)

Düğmenin köşelerinin yuvarlaklık derecesini piksel cinsinden belirler. Değer aralığı: 0 ile 50 piksel arası. 0 değeri keskin köşeler, yüksek değerler yuvarlak köşeler oluşturur. Tam yuvarlak bir düğme için 50px kullanabilirsiniz.

Dikey İç Boşluk (px)

Düğmenin üst ve alt iç boşluğunu piksel cinsinden belirler. Değer aralığı: 0 ile 30 piksel arası.

Yatay İç Boşluk (px)

Düğmenin sağ ve sol iç boşluğunu piksel cinsinden belirler. Değer aralığı: 0 ile 30 piksel arası. Dikey ve yatay boşluğu eşit ayarlarsanız kare formlu bir düğme elde edersiniz.

💡 Kullanım Önerileri

Koyu Arkaplan ile Açık Menü Renkleri

En yaygın ve okunabilir tasarım kalıbı, koyu bir arkaplan (örn. koyu lacivert veya siyah) üzerine açık renk (beyaz veya açık gri) menü linkleri kullanmaktır. Bu kombinasyon hem şık görünür hem de yüksek kontrast sağlar.

Hiyerarşik Tasarım

1. seviye menü linklerini daha kalın ve büyük, 2. seviye alt menü linklerini daha ince ve küçük ayarlayarak menü hiyerarşisini görsel olarak vurgulayın. Alt menüde sol kenarlık çizgisi kullanmak hiyerarşiyi daha da belirgin kılar.

Hover Efektleri ile Etkileşim

Hover renkleri tanımlayarak ziyaretçilere tıklanabilir alanları gösterin. Özellikle hover zemin rengi kullanmak, menü öğelerinin etkileşimli olduğunu güçlü bir şekilde vurgular.

Hamburger Düğmesi Uyumu

Hamburger düğmesinin renk ve boyutunu sitenizin header tasarımıyla uyumlu tutun. Düğmenin kolay fark edilmesi önemlidir — header arkaplanından belirgin şekilde ayrışan bir renk seçin.

❓ Sık Sorulan Sorular

Off-canvas menü nedir? Off-canvas menü, mobil cihazlarda ekranın dışından kayan bir menü panalidir. Hamburger düğmesine (☰) tıklandığında açılır ve sayfanın yanından görünür. Bu modül, o menünün görünümünü özelleştirir.

Bu modül masaüstü menüyü etkiler mi? Off-canvas menü genellikle mobil görünümde aktif olur. Ancak sitenizin şablonu masaüstünde de off-canvas menü kullanıyorsa, bu ayarlar masaüstü görünümü de etkiler.

Modül sayfada görünür bir alan kaplar mı? Hayır. Bu modül tamamen görünmezdir; herhangi bir HTML çıktısı üretmez. Yalnızca CSS kuralları oluşturarak mevcut menünün görünümünü değiştirir.

Bir alanı boş bırakırsam ne olur? Boş bırakılan alanlar için herhangi bir CSS kuralı üretilmez. Bu durumda sitenizin şablonundaki varsayılan stiller geçerli olur. Yalnızca değiştirmek istediğiniz alanlara değer girmeniz yeterlidir.

Birden fazla OffCanvas Tasarım modülü ekleyebilir miyim? Teknik olarak eklenebilir, ancak önerilmez. Birden fazla modül aynı CSS seçicileri hedefleyeceğinden, beklenmedik üst üste yazma durumları oluşabilir. Tek bir modülle tüm ayarları yapmanız önerilir.

Yaptığım değişiklikleri nasıl önizlerim? Modül ayarlarını kaydettikten sonra sitenizin herhangi bir sayfasını mobil görünümde ziyaret edin ve hamburger düğmesine tıklayarak off-canvas menüyü açın. Değişiklikler anında görünür olacaktır.

Güncelleme Tarihi: 07.04.2026 12:51