Menu with dropdown

[Reezal AQ]

Hello,

How do I turn this menu from this ..

<ul class="nav navbar-nav navbar-right main-nav">
                <li class="active"><a href="<?php echo $pages->get(1)->httpUrl;?>">Home</a></li>
                <li><a href="about.php">About</a></li>
                <li class="dropdown m-menu-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Services
                    <span><i class="fa fa-angle-down"></i></span></a>
                    <ul class="dropdown-menu">
                        <li>
                            <div class="m-menu-content">
                                <ul class="col-sm-3">
                                    <li class="dropdown-header">Widget Haeder</li>
                                    <li><a href="#">Awesome Features</a></li>
                                    <li><a href="#">Clean Interface</a></li>
                                    <li><a href="#">Available Possibilities</a></li>
                                    <li><a href="#">Responsive Design</a></li>
                                    <li><a href="#">Pixel Perfect Graphics</a></li>
                                </ul>
                                 <ul class="col-sm-3">
                                    <li class="dropdown-header">Widget Haeder</li>
                                    <li><a href="#">Awesome Features</a></li>
                                    <li><a href="#">Clean Interface</a></li>
                                    <li><a href="#">Available Possibilities</a></li>
                                    <li><a href="#">Responsive Design</a></li>
                                    <li><a href="#">Pixel Perfect Graphics</a></li>
                                </ul>
                                <ul class="col-sm-3">
                                    <li class="dropdown-header">Widget Haeder</li>
                                    <li><a href="#">Awesome Features</a></li>
                                    <li><a href="#">Clean Interface</a></li>
                                    <li><a href="#">Available Possibilities</a></li>
                                    <li><a href="#">Responsive Design</a></li>
                                    <li><a href="#">Pixel Perfect Graphics</a></li>
                                </ul>
                                <ul class="col-sm-3">
                                    <li class="dropdown-header">Widget Haeder</li>
                                    <li><a href="#">Awesome Features</a></li>
                                    <li><a href="#">Clean Interface</a></li>
                                    <li><a href="#">Available Possibilities</a></li>
                                    <li><a href="#">Responsive Design</a></li>
                                    <li><a href="#">Pixel Perfect Graphics</a></li>
                                </ul> 
                            </div>
                        </li>
                    </ul>
                </li>
                <li><a href="donation.php">Donation</a></li>
                <li><a href="contact.php">Contact Us</a></li>
                
                
            </ul>

 

 

into this ..

<ul class='topnav'>
    <?php 

        // top navigation consists of homepage and its visible children
        $homepage = $pages->get('/main/'); 
        $children = $homepage->children();

        // make 'home' the first item in the navigation
        $children->prepend($homepage); 

        // render an <li> for each top navigation item
        foreach($children as $child) {
            if($child->id == $page->rootParent->id) {
                // this $child page is currently being viewed (or one of it's children/descendents)
                // so we highlight it as the current page in the navigation
                echo "<li class='current'><a href='$child->url'>$child->title</a></li>";
            } else {
                echo "<li><a href='$child->url'>$child->title</a></li>";
            }
        }

        // output an "Edit" link if this page happens to be editable by the current user
        if($page->editable()) {
            echo "<li class='edit'><a href='$page->editUrl'>Edit</a></li>";
        }

    ?></ul>

 

I have tried myself but so no luck.

Thanks.

[Macrura]

Creating a custom mega menu is not exactly for the faint-of-heart, you would have to decent PHP skills and you would need to be able to build the menu in the backend in such a way that the columns withing any mega menu could be deduced from the settings, or structure of the menu you create.

If you don't use the page tree structure for generating the menu, there are several other options...

- branch of the page tree representing your menu
- Repeater using the recently nesting capabiity
- Menu Builder

With some basic PHP and the right structure to work from, building the mega menu should not be that hard... You would probably need 2-3 functions that would interact recursively to really make it work right though, IMHO..