Mega menu

[Edward Ver]

Hello,

I'm new to ProcessWire and I love using it so far. Using Runway CMS for years, It's simply easy to use both for myself and the client.

I'm almost finish with a project, but stuck on the menu. I'm not good in PHP, so I will need a bit of help.

My menu structure:

Home 
 - Laser treatment 
   -- Acne
   -- Etc...     
 - Contact us

HTML:

    <nav class="menu">

        <ul>

            <!-- If the menu has child -->

                <li class="menu-item-has-children">

                    <!-- notice the href="#" below with no real url value -->

                    <a href="#" class="menu_link ">treatments<i class="icon-chevron-down"></i></a>

                        <div class="sub-menu mega-menu">

                            <div class="list-item">

                                <ul>

                                    <li>

                                        <a href="/laser-treatment/acne-kviser">Acne</a>

                                    </li>

                                </ul>

                            </div>

                        </div>

 

                </li>

                    <!-- If the menu has no child -->

                    <li>

                    <a href="/contact-us">Contact us</a>

                    </li>

        </ul>

    </nav>

I have tried menuBuilder, But it does not meet my menu structure. As well as MarkupSimpleNavigation. 

Any help will be appreciated...

Thanks in advance

[Sanyaissues]

Hi @Edward Ver don't worry, we are here to help you navigate PW!

Here's an example for the menu you asked for:

 

<?php

// Get the homepage
$home = pages()->get('/');

// Get the children of the homepage
$children = $home->children();

?>

<nav class="menu">
    <ul>

        <!-- Loop through each child of the homepage -->
        <?php foreach($children as $child): ?>    

            <li>
                <a href="<?= $child->url ?>" class="menu_link"><?= $child->title ?></a>

                <!-- Check if the child has sub-children -->

                <?php if($child->hasChildren()): ?> 

                    <ul class="sub-menu mega-menu">
                        
                        <!-- Loop through each sub-child -->
                        <?php foreach($child->children() as $subchild): ?>

                            <li class="menu-item-has-children">
                                <a href="<?= $subchild->url ?>"><?= $subchild->title ?></a>
                            </li>

                        <?php endforeach; ?>
                        
                    </ul>

                <?php endif; ?>

            </li>
                    
        <?php endforeach; ?>
    
    </ul>
</nav>

The code wasn't tested but it should work.
 

[Edward Ver]

Wow, The community of PW is awesome. Thank you Sanyaissues. I will try it later and give a feedback. Thank you so much again.

 

[Edward Ver]

Sadly, it did not work as expected. Sorry for the confusion, but i have added the classes.

Your code html output:

<ul class="menu-main md:text-[16px] text-[18px]">
    <ul>
<!-- Loop through each child of the homepage -->
	<li>
		<a href="/laser-treatments/" class="menu_link">Laser treatments</a>
		<!-- Check if the child has sub-children -->
			<ul class="sub-menu mega-menu">
				<!-- Loop through each sub-child -->
					<li class="menu-item-has-children">
						<a href="/laser-trstments/achilles/">Achilles</a>
					</li>
			</ul>

	</li>
	<li>
		<a href="/kontakt-oss/" class="menu_link">Kontakt oss</a>
		<!-- Check if the child has sub-children -->

	</li>
</ul>
</ul>

 

The output html should be:

<ul class="menu-main md:text-[16px] text-[18px]">

    <!-- If the parent has HAS child, it should output this as well. But with the child menu  -->
    <li class="menu-item-has-children"><a href="#" class="menu_link ">Laser treatment<i class="text-lg icon-chevron-down align-[-2px]"></i></a>

        <div class="w-full border-t-2 rounded-md md:w-9/12 sub-menu mega-menu border-rose-600 max-w-[1280px] ">
            <div class="list-item">
                    <ul class="grid grid-cols-1 gap-1 lg:grid-cols-3 megamen--seclevel lg:grid-flow-col md:grid-rows-1 lg:grid-rows-11">

                        <li class="w-full">
                                <a class="" href="/laser-treatment/acne">Acne</a>
                        </li>
                       
                    </ul>
            </div>
        </div>

    </li>

    <!-- If the parent has no child, it should output this -->
    <li><a href="/Contact-us">Contact us</a></li>
</ul>

So close...thanks.

[Sanyaissues]

Try this @Edward Ver:

<ul class="menu-main md:text-[16px] text-[18px]">

    <!-- Loop through each child of the homepage -->
    <?php foreach($children as $child): ?>

        <!-- Check if the child has sub-children -->
        <?php if($child->hasChildren()): ?> 

            <li class="menu-item-has-children">
                
                <a href="<?= $child->url ?>" class="menu_link ">
                    <?= $child->title ?> 
                    <i class="text-lg icon-chevron-down align-[-2px]"></i>
                </a>

                <div class="w-full border-t-2 rounded-md md:w-9/12 sub-menu mega-menu border-rose-600 max-w-[1280px] ">
                    <div class="list-item">
                        <ul class="grid grid-cols-1 gap-1 lg:grid-cols-3 megamen--seclevel lg:grid-flow-col md:grid-rows-1 lg:grid-rows-11">

                            <!-- Loop through each sub-child -->
                            <?php foreach($child->children() as $subchild): ?>

                                <li class="w-full">
                                    <a href="<?= $subchild->url ?>"><?= $subchild->title ?></a>
                                </li>

                            <?php endforeach; ?>
                            
                        </ul>
                    </div>
                </div>

            </li>

        <!-- If the child has no sub-children -->
        <?php else: ?>

            <li><a href="<?= $child->url ?>"><?= $child->title ?></a></li>

        <?php endif; ?>

    <?php endforeach ?>
</ul>

Or this alternative where the <li> for subchildren and non-subchildren is the same, but we apply different classes based on $child->hasChildren() output.

<?php

// Get the homepage
$home = pages()->get('/');

// Get the children of the homepage
$children = $home->children();

?>

<ul class="menu-main md:text-[16px] text-[18px]">

    <!-- Loop through each child of the homepage -->
    <?php foreach($children as $child): ?>
        
        <!-- Apply 'menu-item-has-children' class if the child has sub-children -->
        <li class="<?= $child->hasChildren() ? 'menu-item-has-children' : '' ?>">
            <a href="<?= $child->url ?>" class="menu_link">
                <?= $child->title ?> 
           
                <!-- Show dropdown icon if the child has sub-children -->
                <?php if($child->hasChildren()): ?>
                    <i class="text-lg icon-chevron-down align-[-2px]"></i>
                <?php endif; ?>
           
            </a>
           
            <!-- Display sub-menu if the child has sub-children -->
            <?php if($child->hasChildren()): ?>
                <div class="w-full border-t-2 rounded-md md:w-9/12 sub-menu mega-menu border-rose-600 max-w-[1280px]">
                    <div class="list-item">
                        <ul class="grid grid-cols-1 gap-1 lg:grid-cols-3 megamen--seclevel lg:grid-flow-col md:grid-rows-1 lg:grid-rows-11">
           
                        <!-- Loop through each sub-child -->
                            <?php foreach($child->children() as $subchild): ?>
                                <li class="w-full">
                                    <a href="<?= $subchild->url ?>"><?= $subchild->title ?></a>
                                </li>
                            <?php endforeach; ?>
           
                        </ul>
                    </div>
                </div>

            <?php endif; ?>
        </li>

    <?php endforeach; ?>

</ul>

 

[Edward Ver]

@Sanyaissues 

Thanks a lot. That works like magic.