Yii2 顶部下拉菜单实现

Wiki · 本文由 · ITer · 发布于 1月前 · 260 阅读

如下图所示,在 Yii2.0 的框架中如何实现顶部下拉导航呢?

实现过程中主要用到 NavBarNav 两个 Html 组件:

在 NavBar 组件 [[begin()]][[end()]] 调用之间包含的任何内容都被认为是 NavBar 的内容。可以使用诸如 [[NaV]][[\yii\widgets\Menu]] 这样的小部件来构建这样的内容。

举个例子:

 use yii\bootstrap\NavBar;
 use yii\bootstrap\Nav;

 NavBar::begin([
        'brandLabel' => 'Yii 中文网',   
        'brandUrl' => Yii::$app->homeUrl,
        'options' => [
            'class' => 'navbar-top navbar-fixed-top', //对应的样式
        ],
    ]);

 echo Nav::widget([
     'items' => [
         ['label' => '社区', 'url' => ['/topic/index']],
         ['label' => '分类', 'options'=>['class'=>'ycn-banner'], 'items'=>[
            ['label' => '<i class="fa fa-wikipedia-w top-tag"></i> Wiki', 'url' => ['topic/wiki'],'encode' => false],
            ['label' => '<i class="fa fa-question-circle top-tag"></i> 问答', 'url' => ['topic/question'],'encode' => false],
            ['label' => '<i class="fa fa-book top-tag"></i> 博客', 'url' => ['topic/blog'],'encode' => false],
        ]
        ],
     ],
     'options' => ['class' => 'navbar-nav'],
 ]);
 NavBar::end();

Tip:想要 label 中的内容支持 Html(例如:图标) 就需要添加配置 encode=>false

成为第一个本话题的爱慕者吧

评论数量:0