Support for CSS Flyout Menu

[Get Em Fast]

Lots of people say it ... "I love this place!" I'm not a programmer, have little networking skills and know even less about website etc .. but these forums make working with Zen Cart SOOO easy!

That's what we're here for. Glad you found a "Home" with Zen-Cart. Happy Zenning.

Usually dont post until I have a problem, most the time either I figure it out or the forums has some useful bits to help.

Shame on you........if everybody done that, there wouldn't be any answers to all the problems in this forum. Every once in a while, just look through the new posts.....you'd be surprised at how many questions you can actually answer by the knowledge you've gained here. That's what this community is built on........the sharing of "learned knowledge"

I have this running on my 1.3.9d site (www.battlebunker.com) but
I'm having an issue with the menu extending below and off screen making it fiddly to reach the bottom of the menu ... any suggestions?

I think I read something about a scrollbar that is added for long menus (may not have been for this mod) ... will have to go looking for that in the previous posts on this thread - I must admit I have not read all the pages ....

Read, read, read......that's the key!
O.k., now to solve your problem. In your stylesheet_categories_menu.css, find this block of code (almost at the bottom):

div#nav-cat ul.level1 li.submenu:hover ul.level2, 
div#nav-cat ul.level2 li.submenu:hover ul.level3,
div#nav-cat ul.level3 li.submenu:hover ul.level4,
div#nav-cat ul.level4 li.submenu:hover ul.level5,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {
        display:block;
}

And add this to it:

height: 200px;
overflow: scroll;

Making that whole section look like this:

div#nav-cat ul.level1 li.submenu:hover ul.level2, 
div#nav-cat ul.level2 li.submenu:hover ul.level3,
div#nav-cat ul.level3 li.submenu:hover ul.level4,
div#nav-cat ul.level4 li.submenu:hover ul.level5,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {
        display:block;
        height: 200px;
        overflow: scroll;
}

Adjust height (length of box before it starts to scroll) as needed.

And I hate feeling obligated to say "I have a template monster theme", from what I have read on these forums I gather they dont go well together.

Cheers

..............no words..............................

Hope this helps.

[Guptyboy]

Thanks for the fast response ... I've had so many late nights playing with Zen Cart - in fact, tonight has been a sleepless night - its almost time to go get my morning donut and coffee! NOICE!

Okay ... I applied those edits and it has given the scroll box .. some weird layout issues with the scroll box though. Can you see the excess white space when hovering over a category that cant fill the 200px It seems to limit the levels of expansion aswell

Any other suggestions?

PS - aye my friend, that it is ... sometimes you need to give your eyes a rest though and use your mouth to ask ... thats my excuse and I'm sticking to it!

I ordered a copy of the book just before the weekend, hopefully be here next week! Then I can become Totally Zenned! mwuwhaha.

[Get Em Fast]

That's due to the height of the box being set at 200px. But, I just noticed that when the menu is set to scroll, the next level doesn't show. I would take that back off leaving it as it was.

Right now, I'm pretty busy and don't have much time to do any testing on it. I WILL look into a better solution, as I am planning on re-doing the whole menu making it more "user friendly". But, I can't say how long it will be before I get the new version done because, like I say.....I'm pretty busy with clients at the moment.

So for now, my best suggestion would be to move your menu to the top of your page (where your calendar is), leaving more room for the menu items to appear without scrolling. Actually, with a sidebox menu system, that's where it should be in the first place so customers don't have such a hard time finding it. As of now, without scrolling down, a customer cannot even see your menu, which is one of the first things you should "stick in their face".

Robert

[bellamagia]

I am having a hard time figuring out the z-index or issue with my menu in IE7 for http://www.bellasurjewelry.com/

Seems to be working fine for IE8 and FF as well as Chrome, but IE7 is doing something weird. You can only click on the top subcategory. If you try to move to the subcategory below it, it jumps to the next categories subs. (try it...I know it might sound confusing lol).

Any help would be greatly appreciated! Site is almost done except for this and a few other loose ends.

[Get Em Fast]

bell, I'm not seeing any strange issues in IE7. Everything works as it should for me.
Is anyone else seeing this in bell's site?

[DBB1]

Hi
I'm upgrading to the lastest version of Zencart - has anyone got the CSS Flyout Menus working on 1.3.9 successfully?

Thanks in advance

RoPey

Dunno... I just applied it to a new 1.3.9d test site. I must be missing something. Am I supposed to see something in the Admin panel for configuring this?

[vandiermen]

Hello,

I am using tpl_categories_css.php which use's categories_ul_generator.php
which CSS Flyout Menu also use's.

My question is: how do I get categories_ul_generator.php from showing the "Document Categories"

Normal old category_tree.php / tpl_categories.php do not show the "Document Categories"... and I put all the 'Document Categories' in to the 'Document Categories side box'...

I am not really expecting an answer, I am just stuck and looking for an alternative. maybe I will try to hide the doc categories somehow.

categories_ul_generator.php

<?php
//placeholder21// +----------------------------------------------------------------------+
// |zen-cart Open Source E-commerce                                       |
// +----------------------------------------------------------------------+
// | Copyright(c) 2003 The zen-cart developers                           |
// |                                                                      |
// | http://www.zen-cart.com/index.php                                    |
// |                                                                      |
// | Portions Copyright(c) 2003 osCommerce                               |
// +----------------------------------------------------------------------+
// | This source file is subject to version 2.0 of the GPL license,       |
// | that is bundled with this package in the file LICENSE, and is        |
// | available through the world-wide-web at the following url:           |
// | http://www.zen-cart.com/license/2_0.txt.                             |
// | If you did not receive a copy of the zen-cart license and are unable |
// | to obtain it through the world-wide-web, please send a note to       |
// | [email protected] so we can mail you a copy immediately.          |
// +----------------------------------------------------------------------+
// $Id: categories_ul_generator.php 2004-07-11  DrByteZen $
//      based on site_map.php v1.0.1 by networkdad 2004-06-04
//
 
class zen_categories_ul_generator {
    var $root_category_id = 0,
    $max_level = 0,
    $data = array(),
    $parent_group_start_string = '<ul%s>',
    $parent_group_end_string = '</ul>',
    $child_start_string = '<li%s>',
    $child_end_string = '</li>',
    $spacer_string = '
',
    $spacer_multiplier = 1;
 
    var $document_types_list = ' (3) ';
    // acceptable format example: ' (3, 4, 9, 22, 18) '
 
    function zen_categories_ul_generator($load_from_database = true)
    {
        global $languages_id, $db;
        $this->data = array();
        $categories_query = "select c.categories_id, cd.categories_name, c.parent_id
          from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd
          where c.categories_id = cd.categories_id
          and c.categories_status=1 " .
                " and cd.language_id = '" . (int)$_SESSION['languages_id'] . "' " .
                " order by c.parent_id, c.sort_order, cd.categories_name";
        $categories = $db->Execute($categories_query);
        while (!$categories->EOF) {
            $this->data[$categories->fields['parent_id']][$categories->fields['categories_id']] = array('name' => $categories->fields['categories_name'], 'count' => 0);
            $categories->MoveNext();
        }
    }
 
    function buildBranch($parent_id, $level, $submenu=true, $parent_link='')
    {
        $result = sprintf($this->parent_group_start_string, ($submenu==true) ? ' class="level'. ($level+1) . '"' : '' );
 
        if (($this->data[$parent_id])) {
            foreach($this->data[$parent_id] as $category_id => $category) {
                $category_link = $parent_link . $category_id;
                if (($this->data[$category_id])) {
                    $result .= sprintf($this->child_start_string, ($submenu==true) ? ' class="submenu"' : '');
                } else {
                    $result .= sprintf($this->child_start_string, '');
                }
                $result .= str_repeat($this->spacer_string, $this->spacer_multiplier * 1) . '<a href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . $category_link) . '">';
                $result .= $category['name'];
                $result .= '</a>';
 
                if (($this->data[$category_id]) && (($this->max_level == '0') || ($this->max_level > $level+1))) {
                    $result .= $this->buildBranch($category_id, $level+1, $submenu, $category_link . '_');
                }
                $result .= $this->child_end_string;
            }
        }
 
        $result .= $this->parent_group_end_string;
        return $result;
    }
 
    function buildTree($submenu=false)
    {
        return $this->buildBranch($this->root_category_id, '', $submenu);
    }
}
?>

category_tree.php

<?php
/**
 * category_tree Class.
 *
 * @package classes
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: category_tree.php 3041 2006-02-15 21:56:45Z wilt $
 */
if (!defined('IS_ADMIN_FLAG')) {
  die('Illegal Access');
}
/**
 * category_tree Class.
 * This class is used to generate the category tree used for the categories sidebox
 *
 * @package classes
 */
class category_tree extends base {
  function zen_category_tree($product_type = "all") {
    global $db, $cPath, $cPath_array;
    if ($product_type != 'all') {
      $sql = "select type_master_type from " . TABLE_PRODUCT_TYPES . "
                where type_master_type = " . $product_type . "";
      $master_type_result = $db->Execute($sql);
      $master_type = $master_type_result->fields['type_master_type'];
    }
    $this->tree = array();
    if ($product_type == 'all') {
      $categories_query = "select c.categories_id, cd.categories_name, c.parent_id, c.categories_image
                             from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd
                             where c.parent_id = 0
                             and c.categories_id = cd.categories_id
                             and cd.language_id='" . (int)$_SESSION['languages_id'] . "'
                             and c.categories_status= 1
                             order by sort_order, cd.categories_name";
    } else {
      $categories_query = "select ptc.category_id as categories_id, cd.categories_name, c.parent_id, c.categories_image
                             from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd, " . TABLE_PRODUCT_TYPES_TO_CATEGORY . " ptc
                             where c.parent_id = 0
                             and ptc.category_id = cd.categories_id
                             and ptc.product_type_id = " . $master_type . "
                             and c.categories_id = ptc.category_id
                             and cd.language_id=" . (int)$_SESSION['languages_id'] ."
                             and c.categories_status= 1
                             order by sort_order, cd.categories_name";
    }
    $categories = $db->Execute($categories_query, '', true, 150);
    while (!$categories->EOF)  {
      $this->tree[$categories->fields['categories_id']] = array('name' => $categories->fields['categories_name'],
      'parent' => $categories->fields['parent_id'],
      'level' => 0,
      'path' => $categories->fields['categories_id'],
      'image' => $categories->fields['categories_image'],
      'next_id' => false);
      if (isset($parent_id)) {
        $this->tree[$parent_id]['next_id'] = $categories->fields['categories_id'];
      }
      $parent_id = $categories->fields['categories_id'];
      if (!isset($first_element)) {
        $first_element = $categories->fields['categories_id'];
      }
      $categories->MoveNext();
    }
    if (zen_not_null($cPath)) {
      $new_path = '';
      reset($cPath_array);
      while (list($key, $value) = each($cPath_array)) {
        unset($parent_id);
        unset($first_id);
        if ($product_type == 'all') {
          $categories_query = "select c.categories_id, cd.categories_name, c.parent_id, c.categories_image
                               from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd
                               where c.parent_id = " . (int)$value . "
                               and c.categories_id = cd.categories_id
                               and cd.language_id=" . (int)$_SESSION['languages_id'] . "
                               and c.categories_status= 1
                               order by sort_order, cd.categories_name";
        } else {
          /*
          $categories_query = "select ptc.category_id as categories, cd.categories_name, c.parent_id, c.categories_image
          from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd, " . TABLE_PRODUCT_TYPES_TO_CATEGORY . " ptc
          where c.parent_id = '" . (int)$value . "'
          and ptc.category_id = cd.categories_id
          and ptc.product_type_id = '" . $master_type . "'
          and cd.language_id='" . (int)$_SESSION['languages_id'] . "'
          and c.categories_status= '1'
          order by sort_order, cd.categories_name";
          */
          $categories_query = "select ptc.category_id as categories_id, cd.categories_name, c.parent_id, c.categories_image
                             from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd, " . TABLE_PRODUCT_TYPES_TO_CATEGORY . " ptc
                             where c.parent_id = " . (int)$value . "
                             and ptc.category_id = cd.categories_id
                             and ptc.product_type_id = " . $master_type . "
                             and c.categories_id = ptc.category_id
                             and cd.language_id=" . (int)$_SESSION['languages_id'] ."
                             and c.categories_status= 1
                             order by sort_order, cd.categories_name";
        }
        $rows = $db->Execute($categories_query);
        if ($rows->RecordCount()>0) {
          $new_path .= $value;
          while (!$rows->EOF) {
            $this->tree[$rows->fields['categories_id']] = array('name' => $rows->fields['categories_name'],
            'parent' => $rows->fields['parent_id'],
            'level' => $key+1,
            'path' => $new_path . '_' . $rows->fields['categories_id'],
            'image' => $categories->fields['categories_image'],
            'next_id' => false);
            if (isset($parent_id)) {
              $this->tree[$parent_id]['next_id'] = $rows->fields['categories_id'];
            }
            $parent_id = $rows->fields['categories_id'];
            if (!isset($first_id)) {
              $first_id = $rows->fields['categories_id'];
            }
            $last_id = $rows->fields['categories_id'];
            $rows->MoveNext();
          }
          $this->tree[$last_id]['next_id'] = $this->tree[$value]['next_id'];
          $this->tree[$value]['next_id'] = $first_id;
          $new_path .= '_';
        } else {
          break;
        }
      }
    }
    $row = 0;
    return $this->zen_show_category($first_element, $row);
  }
  function zen_show_category($counter,$ii) {
    global $cPath_array;
    $this->categories_string = "";
    for ($i=0; $i<$this->tree[$counter]['level']; $i++) {
      if ($this->tree[$counter]['parent'] != 0) {
        $this->categories_string .= CATEGORIES_SUBCATEGORIES_INDENT;
      }
    }
 
    if ($this->tree[$counter]['parent'] == 0) {
      $cPath_new = 'cPath=' . $counter;
      $this->box_categories_array[$ii]['top'] = 'true';
    } else {
      $this->box_categories_array[$ii]['top'] = 'false';
      $cPath_new = 'cPath=' . $this->tree[$counter]['path'];
      $this->categories_string .= CATEGORIES_SEPARATOR_SUBS;
    }
    $this->box_categories_array[$ii]['path'] = $cPath_new;
    if (isset($cPath_array) && in_array($counter, $cPath_array)) {
      $this->box_categories_array[$ii]['current'] = true;
    } else {
      $this->box_categories_array[$ii]['current'] = false;
    }
    // display category name
    $this->box_categories_array[$ii]['name'] = $this->categories_string . $this->tree[$counter]['name'];
    // make category image available in case needed
    $this->box_categories_array[$ii]['image'] = $this->tree[$counter]['image'];
    if (zen_has_category_subcategories($counter)) {
      $this->box_categories_array[$ii]['has_sub_cat'] = true;
    } else {
      $this->box_categories_array[$ii]['has_sub_cat'] = false;
    }
    if (SHOW_COUNTS == 'true') {
      $products_in_category = zen_count_products_in_category($counter);
      if ($products_in_category > 0) {
        $this->box_categories_array[$ii]['count'] = $products_in_category;
      } else {
        $this->box_categories_array[$ii]['count'] = 0;
      }
    }
    if ($this->tree[$counter]['next_id'] != false) {
      $ii++;
      $this->zen_show_category($this->tree[$counter]['next_id'], $ii);
    }
    return $this->box_categories_array;
  }
}
?>

tpl_categories.php

<?php
/**
 * Side Box Template
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_categories.php 4162 2006-08-17 03:55:02Z ajeh $
 */
  $content = "";
 
  $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">' . "\n";
  for ($i=0;$i<sizeof($box_categories_array);$i++) {
    switch(true) {
// to make a specific category stand out define a new class in the stylesheet example: A.category-holiday
// uncomment the select below and set the cPath=3 to the cPath= your_categories_id
// many variations of this can be done
//      case ($box_categories_array[$i]['path'] == 'cPath=3'):
//        $new_style = 'category-holiday';
//        break;
      case ($box_categories_array[$i]['top'] == 'true'):
        $new_style = 'category-top';
        break;
      case ($box_categories_array[$i]['has_sub_cat']):
        $new_style = 'category-subs';
        break;
      default:
        $new_style = 'category-products';
      }
     if (zen_get_product_types_to_category($box_categories_array[$i]['path']) == 3 or ($box_categories_array[$i]['top'] != 'true' and SHOW_CATEGORIES_SUBCATEGORIES_ALWAYS != 1)) {
        // skip if this is for the document box (==3)
      } else {
      $content .= '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">';
      if ($box_categories_array[$i]['current']) {
        if ($box_categories_array[$i]['has_sub_cat']) {
          $content .= '<span class="category-subs-parent">' . $box_categories_array[$i]['name'] . '</span>';
        } else {
          $content .= '<span class="category-subs-selected">' . $box_categories_array[$i]['name'] . '</span>';
        }
      } else {
        $content .= $box_categories_array[$i]['name'];
      }
      if ($box_categories_array[$i]['has_sub_cat']) {
        $content .= CATEGORIES_SEPARATOR;
      }
      $content .= '</a>';
      if (SHOW_COUNTS == 'true') {
        if ((CATEGORIES_COUNT_ZERO == '1' and $box_categories_array[$i]['count'] == 0) or $box_categories_array[$i]['count'] >= 1) {
          $content .= CATEGORIES_COUNT_PREFIX . $box_categories_array[$i]['count'] . CATEGORIES_COUNT_SUFFIX;
        }
      }
      $content .= '<br />' . "\n";
    }
  }
  if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true' or SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
// display a separator between categories and links
    if (SHOW_CATEGORIES_SEPARATOR_LINK == '1') {
      $content .= '<hr id="catBoxDivider" />' . "\n";
    }
    if (SHOW_CATEGORIES_BOX_SPECIALS == 'true') {
      $show_this = $db->Execute("select s.products_id from " . TABLE_SPECIALS . " s where s.status= 1 limit 1");
      if ($show_this->RecordCount() > 0) {
        $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a>' . '<br />' . "\n";
      }
    }
    if (SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true') {
      // display limits
//      $display_limit = zen_get_products_new_timelimit();
      $display_limit = zen_get_new_date_range();
      $show_this = $db->Execute("select p.products_id
                                 from " . TABLE_PRODUCTS . " p
                                 where p.products_status = 1 " . $display_limit . " limit 1");
      if ($show_this->RecordCount() > 0) {
        $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '">' . CATEGORIES_BOX_HEADING_WHATS_NEW . '</a>' . '<br />' . "\n";
      }
    }
    if (SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true') {
      $show_this = $db->Execute("select products_id from " . TABLE_FEATURED . " where status= 1 limit 1");
      if ($show_this->RecordCount() > 0) {
        $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . CATEGORIES_BOX_HEADING_FEATURED_PRODUCTS . '</a>' . '<br />' . "\n";
      }
    }
    if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
      $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_ALL) . '">' . CATEGORIES_BOX_HEADING_PRODUCTS_ALL . '</a>' . "\n";
    }
  }
  $content .= '</div>';
?>

[vandiermen]

Dunno... I just applied it to a new 1.3.9d test site. I must be missing something. Am I supposed to see something in the Admin panel for configuring this?

have you enabled it in the admin 'Layout Boxes Controller'?

[DBB1]

have you enabled it in the admin 'Layout Boxes Controller'?

Nope, but that does the trick... Thank you.

Perhaps that little tidbit needs to be included in the readme file that comes with the contribution.

It simply says "Just unzip, install the 3 files included.....enjoy."

The instructions should probably further state that the CSS file still needs to be edited to control the menu layout, that there are no Admin controls. Stating "now, it's much easier to customize your own menu colors without having to know css" is a tad misleading perhaps.

I understand that the contribution has been around forever, but the instructions seem to assume the reader is a long-time user.

I'll contact the contributor and make these suggestions, but in the meantime, maybe this post will help someone new to the flyout menu.

Thanks again for the help!
-DBB1

[bellamagia]

I was able to find the problem in IE. It was a z-index issue and just had to place z-index on the wrapper for the main ul.

Took a little tweaking, but the menu is working great. Definitely not a horrible learning curve as this is my first zen cart site and things have come together quite nicely!

Thanks to everyone for your help!