Jump to content

Adding a horizontal menu


peterp

Recommended Posts

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

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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

Sample new Workgearselect page.png

Link to comment
Share on other sites

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.)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...