FonPageBuilder Dahili Menü Bileşeni Son Güncelleme: 04-07-2026

Dahili Menü Bileşeni Nedir?

FonPageBuilder Dahili Menü Bileşeni ile web sitenizde yatay / dikey düzlemde sayfa içi ve/veya harici menüler oluşturabilirsiniz. Sayfa içi bölümlere id bazlı link vererek menüye tıklandığında sayfadaki ilgili bölüme yumuşak (smooth scroll) ve animasyonlu bir şekilde kaydırılmasını sağlayabilirsiniz.

Dahili Menü Bileşenini sayfanıza ekledikten sonra Bileşen Düzenleme Araçlarındaki Bileşeni Düzenle ögesine tıkladığınızda açılan Bileşen Düzenleme Penceresindeki ögelerin detaylarına aşağıda erişebilirsiniz.

Genel Ayarlar

• Bileşen Adı
  : Sitenizdeki her bir dil için bileşeninize bir isim verin. Bu isim bileşene göre değişmekle birlikte genelde sadece Yönetici bilgilendirmesi içindir. Yönetim Paneli FonPageBuilder sayfa düzenleme ekranınızdaki satır ve sütunlarda bileşen bu isimle gösterilecektir. Böylece yerleşim düzeninizdeki bileşeni doğru ve kolayca teşhis edebilir ve seçebilirsiniz.

Görsel: Dahili Menü Önizleme

İçerik Ayarları

Dahili Menü Bileşeni İçerik Ayarları bölümündeki Dahili Menü - Ögeler başlığının karşısındaki Ekle düğmesine tıklayarak birden fazla Menü ögesi ekleyebilirsiniz. İlk ögenin bir kopyası alınarak çoğaltılır. Eklediğiniz her bir ögenin başlığının karşısındaki simgeler aracılığıyla ögeyi; düzenleyebilir, sıralayabilir ve silebililirsiniz.

Dahili Menü Öge Düzenleme Penceresi:

• Başlık
  : Sitenizdeki her bir aktif dil için göstermek istediğiniz menü başlığını girin.
• Harici Link mi?
  : Menü ögesinin harici bir linki (sitenizdeki başka bir sayfa ve/veya site dışı bir link) yoksa aynı sayfadaki bir bölüme işaret eden sayfa içi bir link mi olduğunu belirtin.
• Link
  : Eğer menü ögesi

  1. Harici link değil ise; tıklandığında sayfa içerisindeki hangi bölüme kaydırılarak gidileceğini belirtmek için ilgili bölümün "id" bilgisinin başına "#" işareti ekleyerek girin. Bölüm oluşturmak ve Bölüm ID'si hakkında lütfen Satır (Bölüm) oluşturma ve Düzenleme dokumantasyonunu inceleyin.
  2. Harici link ise; sitenizdeki aktif her bir dil için menü ögesine tıklandığında kullanıcıları yönlendirmek istediğiniz sayfa url adresini girin.
• Link Hedefi
  : Menü ögesine tıklandığında hedef adresin yeni pencerede mi yoksa mevcut pencerede mi açılacağını belirtin. Bu seçenek sadece harici linkler için geçerlidir.

  • _self : Aynı Tarayıcı Penceresi
  • _blank : Yeni Tarayıcı Penceresi
• Simge Göster
  : Menü ögesi için simge gösterilip gösterilmeyeceğini seçin.
• Simge
  : Menü ögesinde göstermek istediğiniz FontAwesome simgesini seçin. Bu alan, "Simge Göster" seçeneği etkinleştirilmişse gösterilir.

Bileşen Seçenekleri

• Menüyü Göster/Gizle
  : Dahili menüyü responsive olarak hangi ekran boyutlarında göstermek ve/veya gizlemek istediğinizi seçin.
• Sabitliği Etkinleştir
  : Sayfa aşağıda kaydırıldığında dahili menünün site üst kısmında sabit olarak kalıp kalmayacağını belirtin.
• Menü Tipi
  : Dahili menü gösterim tipini seçin.

  1. Yatay: Yatay Menü Gösterir
  2. Dikey: Dikey Menü Gösterir
• İçerik Hizalama
  : Menü öğelerinin nasıl hizalanacağını seçin. Bu seçenek sadece Yatay menü için geçerlidir.

  1. Sol: Menü sola hizalanır
  2. Orta: Menü ortaya hizalanır
  3. Sağ: Menü sağa hizalanır
• Son Ögeyi Ayır
  : Menü son ögesinin diğer menü ögelerinden ayrı gösterilip gösterilmeyeceğini seçin. Bu seçenek sadece "Sağa/Sola" hizalanmış "Yatay" menü tipi için geçerlidir. Sola hizalanan menüde son menü ögesi sağa, Sağa hizalanan menüde ilk menü ögesi sola hizalanır.

Bileşen Stil Ayarları

• Sınıf
  : Bileşen için özel CSS sınıfı/sınıfları tanımlamak isterseniz burayı kullanabilrsiniz. Daha sonra CSS stil dosyanızdan ilgili sınıf ile ilgili biçimlendirmeleri buraya başvurarak gerçekleştirebilirsiniz. Örneğin:light-grey-rounded-box
• Dahili Stil
  : Bileşen için css biçimlendirmesini harici tema css dosyalarınız yerine doğrudan bu alana yazacağınız css kodu ile gerçekleştirebilirsiniz. Eklediğiniz css biçimlendirmesini sadece bu bileşen için aktif olmasını ve aynı css sınıfına sahip olan sayfadaki diğer ögeleri etkilememesini istiyorsanız stil kodunuz içerisinde @widgetId ibaresinden sonra stil kodunuzu ekleyebilirsiniz. @widgetId önyüzde, sistem tarafından otomatik oluşturulurulan id ile değiştirilir. Domain Arama Modülünün içerisinde biçimlendirebileceğiniz css sınıflarını, site önyüzünüzde bileşenin bulunduğu sayfadayken Tarayıcınızda F12 - Geliştirici araçlarından Code Inspection ile .fon-domain-widget css sınıfı altından inceleyebilirsiniz.

  												
  @widgetId .light-grey-rounded-box{
  	background-color: #f8f9fa;
  	border: 1px solid #e9ecef;
  	border-radius: 5px;
  }
  												
  											

Bileşen Penceresi Kayıt Düğmeleri

• Sayfayı Kaydet
  : Bileşende gerçekleştirdiğiniz değişiklikler ve sayfada gerçekleştirdiğiniz tüm değişiklikler veritabanına kaydedilir ve aktif Bileşen Düzenleme Penceresi kapatılır.
• Kaydet & Düzenle
  : Bileşende gerçekleştirdiğiniz değişiklikler bileşen kodu içerisine kaydedilir ve aktif Bileşen Düzenleme Penceresi kapatılır. Sayfanızda yaptığınız değişikler henüz kaydedilmemiştir. Sayfanızı kaydetmek için mutlaka sayfanın sağ kenarında bulunan MENU çubuğu altından Kaydet düğmesine tıklamanız gerekir.