Convert HTML Megamenu to Yii CMenu zii Widget

Question

I just started working with Yii, and I am having some trouble converting my HTML Megamenu to Yii. Basically my html is something like this:

<div class="nav-wrapper">
    <div class="container">
        <ul class="some_class">
            <li class="active"><a href="#">Parent 1</a>
                <div class="megamenu">
                    <div class="row">
                        <a href="#" class="overview">Child 1</a>
                    </div>
                    <div class="row">
                        <div class="col1">
                            <ul>
                                <li><a href="#">Child 3</a></li>
                                <li><a href="#">Child 4</a></li>
                            </ul>
                        </div>              
                    </div>
                </div>
            </li>
         </ul>
     </div>

Adapting this to CMenu widget is proving more difficult than I thouht...especially for e starter like me. I can come up with the classes and lists, but how do I put the Divs within the CMenu Widget?

Thanks

Answer 1

You should create your own widget. Creating widget is not harder than creating controllers.

Start from something simple, to see how it plays. Lets try something, this is quick example, does not handle recursion, but could be fine:

class MyMenu extends CWidget
{
    public $items = [];
    public function init()
    {
       // Possibli do something with items
    }

    public function run()
    {
        $this->render('menu', ['items' => $this->items]);
    }
}

In views/menu.php:

<div class="nav-wrapper">
    <div class="container">
        <ul class="some_class">
              <?php foreach($items as $item):?>
            <li class="active"><a href="#"><?=$item['title'];?></a>
                <div class="megamenu">

                    <div class="row">
                        <a href="#" class="overview"><?= $item['overview'];?></a>
                    </div>
                    <div class="row">
                        <div class="col1">
                            <ul>
                                         <?php foreach($item['items'] as $row):?>
                                <li><a href="#"><?= $row['title'];?></a></li>
                                          <?php endforeach;?>
                            </ul>
                        </div>
                    </div>
                </div>
            </li>
                <?php endforeach;?>
         </ul>
     </div>
</div>

Then use it in your ccontorller view

<?php
$this->widget('path.to.MyMenu', [
    'items' => [
        [
            'title' => 'Foo',
            'overview' => 'Some overview',
            'items' => [
                [
                    'title' => 'Bar'
                ],
                [
                    'title' => 'Baz'
                ]
            ]
        ]
    ]
]);
?>

DISCLAIMER: Not tested, just to show idea, might work or not.