Question

我正在尝试使用knpmenu为我的网站创建一个下拉导航菜单。

base.html.twig

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html"; charset=utf-8" />
    <title>{% block title %}Inconix Intranet{% endblock %} - iconix</title>
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
        <script src="{{ asset('https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js') }}"></script>

    {% block stylesheets %}
        <link href='http://fonts.googleapis.com/css?family=Irish+Grover' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=La+Belle+Aurore' rel='stylesheet' type='text/css'>
        <link href="{{ asset('css/screen.css') }}" type="text/css" rel="stylesheet" />
        <link href="{{ asset('css/bootstrap.min.css') }}" type="text/css" rel="stylesheet" />
    {% endblock %}
    <script src="{{ asset('js/bootstrap.min.js') }}"></script>
    <link rel="shortcut icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>

    <section id="wrapper">
        <header id="header">
            <div class="top">
                {% block navigation %}
                    <nav>
                        <ul class="navigation">
                            {% if app.user %}
                            <div class="navbar navbar-fixed-top">
                                <div class="navbar-inner">
                                {{ knp_menu_render('AppBundle:Builder:logoutMenu') }}
                                </div>
                            </div>
                            {% else %}
                            <div class="navbar navbar-fixed-top">
                                <div class="navbar-inner">
                                {{ knp_menu_render('AppBundle:Builder:topMenu') }}
                                </div>
                            </div>                               
                            {% endif %}  
                            <div class="content" style="margin-top: 50px;">

                            </div>   
                        </ul>
                    </nav>
                {% endblock %}
            </div>

            <hgroup>
                <h2>{% block blog_title %}<a href="#">Iconix Intranet</a>{% endblock %}</h2>
                <h3>{% block blog_tagline %}<a href="#">Intranet for Iconix Staff</a>{% endblock %}</h3>
            </hgroup>
        </header>

        <section class="main-col">
            {% block body %}
            {% endblock %}
        </section>

        <section class="sidebar">
            {% block sidebar %}
            {% endblock %}
        </section>

        <div id="footer">
            {% block footer %}
                Iconix Intranet - created by Nicholas Chew</a>
            {% endblock %}
        </div>
    </section>

    {% block javascripts %}
        <link href="{{ asset('js/bootstrap.min.js') }}" />
    {% endblock %}
</body>

layout.html.twig

{% extends '::base.html.twig'%}
{% block sidebar %}
{% if app.user %}
{#menu for logged in user#}
{{ knp_menu_render('AppBundle:Builder:sideMenu') }}   
{% else %}
{% endif %}
{% endblock %}
{% block body %}
{{block ('fos_user_content')}}
{% endblock %}

Builder.php

<?php

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

// src/AppBundle/Menu/Builder.php
namespace AppBundle\Menu;

use Knp\Menu\FactoryInterface;
use Symfony\Component\DependencyInjection\ContainerAware;

class Builder extends ContainerAware
{
    public function topMenu(FactoryInterface $factory)
    {
        $menu = $factory->createItem('root');
        $menu->addChild('Home',array('route' => 'app'));
        $menu->addChild('Login',array('route' => 'login'));
        $menu->addChild('Register',array('route' => 'register'));

        // ... add more children

        return $menu;
    }

    public function sideMenu(FactoryInterface $factory)
    {
        $menu = $factory->createItem('root');

        $menu->setChildrenAttribute('class', 'nav pull-right');
        $menu->addChild('Leave')->setAttribute('dropdown', true);
        $menu['Leave']->addChild('Edit profile', array('route' => 'leave_app'));


        // ... add more children

        return $menu;
    }

    public function logoutMenu(FactoryInterface $factory)
    {        
        $menu = $factory->createItem('root');
        $menu->addChild('Home',array('route' => 'app'));
        $menu->addChild('Leave')->setAttribute('dropdown', true);
        $menu['Leave']->addChild('Edit profile', array('route' => 'leave_app'));      
        $menu->addChild('Claim')->setAttribute('dropdown', true);
        return $menu;
    }
}

我想为logoutMenu创建一个下拉列表但是失败了。下拉列表不起作用。

呈现的HTML看起来也很奇怪。我无法弄清楚哪里出了问题。请帮忙。

<ul class="navigation">
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <ul>
                <li class="current first">        
                  <a href="/intra/web/app_dev.php/">Home</a>        
                </li>

                <li dropdown="dropdown">       
                <span>Leave</span>              
                <ul class="menu_level_1">
                <li class="first last">        
                    <a href="/intra/web/app_dev.php/leave">Edit profile</a>        
                </li>
                </ul>
                </li>
                    <li dropdown="dropdown" class="last">        
                    <span>Claim</span>        
                </li>
            </ul>
        </div>
    </div>
    <div class="content" style="margin-top: 50px;">
    </div>   
</ul>

Answer 1

我找到了解决问题的方法。正如约书亚所说，可能会有一些缺失。所以怀疑Bootstrap有一些问题。我已将Mopa Bootstrap Bundle添加到我的项目中，并按照以下链接中的指南调用我的下拉菜单：

bootstrap.mohrenweiserpartner.de/mopa/bootstrap/navbar

不知何故，下拉列表现在正在运作。

symfony2 knpmenu无法下拉

1 个答案: