Aug 16 2009

Zend_Navigation Tricks: True tab navigation with sub menus – Part 1

It is some what tricky with the Zend_Navigation menu helpers to set up your typical tab-based navigation with sub pages relevant to the tab your on, as seen below. But it’s not far difficult so don’t be put off, hopefully the view helpers will improve over time.

tab-menu-example

In the mean time this is a 3 part series in achieving the navigation I set up in utilitiesman.com as seen above.

Part 1: Setting up the navigation, and rendering the tabs.

Set up your navigation configuration, I’ve done this in xml.

< ?xml version="1.0" encoding="UTF-8"?>
<configdata>
    <nav>
        <label>Home</label>
        <module>default</module>
	<controller>index</controller>
	<action>index</action>
        <pages>
            <computers>
                <label>Computers</label>
                <module>computers</module>
                <controller>index</controller>
                <action>index</action>
                <pages>
                    <networking>
                        <label>Networking</label>
                        <module>computers</module>
                        <controller>networking</controller>
                        <action>index</action>
                        <pages>
		                    <ipaddress>
		                        <label>IP Address</label>
		                        <module>computers</module>
		                        <controller>networking</controller>
		                        <action>ipaddress</action>
		                    </ipaddress>
		                    <ping>
		                        <label>Ping</label>
		                        [... code removed for example ...]
		                    </ping>
     	                            [... code removed for example ...]
		                </pages>
                    </networking>
                    <security>
                        [... code removed for example ...]
                    </security>
                </pages>
            </computers>
            <measures>
                [... code removed for example ...]
            </measures>
        </pages>
    </nav>
</configdata>

In your bootstrap file you’ll need setup the navigation and load your navigation config:

$navigationConfig = new Zend_Config_Xml('./application/Config/navigation.xml');
$navigation = new Zend_Navigation($navigationConfig);

Assuming you’re making use of the Zend_Layout this would go in your template

$this->navigation()->menu()->setPartial(array('nav1.phtml','default'));
echo $this->navigation()->menu()->render();

This is my partial menu template which is where some minor trickery is performed to see the Home page and first level pages in a single <ul> for easy application of CSS to make the <li>’s look like tabs. This is the “nav1.phtml” referred to in the layout.

    echo '<ul id="nav1">';
    // loop root level (only has Home, but later may have an Admin root page?)
    foreach ($this->container as $page) {
        // check if it is active (not recursive)
        $isActive = $page->isActive(false);
        $liClass = $isActive ? ' class="active"' : '';
        echo '<li ' . $liClass . '>' . $this->menu()->htmlify($page) . '</li>', PHP_EOL;
        // loop next level
        foreach ($page as $page) {
            // check if it is active (recursive)
            $isActive = $page->isActive(true);
            $liClass = $isActive ? ' class="active"' : '';
            echo '<li ' . $liClass . '>' . $this->menu()->htmlify($page) . '</li>', PHP_EOL;
        }
    }
    echo '</ul>';

What the partial template above renders is something like this, neatly all in a single hieratical level..

<ul id="nav1">
    <li><a ...>Home</a></li>
    <li class="active"><a ...>Computers</a></li>
    <li><a ...>Measures</a></li>
</ul>

4 comments   |  tags: , , | posted in Zend Framework