Add id css to first ul in Zend Navigation Menu

Question

I'm using .ini files to render my menu.

Bootstrap

    $config = new Zend_Config_Ini(APPLICATION_PATH . '/configs/menu.ini', 'nav');
    $nav = new Zend_Navigation($config);
    $view->navigation($nav);

layout.phtml

<?php echo $this->navigation()->menu()->setMaxDepth(3) ?>

My target to reach:

<ul class="navigation" id="navigation">
    <li>

        <a id="menu-1" href="/">Home</a>
    </li>
</ul>

How to set id="navigation" for the first <ul> occurence instead of class="navigation"?

Now I've got only <ul class="navigation"> and i want to <ul id="navigation"> or <ul class="navigation" id="navigation">

Answer 1

You would need to setup a custom view helper, in your code library, not under Zend_.

Maybe something like GZ_View_Helper_Navigation_Menu2

And then depending on how you want to configure the addition of this new view helper path, something like this in your bootstraps initView:

$view->addHelperPath('GZ/View/Helper/', 'GZ_View_Helper'); 

Or, if using Application and Resources you can setup that via the ini too with:

resources.view.helperPath.GZ_View_Helper = "GZ/View/Helper"

Your lib GZ of course needs to be on PHP's include path.

When rendering you would change the call to:

<?= $this->navigation()->menu2()->setMaxDepth(3) ?>

Although I think you can also assign a default view helper (can't find it in docs right now) to Navigation and just call

<?=  $this->navigation ?>

Related: How do I extend the Zend Navigation Menu View Helper?

Answer 2

You can do this with jQuery:

$('document').load(function(){
    $("body > ul:first-child").attr('id', 'navigation');
})

EDIT:

After reading your comments, I noted that you are using Mootols library, so you can do the jQuery equivalent, something like this:

window.addEvent('domready', function() {                       
    var myMenu = new MenuMatic({ orientation:'vertical' });  
    myMenu.getElement('ul').set('id', 'navigation');              
});

Answer 3

I've thought about doing this method a lot myself. I often create multiple navigation objects in my Zend Framework projects.

Instead, I would submit a different answer. In your view, enclose your call to the navigation output inside of the HTML5 nav element. This makes it both semantically clearer AND allows you to add your own ID to each section easily. So, try this:

<nav id="navigation"><?php echo $this->navigation()->menu()->setMaxDepth(3) ?></nav>

An interesting thing to note - if you only have 1 navigation element on the page, you won't even need the ID then. You can target it using the nav element in your css... for example, to make all ul's in the navigation have zero margin, you might do this in css:

nav ul { margin: 0px }

Answer 4

In ZF 1.12 (don't know from which version exactly) there is one methode for that:

$this->navigation()->menu()->setUlId('navigation')->setMaxDepth(0);