Drop-down menu shows static block

Question

I have a menu similar to Prada's where by users click for the menu and it drops down:

www.prada.com

I am looking to make information for certain categories appear in the header drop-down too. I.e. they click on 'collection' and a short paragraph fits into the menu to the right (almost like a sub-category).

UPDATE:

I also added this to 'renderer.phtml':

 $html .= '<ul class="level' . $childLevel . '">';
 $html .= $this->_getHtml($child, $childrenWrapClass);
 $staticBlock = trim($this->getLayout()->createBlock('cms/block')->setBlockId($child->getId())->to     Html());
 if(!empty($staticBlock)){
$html .= '<span class="nav-static-block" style="background:#fff; border-top:1px solid #ccc; padding:10px;">';
$html .= $staticBlock;
$html .= '</span>';
}
$html .= '</ul>';

So it now looks like this:

 $html = '';

 $children = $menuTree->getChildren();
 $parentLevel = $menuTree->getLevel();
 $childLevel = is_null($parentLevel) ? 0 : $parentLevel + 1;

 $counter = 1;
 $childrenCount = $children->count();

 $parentPositionClass = $menuTree->getPositionClass();
 $itemPositionClassPrefix = $parentPositionClass ? $parentPositionClass . '-' : 'nav-';

foreach ($children as $child) {
$child->setLevel($childLevel);
$child->setIsFirst($counter == 1);
$child->setIsLast($counter == $childrenCount);
$child->setPositionClass($itemPositionClassPrefix . $counter);

$outermostClassCode = 'level'. $childLevel;
$_hasChildren = ($child->hasChildren()) ? 'has-children' : '';

$html .= '<li '. $this->_getRenderedMenuItemAttributes($child) .'>';

$html .= '<a href="'. $child->getUrl() .'" class="'. $outermostClassCode .' '. $_hasChildren .'">'. $this->escapeHtml($this->__($child->getName())) .'</a>';

if (!empty($childrenWrapClass)) {
    $html .= '<div class="'. $childrenWrapClass .'">';
}
 $html .= '<ul class="level' . $childLevel . '">';
 $staticBlock = trim($this->getLayout()->createBlock('cms/block')->setBlockId($child->getId())->toHtml());
if(!empty($staticBlock)){
$html .= '<span class="nav-static-block" style="background:#000; border-top:1px solid #ccc; padding:10px;">';
$html .= $staticBlock;
$html .= '</span>';
}
$html .= '</ul>';

$nextChildLevel = $childLevel + 1;

if (!empty($_hasChildren)) {
    $html .= '<ul class="level'. $childLevel .'">';

    $html .=     $this->render($child, $childrenWrapClass);
    $html .= '</ul>';
}

if (!empty($childrenWrapClass)) {
    $html .= '</div>';
}

$html .= '</li>';

$counter++;
}

return $html;

It works perfectly and is calling everything perfectly!

Answer 1

You can roll your own or you can use Pronav that can do that and more. Visit the demo store to see it's possibilities.

We have very good experiences with several customers using this extension.

The "roll your own" version, aka magento topmenu-101:

1. The default top menu is only capable of generating a menu tree using the store categories
2. There's a large difference between the rwd top-menu and the other default design packages and that is that the rwd version only renders top-level categories.
3. Many have gone before you, borrow code, but don't borrow code that calls Mage::getModel('catalog/category)->load($id) for each menu item ( why not? - how to fix - slide 10 )
4. The top menu is inserted using a text_list (see page.xml in either base/default/layout or rwd/default/layout). This means the easiest way to add something to the menu is to add another block to that text list, provided that this works with the generated HTML.
5. Since 1.8.2 the topmenu now has support for a "renderer". This is code that used to be in the TopMenu block that recursively loads the menu tree and is now moved to the template. No more rewrites for simple adjustments, allthough the default file isn't your typical Magento template and frankly a quick hack.
6. Given 5, you can use your own renderer by extending Mage_Page_Block_Html_Topmenu_Renderer if needed and override the block type in a layout XML file.
7. Some people create empty categories in the catalog with URL keys that point to CMS pages or the home page, just so to make it appear in the top menu. This loads a bunch of overhead associated with categories that can be avoided using methods described in 4 to 6 and may need additional URL rewrites or layout updates to get working properly (/contact.html != /contact).
8. Typically, JavaScript provided interactivity is out of scope for MageStack, unless made very specific and being lucky somebody has that lying around or when it deals with bugs / configuration issues in the default installation.
9. Looking in skin/rwd/default/css/styles.css shows various class-based selectors with the keyword 'hide' and 'hidden' that aid in hiding an item by default.
10. See 8 on how to unhide something on the click event. Also see js/lib/dropdown.js for inspiration.

Hopefully this helps you get started and feel free to ask specific questions if you get stuck.