symfony2 knpmenu 无法下拉
symfony2 knpmenu unable to dropdown
我正在尝试使用 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>
我找到了解决问题的方法。正如约书亚提到的那样,可能缺少某些东西。所以怀疑 Bootstrap 有问题。我已将 Mopa Bootstrap Bundle 添加到我的项目中,并按照下面 link:
中提供的指南调用我的下拉菜单
bootstrap.mohrenweiserpartner.de/mopa/bootstrap/navbar
不知何故,下拉菜单现在可以正常工作了。
我正在尝试使用 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>
我找到了解决问题的方法。正如约书亚提到的那样,可能缺少某些东西。所以怀疑 Bootstrap 有问题。我已将 Mopa Bootstrap Bundle 添加到我的项目中,并按照下面 link:
中提供的指南调用我的下拉菜单bootstrap.mohrenweiserpartner.de/mopa/bootstrap/navbar
不知何故,下拉菜单现在可以正常工作了。