Question

Menu is not going to hide when I click on menu and if there is no link to another url (I am using #). How to hide the menu container (class="menu-box")

    <div class="fr menu-wrap-container">
    <div class="menu-wrapper fr">
    <dl id="menu">
        <dt class="menu dropdown"><a href="javascript:void(0)"></a></dt>
        <dd class="menu-box">
            <a href="<?php echo $this->getUrl('');?>" title="<?php echo $this->__('Home'); ?>" class="home_link"><?php echo $this->__('Home'); ?><span class="spnIndicator fr">&nbsp;</span></a>

            <ul class="links">
                <li class="first"><a href="<?php  echo $this->getUrl('').'#viewproductlist'; ?>">View Products</a></li>
                <li class=""><a href="<?php  echo $this->getUrl('').'delivery-and-returns'; ?>">Delivery & Returns</a></li>
                <li class="">
                    <a href="<?php  echo $this->getUrl(''); ?>">Product Advice</a>
                </li>
                <li class=""><a href="<?php  echo $this->getUrl(''); ?>">Services</a></li>
                <li class="last"><a href="<?php  echo $this->getUrl('').'about'; ?>">About Us</a></li>
            </ul>
            <?php echo $this->getChildHtml('topLinks') ?>
            <ul class="links">
                <li class="first"><a href="<?php  echo $this->getUrl('').'contact-to-us'; ?>" class="linkcontactico">Contact Us</a></li>
            </ul>
            <?php //echo $this->getChildHtml('checkoutLinks') ?>
            <?php echo $this->getChildHtml('accountLinks') ?>
        </dd>
    </dl>        
</div>
<div class="cart-icon fr <?php echo $this->getInCart() ? 'active' : '' ?>">
    <a href="<?php  echo $this->getUrl('checkout/cart'); ?>"><?php  echo $this->getChildHtml('topCart') ?></a>
</div>
<div class="clearfix"></div>
</div>   

I have mentioned '#viewproductlist' as href in one of the menu from menu list. And this will link to same page.

Was it helpful?

Solution

add id on that <li class="first"><a href="<?php echo $this->getUrl('').'#viewproductlist'; ?>" id="special">View Products</a></li> also on that <dd class="menu-box" id="special-menu">

$("special").observe('click', function() {
    $('special-menu').hide();
});
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top