Jump to content

Mega menu


Recommended Posts

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

Link to comment
Share on other sites

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.
 

  • Like 5
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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>

 

  • Like 2
Link to comment
Share on other sites

  • 2 months later...

OK, did it. I just added this:

            <?php if( $child->id == $pages->get("/news")->id ):  ?>
                <li <?php if ($child->id == $page->rootParent->id): ?> class="current"<?php endif; ?>><a href="<?= $child->url ?>"><?= $child->title ?></a></li>
                <?php else: ?>

 

Edited by Edward Ver
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   1 member

×
×
  • Create New...