Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 552
rgarrison3 Avatar asked Feb 14 '13 21:02

rgarrison3


1 Answers

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.

like image 101
Andrew Avatar answered Sep 23 '22 06:09

Andrew