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!
hello. does it really work? i can’t install it anyway.
I estimate that you didn’t apply the code changes correctly. I prefer to apply it for your store. Please contact me via support@tomatocart.com.
Hi Jack, I have been exploring such changes for a while and your detailed steps provided above was comprehensive and useful. After applying your instructions, I managed to get my products/services populated on the top navigation menu. Thanks a million for your tireless support!
It’s great to hear that.
Hello there ,
I am getting the following error message when I try to access mysite:
Parse error: syntax error, unexpected ‘more’ (T_STRING) in /home/safae1up/public_html/tomato/templates/glass_gray/index.php on line 15
Snap shot :
http://prntscr.com/5m2u93
Kind regards
Ali
Hi, please contacted our support department. More details will be needed and support will be able to assist you through e-mail.
Hello there ,
Could you please have look at this URL
http://safaei.biz/tomato/index.php
and let me know what i did wrong to Build a Top Menu.
Regards
Ali
Please send following information to support@tomatocart.com:
1. Host, username and password to connect to your ftp account.
2. Url address, username and password to access your tomatocart admin panel.
And, please describe the problem in the email. Once i receive the information, i will arrange time to have a look for you as soon as possible.
Hello there ,
Could you please have look at this URL
http://www.graceandnobleopticals.com/
and let me know what i did wrong. Failed opening required ‘maticmenu/helper.php’
Regards
Kiruba
Hi,
Okay. I will arrange time to check it for you freely in this week. Once i find the reason of problem, i will give you a reply in time.