将HTML Megamenu转换为Yii CMenu zii Widget

时间:2014-04-23 07:42:25

标签: yii megamenu cmenu

我刚开始与Yii合作,我在将我的HTML Megamenu转换为Yii时遇到了一些麻烦。基本上我的HTML是这样的:

<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>

将此调整为CMenu小部件比我更难......尤其对于像我这样的电子启动器。我可以提出课程和列表,但是如何将Divs放入CMenu小部件中?

由于

1 个答案:

答案 0 :(得分:0)

您应该创建自己的小部件。 Creating widget并不比创建控制器困难。

从简单的事情开始,看看它是如何发挥作用的。让我们尝试一下,这是一个快速的例子,不处理递归,但可能没问题:

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

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

在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>

然后在你的ccontorller视图中使用它

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

免责声明:未经测试,只是为了表明想法,可能会有效。