Support for CSS Flyout Menu

[ckosloff]

Regarding the issue of getting the menu to work in IE6.
I finally achieved a cross-browser setup.
It does work in IE6, but I had to sacrifice some features, like unable to make the text align left because you cannot insert padding in IE6 without breaking the sidebox, and the text is rendered without any separation from the left border.
Of course, I can disguise this by making the sidebox without borders.
Also, cannot insert a space between the first and second cats. for the same reason., in this case, the second cat. disappears when moving to it.
In short, I cannot prevent the inherent goofiness of this browser, but it works acceptably well.
If anybody interested, will post the cat. stylesheet and the main stylesheet in zip format, in order not to cram this thread too much (yes, I had to tweak the main CSS too).
There is a hack in the contrib itself: includes --> templates --> YOUR_TEMPLATE --> sideboxes --> tpl_categories_css.php, it is explained in the file itself so there is no need to post it here.
That hack might prove useful dealing with IE6 issues, I implemented it, didn't see much difference, but it does no harm.

[Mark Kidd]

Regarding the issue of getting the menu to work in IE6.
I finally achieved a cross-browser setup.
It does work in IE6, but I had to sacrifice some features, like unable to make the text align left because you cannot insert padding in IE6 without breaking the sidebox, and the text is rendered without any separation from the left border.
Of course, I can disguise this by making the sidebox without borders.
Also, cannot insert a space between the first and second cats. for the same reason., in this case, the second cat. disappears when moving to it.
In short, I cannot prevent the inherent goofiness of this browser, but it works acceptably well.
If anybody interested, will post the cat. stylesheet and the main stylesheet in zip format, in order not to cram this thread too much (yes, I had to tweak the main CSS too).
There is a hack in the contrib itself: includes --> templates --> YOUR_TEMPLATE --> sideboxes --> tpl_categories_css.php, it is explained in the file itself so there is no need to post it here.
That hack might prove useful dealing with IE6 issues, I implemented it, didn't see much difference, but it does no harm.

Please do post the hack. I know I'd be interested in taking a look.

[ckosloff]

Please do post the hack. I know I'd be interested in taking a look.

I don't know what you mean by the hack exactly.
The onfocus="this.blur()" hack is explained in the file that I mentioned, just look at it.
The other thing is the css that I used.
I am posting my related css in zip format, just download and enjoy.
Caveat: these css work on my site, might not work in yours, just play around with the values.

[Mark Kidd]

I don't know what you mean by the hack exactly.
The onfocus="this.blur()" hack is explained in the file that I mentioned, just look at it.
The other thing is the css that I used.
I am posting my related css in zip format, just download and enjoy.
Caveat: these css work on my site, might not work in yours, just play around with the values.

Sorry to have misspoke -- upon a reread, I can see that you were only using the term in reference to the PHP edit rather than your additions to the template.

And thanks for contributing your work. I'll be looking through it this week.

[ckosloff]

Sorry to have misspoke -- upon a reread, I can see that you were only using the term in reference to the PHP edit rather than your additions to the template.

And thanks for contributing your work. I'll be looking through it this week.

There is some other stuff that might be useful, e.g. how to correct the blank image, or suppress the New Products, but it's all posted.
I think this mod needs a rewrite, but I don't have the time now.

[Mark Kidd]

One of the issues I had upon installing this add-on was that my columns are set somewhat wider than the Zen Cart defaults. CSS Flyout Menu hard-codes these values into the stylesheet_categories_menu.css, which isn't the worst thing in the world but I thought I would see if I couldn't make things a little more elegant by pulling the column width from the database and using that to size the flyout menu proportionally.

This requires changes to three files, and anyone else who is interested should consider this mod to be untested - I can't really guarantee that it'll work for you, but it seems to be doing the trick for me.

1) Comment out each of the 'width' statements in stylesheet_categories_menu.css.

2) Here is my modified tpl_categories_css.php

<?php
//
// +----------------------------------------------------------------------+
// |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: tpl_categories_css.php 2004/06/23 00:00:00 DrByteZen Exp $
//
    $content = "";
    $column_width_style = 'style="width: ' . $column_width . '"';
    
    $content .= '<div id="nav-cat" ' . $column_width_style . '>';
    
    $content .= $menulist; // see the modules/sideboxes/YOURTEMPLATE/categories_css.php for this
    
    
  if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true') {
     $content .= '<ul class="level1" ' . $column_width_style . '><li><a href=""> </a></li></ul>';  // insert a blank line/box in the menu
    if (SHOW_CATEGORIES_BOX_SPECIALS == 'true') {
      $content .= '<ul class="level1" ' . $column_width_style . '><li><a href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a></li></ul>';
    }
    if (SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true') {
      $content .= '<ul class="level1" '. $column_width_style . '"><li><a href="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '">' . CATEGORIES_BOX_HEADING_WHATS_NEW . '</a></li></ul>';
    }
    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 class="level1" '. $column_width_style . '><li><a href="' . zen_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . CATEGORIES_BOX_HEADING_FEATURED_PRODUCTS . '</a></li></ul>';
      }
    }
    if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
      $content .= '<ul class="level1" '. $column_width_style . '><li><a href="' . zen_href_link(FILENAME_PRODUCTS_ALL) . '">' . CATEGORIES_BOX_HEADING_PRODUCTS_ALL . '</a></li></ul>';
    }
  }
  $content .= '</div>';


// May want to add ............onfocus="this.blur()"...... to each A HREF to get rid of the dotted-box around links when they're clicked.
// just parse the $content string and insert it into each A HREF tag

?>

3) And here is the modified categories_css.php:

<?php
//
// +----------------------------------------------------------------------+
// |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_css.php 2004/06/23 00:00:00 DrByteZen Exp $
//

  // load the UL-generator class and produce the menu list dynamically from there
  require_once (DIR_WS_CLASSES . 'categories_ul_generator.php');
  $zen_CategoriesUL = new zen_categories_ul_generator;
  $menulist = $zen_CategoriesUL->buildTree(true);

  $flyout_width = $column_width - 10;
  $flyout_width_styled = '<a style="width: ' . $flyout_width . 'px"';

  $menulist = str_replace('<a', $flyout_width_styled, $menulist);
 
  require($template->get_template_dir('tpl_categories_css.php',DIR_WS_TEMPLATE, $current_page_base,'sideboxes'). '/tpl_categories_css.php');

  $title = BOX_HEADING_CATEGORIES;
  $left_corner = false;
  $right_corner = false;
  $right_arrow = false;
  $title_link = false;

    require($template->get_template_dir($column_box_default, DIR_WS_TEMPLATE, $current_page_base,'common') . '/' . $column_box_default);

?>

All these changes do is dynamically add the width as an inline style to the same elements which were previously being styled using the stylesheet. Aside from making it easier to adjust the width of the columns, it should also make this add-on play a little bit nicer with other add-ons and template mods that style the output of categories_ul_generator.

[cevans73]

Thanks Ckosloff for the update...I just noticed the flaw from IE6 and your update works great, thanks for sharing!

One thing, however, that is a little annoying, maybe there's an easy fix...on my menu when you move curser over a link menu, the other links drop down slightly...is there any way to prevent this?

Here is my link......
http://www.bizmug.com/zencart/

Thanks again for your help!
Chris

[ckosloff]

Thanks Ckosloff for the update...I just noticed the flaw from IE6 and your update works great, thanks for sharing!

One thing, however, that is a little annoying, maybe there's an easy fix...on my menu when you move curser over a link menu, the other links drop down slightly...is there any way to prevent this?

Here is my link......
http://www.bizmug.com/zencart/

Thanks again for your help!
Chris

I see what you mean.
When hovering on a cat. that has subcats. then the image becomes slightly bigger in the bottom and displaces the rest of the menu down.
Please note that this doesn't happen with FF, only occurrences are with IE6 and 7.
The answer is that FF is a much more standards-compliant browser.
I am not embarrased to admit that I don't know of a fix for IE, it is a goofy browser, this error happens in my site too.
On the bright side, it is barely noticeable, I wouldn't worry about it.
Better eliminate that blank image in your menu, instructions are in this same thread, just look back a few pages.

[Mark Kidd]

My earlier post with instructions on how to dynamically size the flyout menu had a couple of errors!

Sorry about that -- it turned out I missed a couple of additional alterations to the php. For those who are interested, I'm attaching an archive which should be a little easier to work with.

[welchyboy]

Hello I am trying to figure out if it is possible to use the css flyout menu for categories as well as regular links. What I would like to do is have PRODUCTS as a button and add all my "product categories" in there which makes those subcategories. I got all that working but now I would like to also have like a HOME link Contact Us, and so forth on this same menu. Isn't there a way to accomplish this. I know I have done this with the css flyout menu which went horizontal. I was able to edit the php file but this one is a little different.

The site to look at is

http://www.wpc-consulting.com/~stxmill/

Thanks for the help!

EDIT...

I am trying to get something like this
http://www.thepecanbarn.com/PecanBarnProducts.php