asked on

Wide menu for magento

Hi guys,

I'm trying to create a wide menu navigation bar for a custom Magento theme identical to what the are using here: http://www.jmldirect.com/

Been desperately trying to recreate this but to no avail. I'm still quite new to jQuery drop down menus.

Please could you help? You would be saving my life!!!!

Gary

What are you trying to create? Just the menu or the dropdown look as well?

rafique12

ASKER

The wide dropdown look inluding image thumbnails. I need it identical to what they have here: http://www.jmldirect.com/

Been here for hours trying!?!?!

Gary

Paste/attach what you have so far.

rafique12

ASKER

I have this code which is taken from another Magento theme: http://8theme.com/site_demo#blanco

When I attempt integrate the elements my page fails!

<?php
/**
 * $this->renderCategoriesMenuHtml() supports optional arguments:
 * int Level number for list item class to start from
 * string Extra class of outermost list items
 * string If specified wraps children list in div with this class
 */
?>
<?php $_menu = $this->renderCategoriesMenuHtml(0,'level-top') ?>
<div class="nav-container">
    <div class="right-bg">
        <ul id="nav">
            <li class="level0 first homelink"><a href="<?php echo $this->getBaseUrl(); ?>"><span><?php echo $this->__('Home') ?></span></a></li>
            <?php if($_menu): ?>
                <?php echo $_menu ?>
            <?php endif ?>
            <?php $additionalLink = themeOptions('additionalLink'); ?>
            <?php $additionalLinkUrl = themeOptions('additionalLinkUrl'); ?>

            <?php if ($block1 = $this->getChildHtml('nav_block1')): ?>
                <?php $block1Title = Mage::getModel('cms/block')->setStoreId(Mage::app()->getStore()->getId())->load('nav_block1')->getTitle(); ?>
            	<li class="level0 block_li parent">
                    <a class="level-top" href="#"><span><?php echo $block1Title; ?></span></a>
                    <div class="nav_block"><?php echo $block1; ?></div>
                </li>
    		<?php endif; ?> 

            <?php if ($block1 = $this->getChildHtml('nav_block2')): ?>
                <?php $block1Title = Mage::getModel('cms/block')->setStoreId(Mage::app()->getStore()->getId())->load('nav_block2')->getTitle(); ?>
            	<li class="level0 block_li parent">
                    <a class="level-top" href="#"><span><?php echo $block1Title; ?></span></a>
                    <div class="nav_block"><?php echo $block1; ?></div>
                </li>
    		<?php endif; ?> 

            <?php if ($block1 = $this->getChildHtml('nav_block3')): ?>
                <?php $block1Title = Mage::getModel('cms/block')->setStoreId(Mage::app()->getStore()->getId())->load('nav_block3')->getTitle(); ?>
            	<li class="level0 block_li parent">
                    <a class="level-top" href="#"><span><?php echo $block1Title; ?></span></a>
                    <div class="nav_block"><?php echo $block1; ?></div>
                </li>
    		<?php endif; ?> 

            <?php if ($block1 = $this->getChildHtml('nav_block4')): ?>
                <?php $block1Title = Mage::getModel('cms/block')->setStoreId(Mage::app()->getStore()->getId())->load('nav_block4')->getTitle(); ?>
            	<li class="level0 block_li parent">
                    <a class="level-top" href="#"><span><?php echo $block1Title; ?></span></a>
                    <div class="nav_block"><?php echo $block1; ?></div>
                </li>
    		<?php endif; ?> 

            <?php if ($block1 = $this->getChildHtml('nav_block5')): ?>
                <?php $block1Title = Mage::getModel('cms/block')->setStoreId(Mage::app()->getStore()->getId())->load('nav_block5')->getTitle(); ?>
            	<li class="level0 block_li parent">
                    <a class="level-top" href="#"><span><?php echo $block1Title; ?></span></a>
                    <div class="nav_block"><?php echo $block1; ?></div>
                </li>
    		<?php endif; ?> 

            <?php if ($block1 = $this->getChildHtml('nav_block6')): ?>
                <?php $block1Title = Mage::getModel('cms/block')->setStoreId(Mage::app()->getStore()->getId())->load('nav_block6')->getTitle(); ?>
            	<li class="level0 block_li parent">
                    <a class="level-top" href="#"><span><?php echo $block1Title; ?></span></a>
                    <div class="nav_block"><?php echo $block1; ?></div>
                </li>
    		<?php endif; ?> 

            <?php if ($block1 = $this->getChildHtml('nav_block7')): ?>
                <?php $block1Title = Mage::getModel('cms/block')->setStoreId(Mage::app()->getStore()->getId())->load('nav_block7')->getTitle(); ?>
            	<li class="level0 block_li parent">
                    <a class="level-top" href="#"><span><?php echo $block1Title; ?></span></a>
                    <div class="nav_block"><?php echo $block1; ?></div>
                </li>
    		<?php endif; ?> 

            <?php if ($block1 = $this->getChildHtml('nav_block8')): ?>
                <?php $block1Title = Mage::getModel('cms/block')->setStoreId(Mage::app()->getStore()->getId())->load('nav_block8')->getTitle(); ?>
            	<li class="level0 block_li parent">
                    <a class="level-top" href="#"><span><?php echo $block1Title; ?></span></a>
                    <div class="nav_block"><?php echo $block1; ?></div>
                </li>
    		<?php endif; ?> 

            <?php if ($block1 = $this->getChildHtml('nav_block9')): ?>
                <?php $block1Title = Mage::getModel('cms/block')->setStoreId(Mage::app()->getStore()->getId())->load('nav_block9')->getTitle(); ?>
            	<li class="level0 block_li parent">
                    <a class="level-top" href="#"><span><?php echo $block1Title; ?></span></a>
                    <div class="nav_block"><?php echo $block1; ?></div>
                </li>
    		<?php endif; ?> 

            <?php if ($block1 = $this->getChildHtml('nav_block10')): ?>
                <?php $block1Title = Mage::getModel('cms/block')->setStoreId(Mage::app()->getStore()->getId())->load('nav_block10')->getTitle(); ?>
            	<li class="level0 block_li parent last_block">
                    <a class="level-top" href="#"><span><?php echo $block1Title; ?></span></a>
                    <div class="nav_block"><?php echo $block1; ?></div>
                </li>
    		<?php endif; ?>              
            
            <?php if($additionalLinkUrl && $additionalLink): ?>
                <li class="level0 clearence"><a href="<?php echo $additionalLinkUrl ?>" title="<?php echo $additionalLink ?>"><span><?php echo $additionalLink ?></span></a></li>
            <?php endif ?> 
                 
        </ul>
    </div>
</div>

Open in new window

Gary

How many menu items and sub menu items do you have?
Sometimes it can be easier to just write a static menu if your categories are unlikely to change much or that often.
There used to be a megamenu for free on Connect that did something similar but it appears to be gone now?

rafique12

ASKER

I could create a static menu but it is likely that the categories and products will need to be updated regularly. Not sure on the best way to progress...

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

rafique12

ASKER

Okay... how do I do it? Should I create a static block?