css - .Yii2 创建没有小部件的导航菜单

标签 css twitter-bootstrap menu yii2 navbar

我是 yii2 的新手。我正在尝试创建自己的 Bootstrap 导航菜单栏,但我遇到了这个问题。

场景: 在使用 yii2 使用其小部件 yii\bootstrap\NavBar 时,它显示以下 html 菜单:

    NavBar::begin([
'brandLabel' => 'PLATAFORMA 3.0.0 BACKEND '. \app\models\Clientes::findOne(Yii::$app->params["id_cliente"])->nombre." (". \app\models\Proyectos::findOne(Yii::$app->params["id_proyecto"])->nombre.")",
'brandUrl' => Yii::$app->homeUrl,
'options' => [
    'class' => 'navbar-inverse navbar-fixed-top',
],
]);
.....
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right'],
'items' => $menuItems,
]);
NavBar::end();

        <nav id="w0" class="navbar-inverse navbar-fixed-top navbar" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w0-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/index.php">PLATAFORMA 3.0.0 BACKEND Axtel (axtel_experto)</a>
                </div>
                <div id="w0-collapse" class="collapse navbar-collapse">
                    <ul id="w1" class="navbar-nav navbar-right nav">
                        <li class="active">
                            <a href="/index.php?r=site%2Findex">Home</a>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" href="#" data-toggle="dropdown">Configuración 
                                <b class="caret"></b>
                            </a>
                            <ul id="w2" class="dropdown-menu">
                                <li>
                                    <a href="/index.php?r=canales%2Findex" tabindex="-1">Canales</a>
                                </li>
                                <li>
                                    <a href="/index.php?r=productos%2Findex&amp;from_licencias=0" tabindex="-1">Productos</a>
                                </li>
                                <li>
                                    <a href="/index.php?r=atributos%2Findex" tabindex="-1">Atributos</a>
                                </li>
                                <li>
                                    <a href="/index.php?r=proyectos%2Findex" tabindex="-1">Proyecto</a>
                                </li>
                                <li>
                                    <a href="/index.php?r=proyectos-atributos%2Findex" tabindex="-1">Proyectos-Atributos</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="/index.php?r=casos%2Findex&amp;from_usuarios=0">Casos</a>
                        </li>
                        <li>
                            <a href="/index.php?r=usuarios%2Findex">Usuarios</a>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" href="#" data-toggle="dropdown">Conocimiento 
                                <b class="caret"></b>
                            </a>
                            <ul id="w3" class="dropdown-menu">
                                <li>
                                    <a href="/index.php?r=conocimiento%2Findex" tabindex="-1">Artículos</a>
                                </li>
                                <li>
                                    <a href="/index.php?r=conocimiento-categorias%2Findex" tabindex="-1">Categorías</a>
                                </li>
                                <li>
                                    <a href="/index.php?r=subcategorias%2Findex" tabindex="-1">Subcategorias</a>
                                </li>
                                <li>
                                    <a href="/index.php?r=secciones%2Findex" tabindex="-1">Secciones</a>
                                </li>
                                <li>
                                    <a href="/index.php?r=subsecciones%2Findex" tabindex="-1">Subsecciones</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="/index.php?r=site%2Flogout" data-method="post">Logout (admin)</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

它工作正常。为了使用纯 html 创建我自己的导航栏,我决定打印这个 html snipet,我不知道为什么它不能这样工作。显示效果很好,但是当我将鼠标悬停在必须显示子菜单的元素上时,它什么也没做。

我认为这个小部件会触发一些处理子菜单项的 js 代码。我找不到它。

提前感谢您的帮助。

最佳答案

/**
 * Renders the widget.
 */
public function run()
{
    $tag = ArrayHelper::remove($this->containerOptions, 'tag', 'div');
    echo Html::endTag($tag);
    if ($this->renderInnerContainer) {
        echo Html::endTag('div');
    }
    $tag = ArrayHelper::remove($this->options, 'tag', 'nav');
    echo Html::endTag($tag);
    BootstrapPluginAsset::register($this->getView());
}

此小部件注册 BootstrapPluginAsset,其中包含 public $js = ['js/bootstrap.js'] ( here )

关于css - .Yii2 创建没有小部件的导航菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41240464/

相关文章:

jquery - 在弹出窗口中显示 Google 图表 + 通过超链接/按钮将参数传递给图表

html - CSS 导航 Bootstrap 问题

css - 固定栏菜单过渡CSS

html - SVG Logo 上缺少字体

html - 为什么我的每个循环放在混合中时不起作用?

css - 在 pageid 控制的微型网站中滚动中断 - 仅在桌面 Safari 中

javascript - 单击另一个菜单选项时,如何使所选菜单选项恢复正常?

jquery - 如何使用 jQuery 选择器选择一个类中的所有类

html - Twitter Bootstrap : vertically align child div with height

css - Bootstrap 3 : Collapsable Menu's z-Index