🔥 0
💸 0
🎉 0
😍 0
😎 0
😊 0

İçerik şeması:

Elementor’da Mobil Menü Nasıl Yapılır?

Emirhan Kızıloğlu

19 Mayıs 2025

Paylaş
Tweet
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
				
					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 '<p>Menü bulunamadı: ' . esc_html($menu_name) . '</p>';
    }

    // Menü öğelerini al
    $menu_items = wp_get_nav_menu_items($menu_obj->term_id);
    if (!$menu_items) return '<p>Menü öğeleri bulunamadı.</p>';

    // 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(
        '<nav class="wd-drill-menu-container" style="min-height: %s;">',
        esc_attr($atts['height'])
    );
    $output .= '<ul class="wd-drill-menu">';
    
    foreach ($menu_array as $item) {
        $output .= drilldown_generate_menu_item($item);
    }
    
    $output .= '</ul>';
    $output .= '</nav>';

    return $output;
}

function drilldown_generate_menu_item($item) {
    $has_children = !empty($item['children']);
    
    $html = '<li class="wd-drill-item' . ($has_children ? ' wd-drill-has-children' : '') . '">';
    $html .= '<a href="' . esc_url($item['url']) . '">' . esc_html($item['title']) . '</a>';

    // Sadece alt menüsü olan öğelerde chevron göster
    if ($has_children) {
        $chevron_right = '<svg class="wd-drill-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
        $html .= '<button class="wd-drill-toggle" aria-label="Alt menüyü aç" type="button">' . $chevron_right . '</button>';
        
        $html .= '<ul class="wd-drill-submenu">';
        
        // Geri butonu - "Geri" 
        $chevron_left = '<svg class="wd-drill-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
        $html .= '<li class="wd-drill-back"><button type="button" class="wd-drill-back-btn">' . $chevron_left . ' Geri</button></li>';
        
        $html .= '<div class="wd-drill-submenu-content">';
        foreach ($item['children'] as $child) {
            $html .= drilldown_generate_menu_item($child);
        }
        $html .= '</div>';
        
        $html .= '</ul>';
    }

    $html .= '</li>';
    return $html;
}

// Shortcode kaydı: <nav class="wd-drill-menu-container" style="min-height: 400px;"><ul class="wd-drill-menu"><li class="wd-drill-item"><a href="https://emirhankiziloglu.com/">Ana sayfa</a></li><li class="wd-drill-item wd-drill-has-children"><a href="https://emirhankiziloglu.com/hizmetler/">Hizmetler</a><button class="wd-drill-toggle" aria-label="Alt menüyü aç" type="button"><svg class="wd-drill-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button><ul class="wd-drill-submenu"><li class="wd-drill-back"><button type="button" class="wd-drill-back-btn"><svg class="wd-drill-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> Terug</button></li><div class="wd-drill-submenu-content"><li class="wd-drill-item"><a href="https://emirhankiziloglu.com/hizmetler/wordpress-site-kurulumu/">WordPress Site Kurulumu</a></li></div></ul></li><li class="wd-drill-item wd-drill-has-children"><a href="https://emirhankiziloglu.com/blog/">Blog</a><button class="wd-drill-toggle" aria-label="Alt menüyü aç" type="button"><svg class="wd-drill-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button><ul class="wd-drill-submenu"><li class="wd-drill-back"><button type="button" class="wd-drill-back-btn"><svg class="wd-drill-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> Terug</button></li><div class="wd-drill-submenu-content"><li class="wd-drill-item"><a href="/eklentiler">WordPress Eklentileri</a></li></div></ul></li></ul></nav>
add_shortcode('drilldown_menu', 'drilldown_mobile_menu_shortcode');
				
			
Varsayılan Shortcode:
				
					<nav class="wd-drill-menu-container" style="min-height: 400px;"><ul class="wd-drill-menu"><li class="wd-drill-item"><a href="https://emirhankiziloglu.com/">Ana sayfa</a></li><li class="wd-drill-item wd-drill-has-children"><a href="https://emirhankiziloglu.com/hizmetler/">Hizmetler</a><button class="wd-drill-toggle" aria-label="Alt menüyü aç" type="button"><svg class="wd-drill-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button><ul class="wd-drill-submenu"><li class="wd-drill-back"><button type="button" class="wd-drill-back-btn"><svg class="wd-drill-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> Terug</button></li><div class="wd-drill-submenu-content"><li class="wd-drill-item"><a href="https://emirhankiziloglu.com/hizmetler/wordpress-site-kurulumu/">WordPress Site Kurulumu</a></li></div></ul></li><li class="wd-drill-item wd-drill-has-children"><a href="https://emirhankiziloglu.com/blog/">Blog</a><button class="wd-drill-toggle" aria-label="Alt menüyü aç" type="button"><svg class="wd-drill-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button><ul class="wd-drill-submenu"><li class="wd-drill-back"><button type="button" class="wd-drill-back-btn"><svg class="wd-drill-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> Terug</button></li><div class="wd-drill-submenu-content"><li class="wd-drill-item"><a href="/eklentiler">WordPress Eklentileri</a></li></div></ul></li></ul></nav>
				
			
Menü Özelinde Shortcode:
				
					<nav class="wd-drill-menu-container" style="min-height: 400px;"><ul class="wd-drill-menu"><li class="wd-drill-item"><a href="https://emirhankiziloglu.com/">Ana sayfa</a></li><li class="wd-drill-item wd-drill-has-children"><a href="https://emirhankiziloglu.com/hizmetler/">Hizmetler</a><button class="wd-drill-toggle" aria-label="Alt menüyü aç" type="button"><svg class="wd-drill-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button><ul class="wd-drill-submenu"><li class="wd-drill-back"><button type="button" class="wd-drill-back-btn"><svg class="wd-drill-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> Terug</button></li><div class="wd-drill-submenu-content"><li class="wd-drill-item"><a href="https://emirhankiziloglu.com/hizmetler/wordpress-site-kurulumu/">WordPress Site Kurulumu</a></li></div></ul></li><li class="wd-drill-item wd-drill-has-children"><a href="https://emirhankiziloglu.com/blog/">Blog</a><button class="wd-drill-toggle" aria-label="Alt menüyü aç" type="button"><svg class="wd-drill-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button><ul class="wd-drill-submenu"><li class="wd-drill-back"><button type="button" class="wd-drill-back-btn"><svg class="wd-drill-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> Terug</button></li><div class="wd-drill-submenu-content"><li class="wd-drill-item"><a href="/eklentiler">WordPress Eklentileri</a></li></div></ul></li></ul></nav>
				
			

2. AŞAMA: Javascript kodunu ekleme

Fluent Snippets eklentisi ile
				
					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

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.
mobile-menu-1
Elementor Header'ı Aç
Header'ın en sağına Menü (Hamburger) İkonu Ekle

5. AŞAMA: Header'a off-canvas ekleme

Elementlerde

Off-canvas diye aratıp hemen görseldeki gibi iconun soluna widgetı ekliyoruz.

off-canvas-add
setting-off-canvas

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.
[related_plugins]