Zend Framework 2 Menu di navigazione Integrazione Bootstrap di Twitter

Question

Attualmente sto creando un menu dal database e il codice funziona perfettamente. Tuttavia ora sto cercando di personalizzare il menu con il bootstrap di Twitter e questo è dove sto avendo problemi. Qualcuno sa di un modo per integrare il menu di navigazione di zend framework 2 con il bootstrap di Twitter? Se qualcuno è interessato, il menu che viene generato è simile al seguente.

<ul class="nav"> 
<li> 
    <a href="/view-page/home">Home</a> 
    <ul> 
     <li> 
      <a href="/view-page/coupons">Coupons</a> 
      <ul> 
       <li> 
        <a href="/view-page/printable-coupons">Printable Coupons</a> 
        <ul> 
         <li> 
          <a href="/view-page/cut-these-coupons">Cut these here coupons</a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</li> 
<li class="active"> 
    <a href="/view-page/about-us">About Us</a> 
</li> 
</ul> 

Answer 1

È possibile utilizzare partial per generare la navigazione come richiesto.

Per visualizzare la vostra navigazione all'interno del vostro modello:

<?php $partial = array('application/navigation/topnav.phtml', 'default') ?> 
<?php $this->navigation('navigation')->menu()->setPartial($partial) ?> 
<?php echo $this->navigation('navigation')->menu()->render() ?> 

la vostra navigazione parziale dovrebbe essere qualcosa di simile:

application/navigazione/topnav.phtml

<ul class="nav"> 
    <?php $count = 0 ?> 
    <?php foreach ($this->container as $page): ?> 
     <?php /* @var $page Zend\Navigation\Page\Mvc */ ?> 
     <?php // when using partials we need to manually check for ACL conditions ?> 
     <?php if(! $page->isVisible() || !$this->navigation()->accept($page)) continue; ?> 
     <?php $hasChildren = $page->hasPages() ?> 
     <?php if(! $hasChildren): ?> 
     <li <?php if($page->isActive()) echo 'class="active"'?>> 
      <a class="nav-header" href="<?php echo $page->getHref() ?>"> 
       <?php echo $this->translate($page->getLabel()) ?> 
      </a> 
     </li> 
     <?php else: ?> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
       <span><?php echo $this->translate($page->getLabel()) ?></span> 
      </a> 

      <ul class="dropdown-menu" id="page_<?php echo $count ?>"> 
      <?php foreach($page->getPages() as $child): ?> 
       <?php // when using partials we need to manually check for ACL conditions ?> 
       <?php if(! $child->isVisible() || !$this->navigation()->accept($child)) continue; ?> 
       <li> 
        <a href="<?php echo $child->getHref() ?>"> 
         <?php echo $this->translate($child->getLabel()) ?> 
        </a> 
       </li> 
      <?php endforeach ?> 
      </ul> 
     </li> 
     <?php endif ?> 
     <?php $count++ ?> 
    <?php endforeach ?> 
</ul> 

Ovviamente questo è un semplice esempio e non si prenderà cura di un numero arbitrario di livelli di navigazione, e sarà necessario aggiungere alcuni nomi di classe extra ecc per farlo funzionare perfettamente con Bootstrap ma hai un'idea.

Answer 2

Provare sotto il codice; la vostra navigazione parziale dovrebbe essere qualcosa di simile:

application/parziale/topnav.phtml

<div class="navbar navbar-inverse navbar-fixed-bottom"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 
     <ul class="nav" id="menu">  
     <?php $count = 0; ?> 
     <?php foreach ($this->container as $page): ?> 
      <?php //var_dump($page); exit;?> 
      <?php /* @var $page Zend\Navigation\Page\Mvc */ ?> 
      <?php // when using partials we need to manually check for ACL conditions ?> 
      <?php if(! $page->isVisible() || !$this->navigation()->accept($page)) continue; ?> 
      <?php $hasChildren = $page->hasPages() ?> 
      <?php if(! $hasChildren): ?> 
      <li> 
       <a class="nav-header" href="<?php echo $page->getHref() ?>"> 
        <?php echo $this->translate($page->getLabel()) ?> 
       </a> 
      </li> 
      <?php else: ?> 
       <a class="dropdown-toggle" data-toggle="dropdown" href="#page_<?php echo $count; ?>"> 
        <span><?php echo $this->translate($page->getLabel()) ?></span> 
       </a> 
       <ul class="dropdown-menu" id="page_<?php echo $count; ?>"> 
       <?php foreach($page->getPages() as $child): ?> 
        <?php // when using partials we need to manually check for ACL conditions ?> 
        <?php if(! $child->isVisible() || !$this->navigation()->accept($child)) continue; ?> 
        <li> 
         <a href="<?php echo $child->getHref() ?>"> 
          <?php echo $this->translate($child->getLabel()) ?> 
         </a> 
        </li> 
       <?php endforeach ?> 
       </ul> 
      <?php endif ?> 
      <?php $count++; ?> 
     <?php endforeach ?> 
     </ul> 
     <form class="navbar-search pull-right" action=""> 
      <input type="text" class="search-query span2" placeholder="Search"> 
     </form> 
     </div><!-- /.nav-collapse --> 
    </div><!-- /.container --> 
    </div><!-- /.navbar-inner --> 
</div><!-- /.navbar --> 

Per visualizzare la vostra navigazione all'interno del vostro modello:

<div class="nav-collapse"> 
     <?php 
      echo $this->navigation('navigation') 
      ->menu() 
      ->setMinDepth(0) 
      ->setMaxDepth(0) 
      ->setUlClass('nav') 
      ->setPartial(array('partial/topnav.phtml', 'Application')); 
     ?> 
    </div> 

Answer 3

Per il nuovo Bootstrap 3, l'uso questo come vista parziale;

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
<div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="<?php echo $this->url('home') ?>"><img src="<?php echo $this->basePath('img/logo.png') ?>" alt="Title App"/>&nbsp;TitleText</a> 
    </div> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <?php foreach ($this->container as $page) { ?> 
      <?php /* @var $page Zend\Navigation\Page\Mvc */ ?> 
      <?php // when using partials we need to manually check for ACL conditions ?> 
      <?php if (!$page->isVisible() || !$this->navigation()->accept($page)) { continue; } ?> 
      <?php $hasChildren = $page->hasPages(); ?> 
      <?php if (!$hasChildren) { ?> 
       <li> 
        <a href="<?php echo $page->getHref() ?>"> 
         <?php echo $this->translate($page->getLabel()) ?> 
        </a> 
       </li> 
      <?php } else { ?> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown"><?php echo $this->translate($page->getLabel()) ?> <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <?php foreach ($page->getPages() as $child) { ?> 
         <?php // when using partials we need to manually check for ACL conditions ?> 
         <?php if(!$child->isVisible() || !$this->navigation()->accept($child)) { continue; } ?> 
         <li> 
          <a href="<?php echo $child->getHref() ?>"> 
           <?php echo $this->translate($child->getLabel()) ?> 
          </a> 
         </li> 
        <?php } ?> 
       </ul> 
      </li> 
      <?php } ?> 
     <?php } ?> 
    </ul> 
    </div> 
</div> 
</nav> 

Answer 4

per integrare l'aspetto grafico con Zend nav-bar cambiare questo:

<ul class="nav">

per questo:

<ul class="nav navbar-nav">