2015-10-14 126 views
2

我正在嘗試使用knpmenu爲我的網站創建一個下拉導航菜單。symfony2 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; 
    } 
} 

我想創建的一個下拉註銷菜單但失敗。下拉菜單不起作用。

呈現的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> 
+0

檢查是否包含所有sytelsheets和js文件。我敢打賭,你錯過了knpmenu包的一些東西 – Joshua

+0

knpmenu有它自己的CSS和JS?我認爲這是使用Jquery和Bootstrap? –

回答

0

我已經找到了解決方案,我的問題。正如約書亞所說,可能會有一些缺失。所以懷疑Bootstrap有一些問題。我又增加了摸爬引導捆綁到我的項目,叫我的下拉菜單,如下鏈接提供了指南:

bootstrap.mohrenweiserpartner.de/mopa/bootstrap/navbar

莫名其妙的下拉現在工作。