"Dynamenu" for osCommerce

[TracyS]

You can change the appearance in the stylesheet settings.

 

Hi , i did use the hide categ attribute to hide the categories from left column , so i can isolate the hidden ones in dynamenu.

 

I would also like to ask if i can use the tree menu without the vertical lines appear and the nod boxes on the left , more looking like a roll over tree menu .

 

Thanks

 

Demetris

[TracyS]

Is this what you have in your stylesheet:

.vertsubmenu	{   /* Behaviour of sub-menu  - leave as is for proper operation of submenus */
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}

 

I am having the same issue..did you manage to solve the problem?

[Guest]

You can change the appearance in the stylesheet settings.

 

 

Hi TracyS , what i really need to change is the behavior of the menu , i will try things and i will come back to result .

 

I found solution on calling some categories only , i created a category that is hiden with a contribution from main categories menu which is placed in left column and on dynamenu , i call only the category with id 196 which includes the subcategories i want but as main categories -mean you dont see the cad id 196 - .

 

I changed the line 245 in dm_categories.php from

// Create the root category list

function tep_make_cat_dmlist($rootcatid = 0, $maxlevel = 0){

 

to

 

// Create the root category list

function tep_make_cat_dmlist($rootcatid = 196, $maxlevel = 196){

 

and works ok.

 

Thanks and regards

 

Demetris

[TracyS]

I was responding to this portion of your comment:

 

I would also like to ask if i can use the tree menu without the vertical lines appear and the nod boxes on the left , more looking like a roll over tree menu .

 

Hi TracyS , what i really need to change is the behavior of the menu , i will try things and i will come back to result .

 

I found solution on calling some categories only , i created a category that is hiden with a contribution from main categories menu which is placed in left column and on dynamenu , i call only the category with id 196 which includes the subcategories i want but as main categories -mean you dont see the cad id 196 - .

 

I changed the line 245 in dm_categories.php from

// Create the root category list

function tep_make_cat_dmlist($rootcatid = 0, $maxlevel = 0){

 

to

 

// Create the root category list

function tep_make_cat_dmlist($rootcatid = 196, $maxlevel = 196){

 

and works ok.

 

Thanks and regards

 

Demetris

[Guest]

I was responding to this portion of your comment:

 

 

My mistake didn't define it correct , mostly is about the behavior of the menu , but after your response i changed few things in stylesheet and i think is on is way .

 

About the category part i just thought to share .

 

Thanks

 

Demetris

[Guest]

This is the website working on www.toyplanet.com.cy , all the comments are welcome

 

Thanks

[xciso]

Hi everyone!

Where can i found the last version of Dynamenu? It most looks like addons for addons for addons for a old version..

I am using STS for my shop if this is a another version for that.

 

Thanks!

Edited June 3, 2010 by xciso

[enviromantic]

Yes, that's what I have in my stylesheet. Ive tried adjusting the

$menu_layer_offset = array (0,4,4);

but it breaks if I minimise the browser window or view on a different screen resolution.

 

Is this what you have in your stylesheet:

.vertsubmenu	{   /* Behaviour of sub-menu  - leave as is for proper operation of submenus */
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}

[Francys]

If anyone here succeded using dynamenu contrib to display categories and all products SEO i would like you to PM me with the solution for showing in the dynamenu the all products link. (or just post in here for everyone preferably ofcourse )

 

I don't know where to insert this bit of code to make it work (i think all the necessary variables and parameters are declared in other place)

 

  $info_box_contents[] = array('align' => 'center',
                              'text'  => '<a class="allproductsBox" href="' . tep_href_link(FILENAME_SPECIALS, '', 'NONSSL') . '" title="' . BOX_INFORMATION_ALLPRODS_SEO_SPECIALS . '">' . BOX_INFORMATION_ALLPRODS_SEO_SPECIALS . '</a>');

 

Here are the instructions:

INSTALL INSTRUCTIONS:
************************************************************************
1) Make the database changes by uploading the allprods_seo.sql file.

************************************************************************
2) Upload the contents of the catalog_New_Files_Only directory. Note that
  if you are using languages other than English, you need to upload the
  english/all-products.php file to the other languages directories and
  then edit that file to translate the English text.

************************************************************************
3) In admin/includes/boxes/tools.php,

FIND:

   $contents[] = array('text'  => '<a href="' . tep_href_link(FILENAME_BACKUP) . '" class="menuBoxContentLink">' . BOX_TOOLS_BACKUP . '</a><br>' .

REPLACE WITH:

//BOF code replace all products SEO contribs
$contents[] = array('text'  => '<a href="' . tep_href_link(FILENAME_ALLPRODS_SEO) . '" class="menuBoxContentLink">' . BOX_TOOLS_ALL_PRODUCTS_SEO . '</a><br>' .
                                  '<a href="' . tep_href_link(FILENAME_BACKUP) . '" class="menuBoxContentLink">' . BOX_TOOLS_BACKUP . '</a><br>' .
//EOF code replace all products SEO contribs

************************************************************************
4) In admin/includes/languages/english.php (and any other language you use),
  before the last ?>

ADD:

/*** BOF code added All Products SEO ***/
// all-products box text in includes/tools/all-products.php
define('BOX_TOOLS_ALL_PRODUCTS_SEO', 'All Products SEO');
/*** EOF code added All Products SEO ***/

************************************************************************
5) In admin/includes/database_tables.php, before the last ?>

ADD
/*** BOF code added All Products SEO ***/
define('TABLE_ALL_PRODUCTS_SEO', 'all_products_seo');
/*** EOF code added All Products SEO ***/
************************************************************************
6) In admin/includes/filenames.php, before the last ?>

ADD

/*** BOF code added All Products SEO ***/
 define('FILENAME_ALLPRODS_SEO', 'all-products.php');
/*** EOF code added All Products SEO ***/
************************************************************************
7) In catalog/includes/column_left.php (or column_right.php if you prefer),

FIND:

 Released under the GNU General Public License
*/

ADD AFTER:

/*** BOF code added All Products SEO ***/
 if (ALL_PRODUCTS_SEO == 'true' && ALL_PRODUCTS_SEO_DISPLAY_QUICK_SEARCH_BOX == 'true')
   include(DIR_WS_BOXES . 'all-products.php');
/*** EOF code added All Products SEO ***/
************************************************************************
8) In catalog/includes/database_tables.php, before the last ?>,

ADD:
/*** BOF code added All Products SEO ***/
 define('TABLE_ALL_PRODUCTS_SEO', 'all_products_seo');
/*** EOF code added All Products SEO ***/
************************************************************************
9) In catalog/includes/filenames.php, before the closing ?>

ADD:
/*** BOF code added All Products SEO ***/
 define('FILENAME_ALLPRODS_SEO', 'all-products.php');
/*** EOF code added All Products SEO ***/
************************************************************************
10) In catalog/includes/application_top.php,

FIND:

  $navigation->add_current_page();

ADD BENEATH:

 /*** BOF code added All Products SEO ***/
  if (ALL_PRODUCTS_SEO == 'false' && strpos(basename($_SERVER['PHP_SELF']), FILENAME_ALLPRODS_SEO) !== FALSE) {
    tep_redirect(tep_href_link(FILENAME_DEFAULT));
  }
 /*** EOF code added All Products SEO ***/

************************************************************************
11) In catalog/includes/languages/english.php (and any other languages you use),
   before the closing ?>.

ADD:

/*** BOF code added All Products SEO ***/
define('BOX_INFORMATION_ALLPRODS_SEO_CATEGORIES', 'View All Products');
define('BOX_INFORMATION_ALLPRODS_SEO_SPECIALS', 'View All Discount Products');
define('BOX_INFORMATION_ALLPRODS_SEO_WHATSNEW', 'View Latest Additions');
/*** EOF code added All Products SEO ***/

************************************************************************
12) In stylesheet.css, at the end,

ADD:

/*** BOF code added All Products SEO ***/
.allproductsBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ffce00; }
a.allproductsBox { color: #ff0000; }
a.allproductsBox:hover { color: #00cc00; }
h1 {
font-family: Verdana, Arial, sans-serif;
font-size: 20px;
font-weight: bold;
margin-bottom: 0;
padding-bottom: 0;
color: #000;
}
h2 {
font-family: Verdana, Arial, sans-serif;
font-size: 14px;
font-weight: normal;
margin-bottom: 0;
padding-bottom: 0;
color: #000;
}
/*** EOF code added All Products SEO ***/

NOTE: only add the h1 and h2 classes if they do not already exist.

************************************************************************
13) In catalog/includes/boxes/categories.php,

FIND:

  new infoBox($info_box_contents);

ADD BEFORE:

//BOF Code added all products SEO contribs
$info_box_contents[] = array('align' => 'center',
                               'text'  => '<a class="allproductsBox" href="' . tep_href_link(FILENAME_ALLPRODS_SEO, '', 'NONSSL') . '" title="'  . BOX_INFORMATION_ALLPRODS_SEO_CATEGORIES . '">' . BOX_INFORMATION_ALLPRODS_SEO_CATEGORIES . '</a>');
//EOF code added all products SEO contribs
************************************************************************
14) In catalog/includes/boxes/specials.php,

FIND:

  new infoBox($info_box_contents);

ADD BEFORE:
//BOF Code added all products SEO contribs
 $info_box_contents[] = array('align' => 'center',
                              'text'  => '<a class="allproductsBox" href="' . tep_href_link(FILENAME_SPECIALS, '', 'NONSSL') . '" title="' . BOX_INFORMATION_ALLPRODS_SEO_SPECIALS . '">' . BOX_INFORMATION_ALLPRODS_SEO_SPECIALS . '</a>');
//EOF code added all products SEO contribs
************************************************************************
15) In catalog/includes/boxes/whats-new.php,

FIND:

  new infoBox($info_box_contents);

ADD BEFORE:
//BOF code added all products SEO contribs
 $info_box_contents[] = array('align' => 'center',
                              'text' => '<a class="allproductsBox" href="' . tep_href_link(FILENAME_PRODUCTS_NEW) . '" title="' . BOX_INFORMATION_ALLPRODS_SEO_WHATSNEW . '">' . BOX_INFORMATION_ALLPRODS_SEO_WHATSNEW .'</a>');
//EOF code added all products SEO contribs

************************************************************************
16) If, and only if, you do not have the following in the 
   admin/includes/functions/html_output.php file, add it before the last ?>

////
// Hide form elements
 function tep_hide_session_id() {
   $string = '';

   if (defined('SID') && tep_not_null(SID)) {
     $string = tep_draw_hidden_field(tep_session_name(), tep_session_id());
   }

   return $string;
 }

========================================================================

That completes the code changes part of the installation.

************************************************************************
ADMIN SETTINGS:
************************************************************************
Go to admin->Tools and click on the All Products SEO link. See the
instructions on that page to fill in those settings.

Then go to admin->Configuration->All Products SEO and change the settings
to your liking.

************************************************************************
The support thread is at
http://www.oscommerce.com/forums/topic/314262-all-products-seo

 

 

 

I know everyone with a shop in general should use all products SEO contribs, to allow clients seeing all products with a click, the problem is with dm_categories.php is being called so... how did you sort it out for your shop answer would be appreciated and thanks in advance.

 

Francys

Edited June 6, 2010 by Francys

[Freddy.K]

Hello!

 

Superb contribution thanks a bunch!

 

Bit curious - how do I configure Dynamenu (I use a tree menu) so that the category will expand when clicking on the category name? (Not only on the '+' or the closed folder icon)

 

Thanks in advance! :-)

[TracyS]

Did you try following this instruction:

13) In catalog/includes/boxes/categories.php,

FIND:

  new infoBox($info_box_contents);

ADD BEFORE:

//BOF Code added all products SEO contribs
$info_box_contents[] = array('align' => 'center',
                               'text'  => '<a class="allproductsBox" href="' . tep_href_link(FILENAME_ALLPRODS_SEO, '', 'NONSSL') . '" title="'  . BOX_INFORMATION_ALLPRODS_SEO_CATEGORIES . '">' . BOX_INFORMATION_ALLPRODS_SEO_CATEGORIES . '</a>');
//EOF code added all products SEO contribs

 

If so - did it do any good? I believe Dynamenu pulls from the categories scripting, but I think it's in the application_top file that it pulls from.

 

You might have to add that bit of code to catalog/includes/boxes/dm_categories.php - find this block of code:

// Initialize HTML and info_box class if displaying inside a box
if ($show_dmcats_as_box) {
   echo '<tr><td>';
   $info_box_contents = array();
   $info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES);
   new CategoriesBoxHeading($info_box_contents, true, false);					
}

 

And put the added code between echo'<tr><td>'; and $info_box_contents = array(); - like this:

 

// Initialize HTML and info_box class if displaying inside a box
if ($show_dmcats_as_box) {
   echo '<tr><td>';
//BOF Code added all products SEO contribs
$info_box_contents[] = array('align' => 'center',
                               'text'  => '<a class="allproductsBox" href="' . tep_href_link(FILENAME_ALLPRODS_SEO, '', 'NONSSL') . '" title="'  . BOX_INFORMATION_ALLPRODS_SEO_CATEGORIES . '">' . BOX_INFORMATION_ALLPRODS_SEO_CATEGORIES . '</a>');
//EOF code added all products SEO contribs

$info_box_contents = array();

$info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES);

new CategoriesBoxHeading($info_box_contents, true, false);

}

[/code]

 

I'm not positive if that will work or not - but it's worth a try - just backup your files first :-)

 

If anyone here succeded using dynamenu contrib to display categories and all products SEO i would like you to PM me with the solution for showing in the dynamenu the all products link. (or just post in here for everyone preferably ofcourse )

 

I don't know where to insert this bit of code to make it work (i think all the necessary variables and parameters are declared in other place)

 

  $info_box_contents[] = array('align' => 'center',
                              'text'  => '<a class="allproductsBox" href="' . tep_href_link(FILENAME_SPECIALS, '', 'NONSSL') . '" title="' . BOX_INFORMATION_ALLPRODS_SEO_SPECIALS . '">' . BOX_INFORMATION_ALLPRODS_SEO_SPECIALS . '</a>');

[TracyS]

You would most likely need to edit the template files for the tree menu found here:

 

catalog/includes/functions/dynamenu/templates/

 

I'm guessing it's the plain menu template that's used? It looks like the <a href> tag wraps around the {text} though, so it might be elswhere. Try viewing your source code from your browser window and see if reading the code around your menu helps you any in pinpointing where to change the link tag so it wraps around your text too.

 

 

Hello!

 

Superb contribution thanks a bunch!

 

Bit curious - how do I configure Dynamenu (I use a tree menu) so that the category will expand when clicking on the category name? (Not only on the '+' or the closed folder icon)

 

Thanks in advance! :-)

[Francys]

Did you try following this instruction:

 

I'm not positive if that will work or not - but it's worth a try - just backup your files first :-)

 

Hi TracyS

 

First of all thanks for your feedback, i have tried what you said, and it still isn't appearing in my always expanded tree menu the option to see All products in the shop (using the all products SEO contribution).

 

I am using dinamenu with spooks hint to personalize the infobox.

 

If anyone knows more feel free to share

 

thanks in advance

Francys

[itzbilly]

To those having issues with the flyouts using STS:

 

I just installed osCommerce RC2a, added Dynamenu (Nate's May 27, 2006 version) and flyouts work perfectly.

 

I then added STSv4.5.8. The menu no longer appears because I have to do a few extra additions as follows:

 

1. Create the new dynamenu infobox tag (I did this in sts_column_left.php, just under the manufactures tag:
   

   // Get manufacturer box from db or cache  
    if ((USE_CACHE == 'true') && empty($SID)) {
   echo tep_cache_manufacturers_box();
    } else {
   include(DIR_WS_BOXES . 'manufacturers.php');
    }
    $sts->restart_capture ('manufacturerbox', 'box');require(DIR_WS_BOXES . 'dm_categories.php');
    $sts->restart_capture('dmbox', 'box'); // Get Dynamenu Category box
   
    require(DIR_WS_BOXES . 'whats_new.php');
    $sts->restart_capture ('whatsnewbox', 'box'); // Get What's new box

   
   

2. I then have to add duplicate the footer.php mods in the application_bottom.php file as so (add the following lines at the very end of the file just before the last closing tag - it will look like this):
   

   	// Output the footer for Dynamenu for osCommerce
   echo $GLOBALS['dmfooter'];
   ?>

   
   

3. I then copy all of the stylesheet mods from dynamenu to my stylesheet.css file at the very end of the file.
   
4. I then add the $dmbox tag to each of my templates where I want to display the dynamenu category box.
   
5. STS is setup by default to look for the stylesheet.css file in the root directory. Change this in your template if you need it to point somewhere else.
   

Now the flyouts work perfectly using Dynamenu, osC RC2a and STSv4.5.8.

There are no incompatibilities with Dyanmenu and STSv4.5.8. If you do the above, then it shouls work perfectly for you.

 

Hope this helped clear things up for you,

 

Followed the instructions word for word.. got the menu to work on IE8.

 

FFox and Chrome did not show the flyouts at all, and IE8 would only show flyouts under compatibility mode. IE8, however, would not display the menu over a flash movie that I have on the site.

 

Please help!

 

Pic of IE8 issue:

http://img191.imageshack.us/img191/2826/31356143.jpg

[itzbilly]

^ solved issue with flyouts not showing in FFox and Chrome but still having issue with flash being on top of menu. The only time flyouts would be on top is in FFox. IE8 and Chrome show the flyouts as being under the Flash. Any way to fix this?

[haf683]

Hi everyone,

 

I'm having problems with this add-on. It works perfectly in FF and Safari, however in IE the submenu links all appear on 1 line overwriting each other.

 

You can visit the shop here : http://cwicellular.com/shop/catalog/index.php

 

Does anyone have a solution to this?

 

Thanks in advance!

[TracyS]

haf683 and itzbilly,

 

Typically, differences between the way browsers handle your site have to do with your stylesheet settings.

 

itzbilly - what is your z-index for the flash movies vs for the menu?

 

haf683 - compare your submenu stylesheet settings with the settings that come in the contribution.

 

Hi everyone,

 

I'm having problems with this add-on. It works perfectly in FF and Safari, however in IE the submenu links all appear on 1 line overwriting each other.

 

You can visit the shop here : http://cwicellular.com/shop/catalog/index.php

 

Does anyone have a solution to this?

 

Thanks in advance!

[itzbilly]

haf683 and itzbilly,

 

Typically, differences between the way browsers handle your site have to do with your stylesheet settings.

 

itzbilly - what is your z-index for the flash movies vs for the menu?

 

haf683 - compare your submenu stylesheet settings with the settings that come in the contribution.

 

Z-index for menu and layout of site are 4 and under. Tried putting z-index of flash file on 5, 3, 2, 1, 0. No difference.

[TracyS]

If it is making no difference, then you may not have the elements positioned correctly - see this article for reference:

http://www.w3schools.com/css/pr_pos_z-index.asp

 

 

Z-index for menu and layout of site are 4 and under. Tried putting z-index of flash file on 5, 3, 2, 1, 0. No difference.

[haf683]

Thank you Tracy,

 

After comparing the stylesheets, I noticed something that I did wrong!

 

Works fine now, thanks!

[ken1645]

^ solved issue with flyouts not showing in FFox and Chrome but still having issue with flash being on top of menu. The only time flyouts would be on top is in FFox. IE8 and Chrome show the flyouts as being under the Flash. Any way to fix this?

How did you solve the problem of FF now showing the flyouts??

 

I've installed dynamenu and the "products in dynamenu too" contribution and it works great in IE8 but does not have the flyouts in FF.

 

any help appreciate. much thanks!

 

-Kendall

[ken1645]

Also I just realized that when I was using the ProductsInCategories dynamenu too the Shopping Cart checkout system had an error resulting in no one being able to purchase anything.

 

 

 

nevermind about the previous question, this contribution is not usable.

[itzbilly]

How did you solve the problem of FF now showing the flyouts??

 

I've installed dynamenu and the "products in dynamenu too" contribution and it works great in IE8 but does not have the flyouts in FF.

 

any help appreciate. much thanks!

 

-Kendall

 

Kendall,

 

In the STS template file, there should be a div code at the end of the file. If there isn't, adding and leaving a <div> open fixed the flyout for me. Remember to leave it open (no closing </div> tag). Then change the stylesheet accordingly so that the menu will open up where you need it to.

 

If it is making no difference, then you may not have the elements positioned correctly - see this article for reference:

http://www.w3schools.com/css/pr_pos_z-index.asp

 

Tracy,

 

Do you know where I should add the z-index to my menu stylesheet? I tried adding it to verbar and vertsubmenu but it's still not making any difference. Currently, my entire layout is on z-index 3 and menu is on z-index 4. I have tried flash on z-index 3, 2, 1, 0. No go.

 

Do you mind taking a look at my stylesheet and seeing if there's anything I missed? div.coupon is my flash.

 

@charset "utf-8";

/* CSS Document

   Copyright (c) Freeoscommerce.com 2009

This file is part of a freeoscommerce.com template.  Please visit http://www.freeoscommerce.com for licensing and other information.
*/

body {
margin: 0px;
padding: 0px;
background: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: justify;
}

div#wrapper1 {
position: relative;
width: 100%;
min-height: 500px;
margin: 30px 0px 0px 0px;
overflow: auto;
}

div#wrapper2 {
z-index: 3;
position: relative;
left: 50%;
width: 949px;
padding: 94px 0px 94px 0px;
margin-left: -474px;
min-height: 300px;
}

div#header_wrapper {
position: relative;
top: -100px;
width: 949px;
min-height: 140px;
overflow: auto;
}

div#header_top {
z-index: 3;
position: absolute;
top: 0px;
width: 949px;
height: 140px;
background: url(images/footer_header_top.png) top center no-repeat;
}

div#header_bottom {
z-index: 3;
position: absolute;
bottom: 0px;
width: 949px;
height: 0px;
background: url(images/footer_header_bottom.jpg) top center no-repeat;
}

div#menu {
z-index: 4;
position: relative;
width: 949px;
padding-top: 89px;
color: #ffffff;
font-size: 16px;
text-align: right;
font-weight: bold;
}

div#menu span {
margin: 0px 25px 0px 25px;
}

div#wrapper3 {
z-index: 3;
position: relative;
top: -99px;
width: 966px;
padding: 10px 0px 10px 0px;
min-height: 10px;
overflow: auto;
}

div#column_left {
position: relative;
float: left;
width: 190px;
padding: 0px 0px 10px 0px;
min-height: 300px;
overflow: hidden;
}

div#column_middle {
position: relative;
float: left;
width: 726px;
min-height: 300px;
padding: 10px 20px 10px 20px;
overflow: auto;
}

div#column_right {
position: relative;
float: left;
width: 190px;
padding: 0px 0px 10px 0px;
min-height: 300px;
overflow: hidden;
}

div#footer_wrapper {
position: relative;
width: 949px;
top:-120px;
min-height: 79px;
background: url(images/footer_header_middle.jpg) top center repeat-y;
overflow: auto;
}

div#footer_top {
z-index: 3;
position: absolute;
top: 0px;
width: 949px;
height: 52px;
background: url(images/footer_header_top.jpg) top center no-repeat;
}

div#footer_bottom {
z-index: 3;
position: absolute;
bottom: 0px;
width: 949px;
height: 26px;
background: url(images/footer_header_bottom.jpg) top center no-repeat;
}

div#footer {
z-index: 4;
position: relative;
width: 919px;
padding: 15px;
color: #000000;
text-align: center;
}

div#background_middle {
z-index: 1;
position: absolute;
width: 100%;
top: 0px;
height: 100%;
background: url(images/main_middle.jpg) top center repeat-y;
}

div#background_top {
z-index: 2;
position: absolute;
width: 100%;
top: 0px;
height: 200px;
background: url(images/main_top.jpg) top center repeat-y;
}

div#background_bottom {
z-index: 2;
position: absolute;
width: 100%;
bottom: 0px;
height: 200px;
background: url(images/main_bottom.jpg) bottom center repeat-y;
}

div#website_name {
z-index: 4;
position: absolute;
width: 640px;
top: 50px;
left: 50%;
margin-left: -175px;
text-align: right;
color: #000000;
font-size: 26px;
}

a:link {
color: #000000;
text-decoration: none;
}

a:visited {
color: #000000;
text-decoration: none;
}

a:hover {
color: #ff9c00;
text-decoration: none;
}

a:active {
color: #f5be54;
text-decoration: none;
}

#menu a:link {
color: #FFFFFF;
text-decoration: none;
}

#menu a:visited {
color: #FFFFFF;
text-decoration: none;
}

#menu a:hover {
color: #000000;
text-decoration: none;
}

#menu a:active {
color: #ffffff;
text-decoration: none;
}

/* Hide icons in page headings */
#pageIcon, td.pageHeading img {
display: none;
}

h1 {
font-size: 14px;
font-weight: bold;
}
h2 {
font-size: 13px;
font-weight: bold;
}
h3 {
font-size: 12px;
font-weight: bold;
}
h4 {
font-size: 12px;
}
h5 {
font-size: 12px;
}
h6 {
font-size: 12px;
}

div#column_middle td.infoBoxHeading {
padding-top: 10px; 
padding-bottom: 0px;
font-size: 15px;
font-weight: bold;
}

td.pageHeading {
padding: 0px;
font-size: 20px;
font-weight: bold;
}

div#navigation {
margin-top: 0px;
margin-bottom: 15px;
color: #000000;
}

div.side_column div.infobox {
position: relative;
width: 190px;
min-height: 109px;
margin: 0px 0px 10px 0px;
background: url(images/sidebar_middle.jpg) top center repeat-y;
}

div.side_column div.infobox_top {
z-index: 3;
position: absolute;
top: 0px;
width: 190px;
height: 77px;
background: url(images/sidebar_top.jpg) top center no-repeat;
}

div.side_column div.infobox_bottom {
z-index: 3;
position: absolute;
bottom: 0px;
width: 190px;
height: 31px;
background: url(images/sidebar_bottom.jpg) top center no-repeat;
}

div.side_column div.infobox_heading {
z-index: 4;
position: relative;
width: 150px;
height: 17px;
padding: 15px 10px 5px 10px;
margin: 0px 10px 0px 10px;
background: url(images/sidebar_heading.jpg) bottom center no-repeat;
color: #000000;
font-weight: bold;
}

div.side_column div.infobox_heading_shoppingcart {
z-index: 4;
position: relative;
width: 150px;
height: 17px;
padding: 15px 10px 5px 10px;
margin: 0px 10px 0px 10px;
background: url(images/sidebar_heading1.jpg) bottom center no-repeat;
color: #FFFFFF;
font-weight: bold;
}

div.side_column div.infobox_content {
z-index: 4;
position: relative;
width: 170px;
padding: 10px 10px 10px 10px;
}

div.side_column div.infobox_heading a:link {
color: #000000;
text-decoration: none;
}

div.side_column div.infobox_heading a:visited {
color: #000000;
text-decoration: none;
}

div.side_column div.infobox_heading a:hover {
color: #ffffff;
text-decoration: none;
}

div.side_column div.infobox_heading a:active {
color: #000000;
text-decoration: none;
}

div.side_column div.infobox_heading_shoppingcart a:link {
color: #FFFFFF;
text-decoration: none;
}

div.side_column div.infobox_heading_shoppingcart a:visited {
color: #FFFFFF;
text-decoration: none;
}

div.side_column div.infobox_heading_shoppingcart a:hover {
color: #000000;
text-decoration: none;
}

div.side_column div.infobox_heading_shoppingcart a:active {
color: #FFFFFF;
text-decoration: none;
}

div.side_column table.infoBox {
width: 170px;
overflow: hidden;
}

td.infoBoxHeading img, td.infoBoxHeading img {
display: none;
}

td.infoBoxHeading a img, td.infoBoxHeading a img {
display: inline;
}

div#column_middle td.infoBoxHeading {
padding: 0px 0px 10px 0px;
}

td.main textarea {
height: 200px; 
width: 370px;
}


div.coupon {
position: relative;
z-index: 0;
}



/*---------------------------------*/
/*   Vertical Fly-Out Menu Style   */
/*---------------------------------*/

.verbar	{   /* Color of main vertical menubar and border */
color: black;
background-color: #dfdfdf;
border: 0px outset #dfdfdf;
z-index:4;
}

.vertitem	{          /* Behaviour of main vertical menu items, leave as is for proper operation */
text-align: left;
white-space: normal;
}

.vertitem	a {   /* Font style, size of main menu items */
 font-family: Verdana, Arial, sans-serif;
font-size: 12px;		
text-decoration: none;
position: relative;
display: block;		
}

.vertitem a:link, .vertitem a:visited	{   /* Default font style & color of main menu items */
color: #000000;
text-decoration: none;	
}

.vertitem a:hover	{   /* Font style & color, background menu color of main menu item when hovered over */
color: #000000;
background-color: #f8b83d;
text-decoration: none;
}

.vertitem a:active	{   /* Font style & color, background menu color of main menu item when clicked */
color: #ffff00;
background-color: #f8b83d;	
text-decoration: none;	
}

.vertsubmenu	{   /* Behaviour of sub-menu  - leave as is for proper operation of submenus */
position: absolute;
left: 0;
top: 0;
visibility: hidden;
z-index:4;
}

.vertsubframe	{   /* Color of submenu item and border */
background-color: #dfdfdf;
border: 0px outset #dfdfdf;

position: relative;
display: block;	
}

.vertsubitem	{     /* Behaviour of sub-menu  - leave as is for proper operation of submenus */
text-align: left;
white-space: normal;
}

.vertsubitem a	{   /* Font style, size of submenu items */
 font-family: Verdana, Arial, sans-serif;
font-size: 12px;			
text-decoration: none;

position: relative;
display: block;	
}

.vertsubitem a:link, .vertsubitem a:visited	{   /* Default font style & color of submenu items */
color: #000000;
text-decoration: none;	
}

.vertsubitem a:hover	{   /* Font style & color, background submenu color of submenu item when hovered over */
color: #000000;
background-color: #f8b83d;
text-decoration: none;
}

.vertsubitem a:active	{   /* Font style & color, background submenu color of submenu item when clicked */
color: #ffff00;
background-color: #f8b83d;	
text-decoration: none;			
}

.vertsubitem .vertfwdarr, .vertitem .vertfwdarr	{   /* Positioning of right arrow for submenus */
position: absolute;
top: 5px;
right: 8px;
}

.dmselected {   /* Style override for selected category tree */
   background-color: #ccc;
	font-weight: bold;
}

.verbar .dmselected {   /* Style override for selected root category */
   background-color: #999;
}

[TracyS]

I don't see anything at a glance in your stylesheet - unless firefox doesn't like the shortened colors (#fff instead of #ffffff) - I'd do a quick comparison of your menu css and the css that comes with the contribution and then maybe use firefox webmaster tool to see if your css is correctly getting called by firefox and applied to the proper places ;-)

 

Kendall,

 

In the STS template file, there should be a div code at the end of the file. If there isn't, adding and leaving a <div> open fixed the flyout for me. Remember to leave it open (no closing </div> tag). Then change the stylesheet accordingly so that the menu will open up where you need it to.

 

 

 

Tracy,

 

Do you know where I should add the z-index to my menu stylesheet? I tried adding it to verbar and vertsubmenu but it's still not making any difference. Currently, my entire layout is on z-index 3 and menu is on z-index 4. I have tried flash on z-index 3, 2, 1, 0. No go.

 

Do you mind taking a look at my stylesheet and seeing if there's anything I missed? div.coupon is my flash.

 

@charset "utf-8";

/* CSS Document

   Copyright (c) Freeoscommerce.com 2009

This file is part of a freeoscommerce.com template.  Please visit http://www.freeoscommerce.com for licensing and other information.
*/

body {
margin: 0px;
padding: 0px;
background: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: justify;
}

div#wrapper1 {
position: relative;
width: 100%;
min-height: 500px;
margin: 30px 0px 0px 0px;
overflow: auto;
}

div#wrapper2 {
z-index: 3;
position: relative;
left: 50%;
width: 949px;
padding: 94px 0px 94px 0px;
margin-left: -474px;
min-height: 300px;
}

div#header_wrapper {
position: relative;
top: -100px;
width: 949px;
min-height: 140px;
overflow: auto;
}

div#header_top {
z-index: 3;
position: absolute;
top: 0px;
width: 949px;
height: 140px;
background: url(images/footer_header_top.png) top center no-repeat;
}

div#header_bottom {
z-index: 3;
position: absolute;
bottom: 0px;
width: 949px;
height: 0px;
background: url(images/footer_header_bottom.jpg) top center no-repeat;
}

div#menu {
z-index: 4;
position: relative;
width: 949px;
padding-top: 89px;
color: #ffffff;
font-size: 16px;
text-align: right;
font-weight: bold;
}

div#menu span {
margin: 0px 25px 0px 25px;
}

div#wrapper3 {
z-index: 3;
position: relative;
top: -99px;
width: 966px;
padding: 10px 0px 10px 0px;
min-height: 10px;
overflow: auto;
}

div#column_left {
position: relative;
float: left;
width: 190px;
padding: 0px 0px 10px 0px;
min-height: 300px;
overflow: hidden;
}

div#column_middle {
position: relative;
float: left;
width: 726px;
min-height: 300px;
padding: 10px 20px 10px 20px;
overflow: auto;
}

div#column_right {
position: relative;
float: left;
width: 190px;
padding: 0px 0px 10px 0px;
min-height: 300px;
overflow: hidden;
}

div#footer_wrapper {
position: relative;
width: 949px;
top:-120px;
min-height: 79px;
background: url(images/footer_header_middle.jpg) top center repeat-y;
overflow: auto;
}

div#footer_top {
z-index: 3;
position: absolute;
top: 0px;
width: 949px;
height: 52px;
background: url(images/footer_header_top.jpg) top center no-repeat;
}

div#footer_bottom {
z-index: 3;
position: absolute;
bottom: 0px;
width: 949px;
height: 26px;
background: url(images/footer_header_bottom.jpg) top center no-repeat;
}

div#footer {
z-index: 4;
position: relative;
width: 919px;
padding: 15px;
color: #000000;
text-align: center;
}

div#background_middle {
z-index: 1;
position: absolute;
width: 100%;
top: 0px;
height: 100%;
background: url(images/main_middle.jpg) top center repeat-y;
}

div#background_top {
z-index: 2;
position: absolute;
width: 100%;
top: 0px;
height: 200px;
background: url(images/main_top.jpg) top center repeat-y;
}

div#background_bottom {
z-index: 2;
position: absolute;
width: 100%;
bottom: 0px;
height: 200px;
background: url(images/main_bottom.jpg) bottom center repeat-y;
}

div#website_name {
z-index: 4;
position: absolute;
width: 640px;
top: 50px;
left: 50%;
margin-left: -175px;
text-align: right;
color: #000000;
font-size: 26px;
}

a:link {
color: #000000;
text-decoration: none;
}

a:visited {
color: #000000;
text-decoration: none;
}

a:hover {
color: #ff9c00;
text-decoration: none;
}

a:active {
color: #f5be54;
text-decoration: none;
}

#menu a:link {
color: #FFFFFF;
text-decoration: none;
}

#menu a:visited {
color: #FFFFFF;
text-decoration: none;
}

#menu a:hover {
color: #000000;
text-decoration: none;
}

#menu a:active {
color: #ffffff;
text-decoration: none;
}

/* Hide icons in page headings */
#pageIcon, td.pageHeading img {
display: none;
}

h1 {
font-size: 14px;
font-weight: bold;
}
h2 {
font-size: 13px;
font-weight: bold;
}
h3 {
font-size: 12px;
font-weight: bold;
}
h4 {
font-size: 12px;
}
h5 {
font-size: 12px;
}
h6 {
font-size: 12px;
}

div#column_middle td.infoBoxHeading {
padding-top: 10px; 
padding-bottom: 0px;
font-size: 15px;
font-weight: bold;
}

td.pageHeading {
padding: 0px;
font-size: 20px;
font-weight: bold;
}

div#navigation {
margin-top: 0px;
margin-bottom: 15px;
color: #000000;
}

div.side_column div.infobox {
position: relative;
width: 190px;
min-height: 109px;
margin: 0px 0px 10px 0px;
background: url(images/sidebar_middle.jpg) top center repeat-y;
}

div.side_column div.infobox_top {
z-index: 3;
position: absolute;
top: 0px;
width: 190px;
height: 77px;
background: url(images/sidebar_top.jpg) top center no-repeat;
}

div.side_column div.infobox_bottom {
z-index: 3;
position: absolute;
bottom: 0px;
width: 190px;
height: 31px;
background: url(images/sidebar_bottom.jpg) top center no-repeat;
}

div.side_column div.infobox_heading {
z-index: 4;
position: relative;
width: 150px;
height: 17px;
padding: 15px 10px 5px 10px;
margin: 0px 10px 0px 10px;
background: url(images/sidebar_heading.jpg) bottom center no-repeat;
color: #000000;
font-weight: bold;
}

div.side_column div.infobox_heading_shoppingcart {
z-index: 4;
position: relative;
width: 150px;
height: 17px;
padding: 15px 10px 5px 10px;
margin: 0px 10px 0px 10px;
background: url(images/sidebar_heading1.jpg) bottom center no-repeat;
color: #FFFFFF;
font-weight: bold;
}

div.side_column div.infobox_content {
z-index: 4;
position: relative;
width: 170px;
padding: 10px 10px 10px 10px;
}

div.side_column div.infobox_heading a:link {
color: #000000;
text-decoration: none;
}

div.side_column div.infobox_heading a:visited {
color: #000000;
text-decoration: none;
}

div.side_column div.infobox_heading a:hover {
color: #ffffff;
text-decoration: none;
}

div.side_column div.infobox_heading a:active {
color: #000000;
text-decoration: none;
}

div.side_column div.infobox_heading_shoppingcart a:link {
color: #FFFFFF;
text-decoration: none;
}

div.side_column div.infobox_heading_shoppingcart a:visited {
color: #FFFFFF;
text-decoration: none;
}

div.side_column div.infobox_heading_shoppingcart a:hover {
color: #000000;
text-decoration: none;
}

div.side_column div.infobox_heading_shoppingcart a:active {
color: #FFFFFF;
text-decoration: none;
}

div.side_column table.infoBox {
width: 170px;
overflow: hidden;
}

td.infoBoxHeading img, td.infoBoxHeading img {
display: none;
}

td.infoBoxHeading a img, td.infoBoxHeading a img {
display: inline;
}

div#column_middle td.infoBoxHeading {
padding: 0px 0px 10px 0px;
}

td.main textarea {
height: 200px; 
width: 370px;
}


div.coupon {
position: relative;
z-index: 0;
}



/*---------------------------------*/
/*   Vertical Fly-Out Menu Style   */
/*---------------------------------*/

.verbar	{   /* Color of main vertical menubar and border */
color: black;
background-color: #dfdfdf;
border: 0px outset #dfdfdf;
z-index:4;
}

.vertitem	{          /* Behaviour of main vertical menu items, leave as is for proper operation */
text-align: left;
white-space: normal;
}

.vertitem	a {   /* Font style, size of main menu items */
 font-family: Verdana, Arial, sans-serif;
font-size: 12px;		
text-decoration: none;
position: relative;
display: block;		
}

.vertitem a:link, .vertitem a:visited	{   /* Default font style & color of main menu items */
color: #000000;
text-decoration: none;	
}

.vertitem a:hover	{   /* Font style & color, background menu color of main menu item when hovered over */
color: #000000;
background-color: #f8b83d;
text-decoration: none;
}

.vertitem a:active	{   /* Font style & color, background menu color of main menu item when clicked */
color: #ffff00;
background-color: #f8b83d;	
text-decoration: none;	
}

.vertsubmenu	{   /* Behaviour of sub-menu  - leave as is for proper operation of submenus */
position: absolute;
left: 0;
top: 0;
visibility: hidden;
z-index:4;
}

.vertsubframe	{   /* Color of submenu item and border */
background-color: #dfdfdf;
border: 0px outset #dfdfdf;

position: relative;
display: block;	
}

.vertsubitem	{     /* Behaviour of sub-menu  - leave as is for proper operation of submenus */
text-align: left;
white-space: normal;
}

.vertsubitem a	{   /* Font style, size of submenu items */
 font-family: Verdana, Arial, sans-serif;
font-size: 12px;			
text-decoration: none;

position: relative;
display: block;	
}

.vertsubitem a:link, .vertsubitem a:visited	{   /* Default font style & color of submenu items */
color: #000000;
text-decoration: none;	
}

.vertsubitem a:hover	{   /* Font style & color, background submenu color of submenu item when hovered over */
color: #000000;
background-color: #f8b83d;
text-decoration: none;
}

.vertsubitem a:active	{   /* Font style & color, background submenu color of submenu item when clicked */
color: #ffff00;
background-color: #f8b83d;	
text-decoration: none;			
}

.vertsubitem .vertfwdarr, .vertitem .vertfwdarr	{   /* Positioning of right arrow for submenus */
position: absolute;
top: 5px;
right: 8px;
}

.dmselected {   /* Style override for selected category tree */
   background-color: #ccc;
	font-weight: bold;
}

.verbar .dmselected {   /* Style override for selected root category */
   background-color: #999;
}

[itzbilly]

I don't see anything at a glance in your stylesheet - unless firefox doesn't like the shortened colors (#fff instead of #ffffff) - I'd do a quick comparison of your menu css and the css that comes with the contribution and then maybe use firefox webmaster tool to see if your css is correctly getting called by firefox and applied to the proper places ;-)

 

The only changes that were made from original code from contribution are the colors and position of menu. Used full length color codes, still no good.