Sub categories displayed when hover over categories?

[roger06]

Hi

I was hoping to be able to display the sub categories in a vertical list when hovering over the main category (and then displayed the same when clicked on).

I was assuming the category menu would be in an unordered list (<ul>) with a nested unordered list for the sub categories so I could apply the necessary CSS.

However, on inspection of the code I see this isn't the case and that the sub cats are just indented.

Can anyone point me to any Zen sites where they've done this so I can take a look.

many thanks

Roger

[gjh42]

You could just install one of the CSS flyout menu mods from Downloads...

I have just for fun rebuilt a copy of tpl_categories.php to correctly generate <ul> lists for cats and subs. I could dig it out and post if you want to do the CSS work on your own.

[roger06]

Wonderful!! I'll download it...

If it's not too much trouble I'd certainly also appreciate taking a look at your rewrite of tpl_categories.php .

Thanks

[yellow1912]

opps lol. Posted the wrong message on the wrong forum, stupid me.

[gjh42]

Here you go!

<?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 $ gjh42 2007-12-23 - limit subcats, ul code
 */
  $content = "";
  
  $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">' . "\n";
  //ul code setup
  /*if (CATEGORIES_UL_LIST == 1) {//this section only needed if allowing to switch between ul & no ul - define CATEGORIES_UL_LIST in admin or file
    $start_ul = '<ul>';
    $end_ul = '</ul>';
    $start_li = '<li>';
    $end_li = '</li>';
  } else {
    $start_ul = '';
    $end_ul = '';
    $start_li = '';
    $end_li = '';
  }*/
  $prev_cat_depth = 0;
  $content .= '<ul>';//$start_ul;//
  // /ul code setup
  for ($i=0;$i<sizeof($box_categories_array);$i++) {
    //ul code
    $cat_depth = substr_count($box_categories_array[$i]['path'],'_');
    if ($cat_depth > $prev_cat_depth) {
      $content .= str_repeat('<ul>',($cat_depth - $prev_cat_depth));
    } elseif ($cat_depth < $prev_cat_depth) {
      $content .= str_repeat('</ul>',$prev_cat_depth - $cat_depth);
    }
    $prev_cat_depth = $cat_depth;
    // /ul code

    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';
      }
 // subcat limit 2007-12-20   if (substr_count($box_categories_array[$i]['path'],'_') > 1 or 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)) {
     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 .= /*ul code*/'<li><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 .= /*ul code*/'</li>' . "\n";
    }
  }
  //ul code
  $content .= str_repeat('</ul>',$cat_depth+1);
  // /ul code

  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";
    }
    $content .= /*ul code*/'<ul>';
    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 .= /*ul code*/'<li><a class="category-links" href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a>' . /*ul code*/'</li>' . "\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 .= /*ul code*/'<li><a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '">' . CATEGORIES_BOX_HEADING_WHATS_NEW . '</a>' . /*ul code*/'</li>' . "\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 .= /*ul code*/'<li><a class="category-links" href="' . zen_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . CATEGORIES_BOX_HEADING_FEATURED_PRODUCTS . '</a>' . /*ul code*/'</li>' . "\n";
      }
    }
    if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
      $content .= /*ul code*/'<li><a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_ALL) . '">' . CATEGORIES_BOX_HEADING_PRODUCTS_ALL . '</a>' . /*ul code*/'</li>' . "\n";
    }
    $content .= /*ul code*/'</ul>';
  }
  $content .= '</div>';
?>

[roger06]

Many thanks for the code gjh42.

I've downloaded and installed the CSS Fly Out menus - but they don't work in IE on Windows - any ideas ?

Thanks