Sub categories displayed when hover over categories?

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

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.

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

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

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>';
?>

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