Getting Zend_Navigation menu to work with jQuery's Fisheye

Question

I'm using Zend_Navigation (sweet addition to the framework, btw) to build my menu, after which it should be rendered in the page (self-evidently). I first set the container somewhere in the controller:

// $pages is the array containing all page information
$nav = new Zend_Navigation($pages);
$this->view->navigation($nav);

Then, in the layout, it is rendered like this:

echo $this->navigation()->menu();

which works perfectly. Now: I want the menu to be rendered a little differently. The page I'm building uses the jQuery Fisheye-plugin to build a Mac-like Dock-menu. However, this plugin needs a specific markup...

Actually, it takes a list of <a> elements containing both an <img> (for the icon) and a <span> (for the tooltip). The standard Menu view helper renders everything inside an unordered list (logically), with the 'label' parameter as the link text.

It seems that content passed to the 'label' parameter is escaped before rendering, so inserting the html there won't do me any good. Additionally, the Fisheye usually doesn't seem to take its items contained in a <li> tag, with the entire thing wrapped in <ul></ul>, but just a one-level list of <a> elements.

I was thinking about writing a custom view helper for the dock, which would be able to take care of inserting the <img> and the <span>, but I'm having a very hard time getting a custom view helper attached to the Navigation class. I just can't figure out where to place it and in what way, even though all my other custom classes (models and such) are sweetly taken care of by the autoloader. Any ideas on this?

Then again, even if I can get this view helper to work, I'm still left with the HTML unordered list - I know I can lose that one too using the custom view helper, but I've always been a fan of containing main navigation menus inside a list, for the sake of semantics.

If anyone can help me out a little, I'd greatly appreciate it. If the Fisheye just isn't meant to work with <ul>'s, that'd be too bad... would there be a good reason for losing Zend_Navigation altogether in this case?

Answer 1

I haven't seen the way yet either in terms of making a custom renderer. Here's what I ended up doing though:

First, instead of rendering the default menu() call, create a partial to render into:

// menu.phtml is partial, cms is module
$partial = array('menu.phtml', 'cms');
$this->navigation()->menu()->setPartial($partial);
echo $this->navigation()->menu()->render();

Then (from the docs), you can create a "custom" render like so:

// -- inside menu.phtml
foreach ($this->container as $page) 
{
    // this just prints a "<a>" or "<span>" tag
    // depending on whether the page has a uri
    echo $this->menu()->htmlify($page), PHP_EOL;
}

I ended up making what I originally had (a menu with one level of submenus) with this script:

// -- another menu.phtml
<ul class="navigation">

<?php

$html = array();

foreach ($this->container as $page) 
{
    $html[] = "<li>";
    $html[] = $this->menu()->htmlify($page) . PHP_EOL;

    if (!empty($page->pages))
    {
        $html[] = "<ul>";
        foreach ($page->pages as $subpage) 
        {
            $html[] = "<li>";
            if ($href = $subpage->getHref()) $html[] = "<a href=\"{$href}\">";
            else $html[] = "<span>";
            $html[] = "<img src=\"/ui/cms/img/icons/edit.png\" alt=\"\"/>";
            $html[] = $subpage->getLabel();
            if ($href) $html[] = "</a>";
            else $html[] = "</span>";            
            $html[] = "</li>";
        }
        $html[] = "</ul>";
    }

    $html[] = "</li>";
}

echo join(PHP_EOL, $html);

?>
</ul>

You could just change the markup in the partial and add your images/icons there.