Elementor’da kullanıcı deneyimi ve SEO odaklı müthiş bir mobil menü nasıl yapılır diye düşündüm ve sizin için tek tek işlemleri yazdım.
Bu hafta daha önce görmediğiniz müthiş bir mobil menü ile karşınızdayım. Standart mobil menülerden veya gereksiz eklenti yükünden sıkıldıysanız, bu yazı tam size göre. Hem de kullanıcı deneyimi zirvede!
1. AŞAMA: PHP kodunu ekleme
Fluent Snippets eklentisi ile
WordPress panelinden → Fluent Snippets → Add New Snippet.
Snippet adını yaz (örneğin: Drilldown Menü Shortcode).
Snippet türünü PHP olarak seç.
Aşağıdaki kodu oraya yapıştır
Snippet’ı aktif et.
function drilldown_mobile_menu_shortcode($atts) {
// Mevcut atts'e height ekleyelim
$atts = shortcode_atts(array(
'menu' => 'Main Menu',
'height' => '400px'
), $atts);
// Menü ismini yukarıda ve aşağıda kendi menünüze göre değiştirin. Benimki Main Menu
$menu_name = isset($atts['menu']) ? sanitize_text_field($atts['menu']) : 'Main Menu';
// Menü ID'sini bul
$menu_obj = get_term_by('name', $menu_name, 'nav_menu');
if (!$menu_obj) {
$menu_obj = get_term_by('slug', $menu_name, 'nav_menu');
}
if (!$menu_obj) {
return '
Menü bulunamadı: ' . esc_html($menu_name) . '
';
}
// Menü öğelerini al
$menu_items = wp_get_nav_menu_items($menu_obj->term_id);
if (!$menu_items) return '
Menü öğeleri bulunamadı.
';
// Menü öğelerini hiyerarşik hale getir
$menu_array = array();
$child_items = array();
// Önce tüm alt öğeleri grupla
foreach ($menu_items as $item) {
if ($item->menu_item_parent == 0) {
// Ana menü öğesi
$menu_array[$item->ID] = array(
'id' => $item->ID,
'title' => $item->title,
'url' => $item->url,
'children' => array()
);
} else {
// Alt menü öğesi
$child_items[$item->menu_item_parent][] = array(
'id' => $item->ID,
'title' => $item->title,
'url' => $item->url,
'parent' => $item->menu_item_parent
);
}
}
// Alt öğeleri ana menü öğelerine ekle
foreach ($child_items as $parent_id => $children) {
if (isset($menu_array[$parent_id])) {
$menu_array[$parent_id]['children'] = $children;
}
}
// HTML çıktısını oluştur - container class'ını güncelle
$output = sprintf(
'',
esc_attr($atts['height'])
);
$output .= '
Yeni bir JS snippet oluştur, örneğin Drilldown Menu Script.
JS kodunu buraya yapıştır.
Snippet’ın frontend’de çalışmasını sağla.
Snippet’ı aktif et.
document.addEventListener('DOMContentLoaded', function () {
initializeDrilldownMenu();
});
// Elementor için özel olay dinleyicisi
if (window.elementorFrontend) {
elementorFrontend.hooks.addAction('frontend/element_ready/widget', function() {
initializeDrilldownMenu();
});
}
function initializeDrilldownMenu() {
// Event listener'ları temizle ve yeniden ekle
const toggleButtons = document.querySelectorAll('.wd-drill-toggle');
const backButtons = document.querySelectorAll('.wd-drill-back-btn');
toggleButtons.forEach(btn => {
btn.removeEventListener('click', handleSubmenuToggle);
btn.addEventListener('click', handleSubmenuToggle);
});
backButtons.forEach(btn => {
btn.removeEventListener('click', handleGoBack);
btn.addEventListener('click', handleGoBack);
});
// Alt menüleri başlangıçta gizle
document.querySelectorAll('.wd-drill-submenu').forEach(submenu => {
submenu.style.visibility = 'hidden';
submenu.style.transform = 'translateX(100%)';
submenu.style.opacity = '0';
});
}
function handleSubmenuToggle(e) {
e.preventDefault();
e.stopPropagation();
console.log('Toggle clicked'); // Debug için
const submenu = this.nextElementSibling;
const parentLi = this.closest('.wd-drill-has-children');
if (submenu && parentLi) {
openSubmenu(submenu, parentLi);
}
}
function handleGoBack(e) {
e.preventDefault();
e.stopPropagation();
console.log('Back clicked'); // Debug için
const parentLi = this.closest('.wd-drill-submenu').closest('.wd-drill-has-children');
if (parentLi) {
closeSubmenu(parentLi);
}
}
function openSubmenu(submenu, parentLi) {
// Önce görünür yap
submenu.style.visibility = 'visible';
submenu.style.opacity = '1';
// Sonra transform uygula
requestAnimationFrame(() => {
submenu.style.transform = 'translateX(-100%)';
parentLi.classList.add('submenu-open');
});
}
function closeSubmenu(parentLi) {
const submenu = parentLi.querySelector('.wd-drill-submenu');
if (submenu) {
// Önce transform'u geri al
submenu.style.transform = 'translateX(100%)';
parentLi.classList.remove('submenu-open');
// Transition bittikten sonra gizle
submenu.addEventListener('transitionend', function handler() {
if (!parentLi.classList.contains('submenu-open')) {
submenu.style.visibility = 'hidden';
submenu.style.opacity = '0';
}
submenu.removeEventListener('transitionend', handler);
});
}
}
// Sayfa yüklendiğinde
document.addEventListener('DOMContentLoaded', initializeDrilldownMenu);
// Elementor için
if (window.elementorFrontend) {
elementorFrontend.hooks.addAction('frontend/element_ready/widget', initializeDrilldownMenu);
}
// Elementor popup için
document.addEventListener('elementor/popup/show', initializeDrilldownMenu);
3. AŞAMA: CSS kodunu ekleme
Fluent Snippets eklentisi ile
Fluent Snippets → Yeni Snippet → CSS
Ad: Drilldown Menü CSS
CSS kodunu buraya yapıştır.
Snippet’ı frontend için aktif et.
4. AŞAMA: Header'a icon ekleme
Header’ın en sağına bir SVG menü ikonu (hamburger) ekleyeceğiz. Hemen yanına bir off-canvas (popup) ekleyip, drilldown menüyü göstereceğiz. Ve ikonla bu off-canvas popup’ı bağlayacağız.
Kendi header şablonunu “Edit with Elementor” ile aç.
Header'ın en sağına Menü (Hamburger) İkonu Ekle
Sağda uygun bir sütuna ya da yeni bir sütun içine bir icon elementi ekleyip SVG yükle veya kütüphanede "bars" diye aratıp ekleyin.
5. AŞAMA: Header'a off-canvas ekleme
Elementlerde
Off-canvas diye aratıp hemen görseldeki gibi iconunsoluna widgetı ekliyoruz.
Off-canvas widgetine basıp "Mobile Menu" diye adlandırıyoruz.
Horizontal ve Vertical positionları kendinize göre ayarlayabilirsiniz.
Width ben ayarlamadım ama siz ayarlayabilirsiniz. Boş bırakabilirsiniz.
Custom Height kısmında vh seçip "100" yapıyoruz. Bu, alanın dikey olarak tamamını kullanmamızı sağlıyor.
Settings kısmını desktop moduna alıp "Slide in right" ve "Slide out right" yapıyoruz. Siz başka animasyonları da seçebilirsiniz.
Animation Duration s seçip "0,2" belirledim ben. Daha yüksek bir değer girerseniz yavaş açılır menü.
Son olarak style/biçem de overlay kapatabilirsiniz (tam ekran kullanıyorsanız / width belirlemediyseniz).
Bazen mobile moddayken "Animation" kısmı görünmeyebiliyor. Desktop moduna alıp düzenleyin.
6. AŞAMA: Off-canvasa menüyü ekleme
Shortcode widgetini off-canvas içindeki containera ekleyin. Yukarıda verdiğim shortcodeları kullanarak menüyü görebilirsiniz.
“Bu arada Jeffrey’in mobile menüsü de güzel. Onu da başka bir yazımda anlatacağım.”
Emirhan Kızıloğlu
@mrkiziloglu
Genelde WordPress menünün mobildeki dropdown halini kullanıyoruz. Fakat estetik olarak ilgimi çekmediği için size bu yepyeni drilldown menüyü sunuyorum.
Sonuç olarak
Kullanıcı dostu arayüz, mobil uyumluluk ve SEO dostu menü yapısıyla “drilldown mobile menu” sizi ve ziyaretçilerinizi memnun edecektir. Herhangi bir sorun yaşar veya bunu benim yapmamı isterseniz, iletişim sayfasından iletişime geçebilirsiniz.