Support for CSS Flyout Menu

[cevans73]

Ok I've searched the forum left and right and have come close but can't nail down where I can get rid of or reduce the top margin space in my left category link box....I have a custom template and the css flyout installed, see my site below....
http://www.bizmug.com/zencart/

PLEASE HELP ME!

THANKS IN ADVANCE!

CHRIS

[ckosloff]

Ok I've searched the forum left and right and have come close but can't nail down where I can get rid of or reduce the top margin space in my left category link box....I have a custom template and the css flyout installed, see my site below....
http://www.bizmug.com/zencart/

PLEASE HELP ME!

THANKS IN ADVANCE!

CHRIS

The problem is caused by your custom template.
If you look at that element in your Web Dev toolbar, you will see that it is a "td" (table data), coming, obviously, from a table.
Search for that table in your template and kill the td.
PS. If you don't have Web Dev, rush and install it. It is a free Firefox extension, indispensable.
Then go to Information --> Display element information. Mystery solved.

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

[Mark Kidd]

I just wanted to say thanks to cmwoods and point out this great contribution from page two of the thread. For those of us who want to get right down to the basics of a CSS flyout menu in order to integrate it with the look and feel of their template, this stylesheet is a much better starting point.

Maybe it could even be included as an alternative in the next release of the contribution.

I had this problem too with the CSS Flyout. It's to do with the display of the submenu blocks which doesn't get cleared when you leave the menu with a submenu displaying. If you leave the menu by coming back towards the left, you don't get the problem. It also only appears to affect IE as FF is fine.

Tidy up the stylesheet for the CSS Flyout first as there are bugs/extra settings there which you do not need and you'll be able to get a better idea of which setting needs changing.

The following is the stylesheet for my CSS Flyout menu, which will give you an idea of what is actually needed and also gives a clearer explanation of what each line affects.

I think your issue may also be to do with having different widths on your second/third column than on your first.

HTH

* WD CSS Flyout Menu Stylesheet - CMW 13/02/2008 */
/* WinIE Behavior Call */
body {
behavior: url(includes/csshover.htc);
}
 
/* Overall Settings for CSS Flyout Sidebox Area */
div#nav-cat {
width: 150px; /* Sets sidebox to 150px wide - Set width below for the CSS Flyout */
margin: 0; /* Sets sidebox to no margin - Set margin below for the CSS Flyout */
background-color: #1D4DA1; /* Sets sidebox background colour to WD BLue, Set colour below for the CSS Flyout */
font-weight: bold; /* Set sidebox to bold text - Applies throughout entire sidebox and CSS Flyout */
}
 
/* Overall Settings for CSS Flyout Menu Area */
div#nav-cat ul {
line-height: 18px; /* Sets CSS Flyout List Area Lines to 20px high - Applies throughout menu system */
width: 150px; /* Sets CSS Flyout to 150px wide, matching the width of the entire sidebox which is set above */ 
margin: 0; /* Sets CSS Flyout List Area to no margin, - Applies throughout menu system */
padding: 0; /* Sets CSS Flyout List Area to no padding - Applies throughout menu system */
background-color: #1D4DA1; /* Sets CSS Flyout List Area background colour to WD BLue - Applies throughout menu system unless overridden */
}
 
/* Sets Backgrond Colour for further submenu blocks */
div#nav-cat ul.level2, div#nav-cat ul.level3, div#nav-cat ul.level4, div#nav-cat ul.level5, div#nav-cat ul.level6 {
background-color: #1D4DA1; /* Sets CSS Flyout List Area background colour to WD Blue - Applies to all levels apart from the first one */
}
 
/* Sets Category Text Background Options */
div#nav-cat li {
position: relative; /* Sets the submenu to display inline with the previous menu - Applies throughout menu system */
list-style: none; /* Sets the list to display without any indentation or markers - Applies thorughout menu system */
margin: 0; /* Sets each line item to no margin - Applies throughout menu system */ 
z-index: 1; /* Ensures the menu displays on top of other items on the page - Applies throughout menu system - may need to alter this value */ 
border-bottom: 1px solid #1d4da1; /* Sets each line item to have a tiny border just on the bottom, required to get this thing to work in IE6 - Applies throughout menu system */
}
 
/* Sets Currently Hovered Category and it's parent category to orange background */
div#nav-cat li:hover {
background-color: #FF9900; /* Sets the background color of a line item which is being hovered over to WD Orange - Applies throughout menu system */
}
 
/* Sets Category Text Background for categories with subcats */
div#nav-cat li.submenu {
background: url(../images/submenu.gif) 95% 50% no-repeat; /* Adds an image to the end of each line item containing a sub-menu - Applies throughout menu system */
}
 
/* Sets currently hovered parent category on the Main Menu to orange background */
div#nav-cat li.submenu:hover {
background-color: #FF9900; /* Sets the background color of a line item that contains a submenu which is being hovered over to WD Orange - Applies throughout themenu structure */
}
 
/* Settings for Category Text */
div#nav-cat li a {
display: block; /* Sets the whole of the line to be clickable, rather than just the text - Applies throughout menu system */
padding: 0.25em 0 0.25em 0.5em; /* Positions the text on each line item into a more central position - Applies throughout menu system */
text-decoration: none; /* Sets the text to disdplay normally with no unwanted effects - Applies throughout menu system */
width: 140px; /* Sets the width of the text area to 140px wide - Applies throughout menu system */
color: #FFFFFF; /* Sets the text to be white - Applies throughout menu system */ 
}*/ /* This strange closing comment mark seems to be necessary to get this to work properly */
 
/* Settings for the display of submenu blocks */
div#nav-cat ul a{
width: auto; /* Sets the submenu block width to auto - If not present menu displays as huge list - Applies throughout menu system */
}
 
/* Settings for position of submenu blocks */
div#nav-cat ul ul {
position: absolute; /* Sets the submenu blocks to display alongside and below the parent menu - Applies throughout menu system */
top: 0; /* Sets the position of submenu blocks to line up against the parent menu at the top - Applies throughout menu system */
left: 150px; /* Sets the position of submenu blocks to line up against the parent menu on the side - Applies throughout menu system */
display: none; /* Sets the submenu blocks NOT to display - Seems strange but if this isn't included strange effects occur - Applies throughout menu system */
}
 
/* Settings for extra submenu blocks */
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; /* Sets submenu blocks TO display when they are being hovered over, overriding setting directly above - Applies throughout menu system */
}

[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       |
// | license@zen-cart.com 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       |
// | license@zen-cart.com 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