You may have noticed that there is an elegant top menu added in the bootstrap template. But, there isn’t such kind of top menu in the glass gray template.

Figure 1. Top categories menus in bootstrap template

Figure 2. General top menu in glass gray template

Don’t be frustrated. It is also possible to show a similar top menus in your glass gray template. You will find a simple solution for it in this article. Now, let me teach you how to achieve it.

Step 1. Download the maticmenu.zip.

Step 2. Unzip it and then copy maticmenu fold into your TomatoCart root directory > templates > glass_gray fold.

Step 3. Open index.php under templates > glass_gray fold with your favourite text editor and then find following code snippet at the top of file:

/*
  $Id: index.php $
  TomatoCart Open Source Shopping Cart Solutions
  http://www.tomatocart.com

  Copyright (c) 2009 Wuxi Elootec Technology Co., Ltd;  Copyright (c) 2006 osCommerce

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License v2 (1991)
  as published by the Free Software Foundation.
*/

Add following code after it:

//include general helper
require_once 'maticmenu/helper.php';

Find following code snippet:

<div id="navigationBar">
    <div id="navigationInner">
      <ul id="navigation">
        <?php
          echo '<li ' . ($osC_Template->getGroup() == 'index' && $osC_Template->getModule() == 'index' ? 'class="navVisited"' : null) . '><span class="navLeftHook"> </span>' . osc_link_object(osc_href_link(FILENAME_DEFAULT, 'index'), $osC_Language->get('home')) . '<span class="navHoverDownHook"> </span><span class="navRightHook"> </span></li>' .
               '<li ' . ($osC_Template->getGroup() == 'products' && $osC_Template->getModule() == 'new' ? 'class="navVisited"' : null) . '><span class="navLeftHook"> </span>' . osc_link_object(osc_href_link(FILENAME_PRODUCTS, 'new'), $osC_Language->get('new_products')) . '<span class="navHoverDownHook"> </span><span class="navRightHook"> </span></li>';
  
          if ($osC_Customer->isLoggedOn()) {
            echo '<li><span class="navLeftHook"></span>' . osc_link_object(osc_href_link(FILENAME_ACCOUNT, 'logoff', 'SSL'), $osC_Language->get('sign_out')) . '<span class="navHoverDownHook"> </span><span class="navRightHook"> </span></li>';
          }
  
          echo '<li ' . ($osC_Template->getGroup() == 'account' ? 'class="navVisited"' : null) . '><span class="navLeftHook"> </span>' . osc_link_object(osc_href_link(FILENAME_ACCOUNT, null, 'SSL'), $osC_Language->get('my_account')) . '<span class="navHoverDownHook"> </span><span class="navRightHook"> </span></li>' .
               '<li ' . ($osC_Template->getGroup() == 'checkout' ? 'class="navVisited"' : null) . '><span class="navLeftHook"> </span>' . osc_link_object(osc_href_link(FILENAME_CHECKOUT, 'checkout', 'SSL'), $osC_Language->get('checkout')) . '<span class="navHoverDownHook"> </span><span class="navRightHook"> </span></li>' .
               '<li ' . ($osC_Template->getGroup() == 'info' && $osC_Template->getModule() == 'contact' ? 'class="navVisited"' : null) . '><span class="navLeftHook"> </span>' . osc_link_object(osc_href_link(FILENAME_INFO, 'contact'), $osC_Language->get('contact_us')) . '<span class="navHoverDownHook"> </span><span class="navRightHook"> </span></li>';
        ?>
      </ul>
      
      <div style="float: right;width: 206px">
        <form name="search" action="<?php echo osc_href_link(FILENAME_SEARCH, null, 'NONSSL', false);?>" method="get">
          <p class="keywords"><?php echo osc_draw_input_field('keywords', null, 'maxlength="20"') ?></p>
          <p><input type="image" src="<?php echo 'templates/' . $osC_Template->getCode() . '/images/button_quick_find.png'; ?>" alt="<?php echo $osC_Language->get('box_search_heading'); ?>" title="<?php echo $osC_Language->get('box_search_heading'); ?>" id="quickSearch" /><?php echo osc_draw_hidden_session_id_field(); ?></p>
        </form>
      </div>  
    </div>
  </div>

Replace it with:

  <div id="navigationBar">
    <div id="navigationInner" class="clearfix">
      <?php echo build_categories_dropdown_menu(); ?>
      
      <div style="float: right;width: 206px">
        <form name="search" action="<?php echo osc_href_link(FILENAME_SEARCH, null, 'NONSSL', false);?>" method="get">
          <p class="keywords"><?php echo osc_draw_input_field('keywords', null, 'maxlength="20"') ?></p>
          <p><input type="image" src="<?php echo 'templates/' . $osC_Template->getCode() . '/images/button_quick_find.png'; ?>" alt="<?php echo $osC_Language->get('box_search_heading'); ?>" title="<?php echo $osC_Language->get('box_search_heading'); ?>" id="quickSearch" /><?php echo osc_draw_hidden_session_id_field(); ?></p>
        </form>
      </div>  
    </div>
  </div>

Find following code:

<?php if ($osC_Services->isStarted('debug') && defined('SERVICE_DEBUG_SHOW_CSS_JAVASCRIPT') && SERVICE_DEBUG_SHOW_CSS_JAVASCRIPT == 1) { ?>

Add following code before it:

<!-- Begin: For to menus -->
<?php if (defined('BOX_CATEGORIES_DISPLAY_DROP_DOWN_MENU')): ?>
<?php if (BOX_CATEGORIES_DISPLAY_DROP_DOWN_MENU == -1): ?>
<script type="text/javascript" src="ext/menumatic/MenuMatic_0.68.3.js"></script>
<?php endif;?>
<?php else: ?>
<script type="text/javascript" src="ext/menumatic/MenuMatic_0.68.3.js"></script>
<?php endif; ?>
<script>
	window.addEvent('domready', function() {
		var maticMenu = new MenuMatic({ id:'nav', hideDelay: 200, duration: 200});
	});
</script>
<!-- End: For to menus -->

Step 4. Open both stylesheet.css and all.min.css under templates > glass_gray fold.

Add following code at bottom of stylesheet.css and all.min.css:

/* Start: Top Menus */
#nav .subMenuParentBtn, 
#nav .subMenuParentBtnFocused, 
#nav .mainMenuParentBtn, 
#nav .mainMenuParentBtnFocused,
#nav a:hover, 
#nav a.navVisited:hover
{
    background: url('images/top_menu_arrow.png') right center no-repeat;
}


#subMenusContainer li:hover {
    background: #2998DB;
}
#subMenusContainer li:hover a {
    color: #FFFFFF;
}
/* End: Top Menus */

That’s it. In this way, a similar top categories menu will be shown in your store.

Figure 3. A similar top categories menu in glass gray template

Looking for quality TomatoCart Hosting? Look no further than Arvixe Web Hosting!