Хобрук: Ваш путь к мастерству в программировании

Symfony2 knpmenu не может выпадающее меню

Я пытаюсь создать выпадающее меню навигации для своего сайта с помощью 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 %}

Строитель.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>
14.10.2015

  • проверьте, включены ли все файлы sytelsheets и js. Бьюсь об заклад, вы что-то пропустили из пакета knpmenu 14.10.2015
  • у knpmenu были свои css и js? Я думал, что он использует Jquery и Bootstrap? 14.10.2015

Ответы:


1

я нашел решение для моей проблемы. как упоминает Джошуа, может быть чего-то не хватает. поэтому подозревается, что у Bootstrap есть какая-то проблема. Я добавил Mopa Bootstrap Bundle в свой проект и вызвал раскрывающееся меню в качестве руководства, приведенного в ссылке ниже:

bootstrap.mohrenweiserpartner.de/mopa/bootstrap/navbar

каким-то образом выпадающий список работает сейчас.

15.10.2015
Новые материалы

Как свинг-трейдеры могут использовать ИИ для больших выигрышей
По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..

Как построить любой стол
Я разработчик программного обеспечения. Я люблю делать вещи и всегда любил. Для меня программирование всегда было способом создавать вещи, используя только компьютер и мое воображение...

Обзор: Машинное обучение: классификация
Только что закончил третий курс курса 4 часть специализации по машинному обучению . Как и второй курс, он был посвящен низкоуровневой работе алгоритмов машинного обучения. Что касается..

Разработка расширений Qlik Sense с qExt
Использование современных инструментов веб-разработки для разработки крутых расширений Вы когда-нибудь хотели кнопку для установки переменной в приложении Qlik Sense? Когда-нибудь просили..

React Hooks: основы деструктуризации массива
Kent C. Dodds написал классный пост о том, как грядущая функция React под названием Hooks работает на капоте. Предстоящий хук React useState основан на деструктурировании массива, давайте..

Пакеты R, используемые в Tesla
Добро пожаловать обратно! R — очень популярный язык программирования, используемый множеством компаний, включая Tesla! Итак, давайте взглянем на некоторые пакеты R, которые использует Tesla...

Сокращение и слияние токенов для эффективных моделей VL: обзор
Часто в задачах, связанных с компьютерным зрением и НЛП, вычислительно затратная и требующая большого объема памяти обработка становится препятствием для более быстрого логического вывода модели, а..