Stuck trying css mega menu in Zend framework

Question

I am following zendcast's

Zend_Navigation – creating a menu, a sitemap and breadcrumbs screencast and I will like to replace the menus he has there with so called pure "Mega Menu". The screen cast uses an xml file like so

Home /

        <pages>
            <report>
                <label>Reports</label>
                <uri>/report</uri>
                <report_sub>
                    <label>Reports</label>
                    <uri>/report</uri>
                </report_sub>
            </report>
            <setup>
                <label>System Setup</label>
                <uri>/systemsetup</uri>
            </setup>
            <managestaff>
                <label>Manage Groups</label>
                <uri>/groups/save</uri>
            </managestaff>
            <logout>
                <label>Logout</label>
                <uri>/authentication/logout</uri>
            </logout>
        </pages>
    </home>
</nav>

How do I use css to format the above so as to create a Mega Menu like effect in zend framework?

Answer 1

Most mega menus I've run across use nested <UL> lists to create the markup. So, you'll have to loop through this XML and convert it into an appropriate <UL> list in order to make the navigation.

In your example, it would have to look something like this (assuming you used Soh Tanaka's outstanding Mega Menu):

<ul>
   <li>Reports</li>
      <div class="sub">
         <ul>
            <li>Reports</li>
         </ul>
      </div>
   <li>System Setup</li>
   <li>Manage Groups</li>
   ...
</ul>

Answer 2

I think i have figured it out ie the menu in the xml file is read and converted into <ul> by zend, I found out by looking at the source of the page. Therefore all i have to do is just define the all the menu and submenu then zend will create the ul for me so I can just target the <ul> and <li> just as if the menu was originally created directly as <ul>. I will try this and post back.

Answer 3

Well I have tried going the zend cast way to use an xml list to create the a mega menu and it was ok sort of but I was having difficulty adding class names to the list elements the Zend_Navigation generated, i.e. I needed to add different class names for he menus and sub menus, so in the end I just used plain HTML with some divs to create the structure of the menu inthe Layout.phtml thereby freeing me to add class named at will and it works for me. If anyone has some other way I'd love to hear it.