peterp Posted January 29, 2018 Share Posted January 29, 2018 Hi All, I have a client who is using the Mican template however they want to add another menu that is the same as the vertical menu but they want an extra horizontal menu across the page with categories having their drop-downs if subcategories exist. The horizontal menu would be between the search and currency cart boxes. Has anybody done this and if so then could you please point me in the right direction as to what I have to change or insert to achieve the desired result Thankyou for any assistance best Regards, Peterp Quote Link to comment Share on other sites More sharing options...
bsmither Posted January 29, 2018 Share Posted January 29, 2018 What I am envisioning is that the current menu construction is to be duplicated where the Language box would be if it was enabled (Search, Language chooser, Currency chooser). The available width is just about as big as the sidebox column. So, I do not see a "horizontal" menu as is depicted by Foundation's horizontal menu. Therefore, are you asking how one can copy a vertically stacked, accordion extending menu construction in that box's space? If that's not it, have you created sufficient space to construct a horizontal bar extending from side to side with the categories able to be lined up in a single row? (See Crosshatch) Quote Link to comment Share on other sites More sharing options...
peterp Posted January 30, 2018 Author Share Posted January 30, 2018 Hi Brian, I think the client is looking for something similar to the menu that appears in crosshatch but also to have the side menu. What I would envisage is that the boxes (search,Language, currency and shopping cart) that are in the clients Mican skin would stay where they are and then space would be made between them and Shop by category, welcome screen,best sellers boxes to accommodate the new added horizontal menu similar to the foundation horizontal menu but maybe a slightly larger font style. I have attached a very rough sample of what I'm trying to achieve hope this will be helpful. So I'm hoping this will be able to be done with the same functionality as is used in the foundation skin whereas the drop downs will occur for each category if it has any. Your help is extremely appreciated with this request. Best Regards, Peterp Quote Link to comment Share on other sites More sharing options...
bsmither Posted January 30, 2018 Share Posted January 30, 2018 Just need to finish up by polishing the CSS and we are good to go! Quote Link to comment Share on other sites More sharing options...
peterp Posted January 31, 2018 Author Share Posted January 31, 2018 Hi Brian, Which CSS are you polishing up and can I help. Best Regards, Peterp Quote Link to comment Share on other sites More sharing options...
bsmither Posted February 1, 2018 Share Posted February 1, 2018 It will be obvious. Here are the edits: From /crosshatch/images/ get the image file navBg.png Copy to /mican/images/common/ From /crosshatch/styles/ get the CSS file dropdown.css Copy to /mican/styles/ From /crosshatch/templates/ get the file box.navigation.php Copy to /mican/templates/ re-naming the file to box.navigation_crosshatch.php In /mican/styles/common.css, near line 160, find: #breadcrumb ul li:last-child:after { content: ''; } Add after: #nav { background: url(../images/common/navBg.png) repeat-x; height: 66px; margin: 0 0 10px; width: 100%; } #nav .navContainer { height: 66px; margin: 0 auto; width: 1000px; } In /mican/templates/main.php, near line 7, find: <link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/common.css" media="screen" /> Add after: <link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/dropdown.css" media="screen"/> Near line 55, find: <div id="main_body"> Add BEFORE: {$CATEGORIES_CROSSHATCH} Next, we will create Code Snippet that will re-create the Categories list using the new skin template element. In admin, Manage Hooks, Code Snippets tab, click Add Snippet. Enabled: checked Unique ID: add_crosshatch_menu@cc600+ Execution Order: 99 Description: Assigns Crosshatch's Horizontal Menu Bar to a Smarty Variable Trigger: class.gui.display_navigation Version: 1.0 Author: https://forums.cubecart.com/topic/53270-adding-a-horizontal-menu/ PHP Code: <?php /****************** * Unique ID: add_crosshatch_menu@cc600+ * Execution Order: 99 * Description: Assigns Crosshatch's Horizontal Menu Bar to a Smarty Variable * Trigger: class.gui.display_navigation * Version: 1.0 * Author: https://forums.cubecart.com/topic/53270-adding-a-horizontal-menu/ *******************/ if(!$GLOBALS['smarty']->templateExists('templates/box.navigation_crosshatch.php')) return false; $cache_id2 = 'html.'.$this->_skin.'_crosshatch.menu.'.$GLOBALS['language']->current(); if (($content_crosshatch = $GLOBALS['cache']->read($cache_id2,$serialize)) == false) { $tree_data = $GLOBALS['catalogue']->getCategoryTree(); $navigation_tree = $this->_makeTree($tree_data); $GLOBALS['smarty']->assign('NAVIGATION_TREE', $navigation_tree); $GLOBALS['smarty']->assign('CTRL_SALE', $GLOBALS['config']->get('config', 'catalogue_sale_mode')); if (in_array($GLOBALS['config']->get('gift_certs','status'), array('1', '2'))) { $GLOBALS['smarty']->assign('CTRL_CERTIFICATES', true); } else { $GLOBALS['smarty']->assign('CTRL_CERTIFICATES', false); } $url = array ( 'saleitems' => $GLOBALS['seo']->buildURL('saleitems',false,'&',false), 'certificates' => $GLOBALS['seo']->buildURL('certificates',false,'&',false) ); $GLOBALS['smarty']->assign('URL', $url); $content_crosshatch = $GLOBALS['smarty']->fetch('templates/box.navigation_crosshatch.php'); $content_crosshatch = str_replace('/index.php/', '/', $content_crosshatch); $GLOBALS['cache']->write($content_crosshatch, $cache_id2, '', $serialize); } // Rel path must be absolute to meet W3C requirememts (URL must not be cached) $content_crosshatch = str_replace('rel="'.CC_ROOT_REL,'rel="'.CC_STORE_URL.'/',$content_crosshatch); //Send it to the main template $GLOBALS['smarty']->assign('CATEGORIES_CROSSHATCH', $content_crosshatch); Save. Clear the CubeCart cache. You will now see an unadorned menu bar where you said it was to be placed. It needs the matching box surrounds, the list bullets suppressed, the font size to match the rest of the page, etc. The submenu drops down. What I haven't tested is what a sub-submenu looks like. (if Crosshatch even did that.) Quote Link to comment Share on other sites More sharing options...
peterp Posted February 2, 2018 Author Share Posted February 2, 2018 Hi Brian, Thanks very much for this solution, I have implemented it in a test site and after a little massaging of various CSS rules it comes out very well. Thanks again for your help it is very much appreciated Best Regards, Peterp Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.