Zend Framework 2 Navigationsmenü Twitter Bootstrap Integration

Question

Ich baue gerade ein Menü aus der Datenbank und der Code funktioniert super. Allerdings möchte ich jetzt das Menü mit dem Twitter Bootstrap stylen und hier habe ich Probleme. Kennt jemand eine Möglichkeit, das Zend Framework 2 Nav Menü mit dem Twitter Bootstrap zu integrieren? Wenn jemand interessiert ist, ist das Menü wie folgt.

<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

Sie können Teiltöne verwenden, um die Navigation nach Ihren Anforderungen zu generieren.

Um die Navigation in Ihrer Vorlage anzuzeigen:

application/Navigation/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> 

, dass ein einfaches ist offensichtlich:

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

Ihr Navigationsteil so etwas wie dies sollte Beispiel und kümmert sich nicht um eine beliebige Anzahl von Navigationsebenen, und Sie müssten einige zusätzliche Klassennamen usw. hinzufügen, damit es perfekt funktioniert ty mit Bootstrap, aber Sie bekommen die Idee.

Answer 2

Versuchen Sie den folgenden Code; Ihr Navigationsteil sollte wie folgt sein:

application/partial/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 --> 

Um die Navigation in Ihrer Vorlage anzuzeigen:

<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

Für die neue Bootstrap 3 Nutzung dies als Teilansicht;

<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

Um das Aussehen zu integrieren und dieses Gefühl, mit zend nav-Bar ändern:

<ul class="nav">

hierfür:

<ul class="nav navbar-nav">