CODEWITHSUNDEEP
csstwitter-bootstrapzend-framework2
rgarrison3
rgarrison3

Reputation: 113

Zend Framework 2 Navigation Menu Twitter Bootstrap Integration

I am currently building a menu from the database and the code works great. However I am now wanting to style the menu with the twitter bootstrap and this is where I am having issues. Does anyone know of a way to integrate the zend framework 2 nav menu with the twitter bootstrap? If anyone is interested the menu that is generated is like the following.

<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>

Upvotes: 11

Views: 10864

Answers (4)

Carlos Miranda
Carlos Miranda

Reputation: 1

To integrate the look and feel with zend nav-bar change this:

<ul class="nav">

for this:

<ul class="nav navbar-nav">

Upvotes: 0

Rob
Rob

Reputation: 4987

For the new Bootstrap 3, use this as partial view;

<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>

Upvotes: 5

Andrew
Andrew

Reputation: 12809

You can use partials to generate the navigation as your require.

To display your navigation inside your template:

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

Your navigation partial should be something like this:

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>

Obviously that's a simple example and won't take care of an arbitrary number of levels of navigation, and you would need to add in some extra class names etc to make it work perfectly with Bootstrap but you get the idea.

Upvotes: 24

Philip F
Philip F

Reputation: 86

Try below code; Your navigation partial should be something like this:

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 -->

To display your navigation inside your template:

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

Upvotes: 0

Related Questions