Support for CSS Flyout Menu

DBB1:

Nope, but that does the trick... Thank you.

Perhaps that little tidbit needs to be included in the readme file that comes with the contribution.

It simply says "Just unzip, install the 3 files included.....enjoy."

The instructions should probably further state that the CSS file still needs to be edited to control the menu layout, that there are no Admin controls. Stating "now, it's much easier to customize your own menu colors without having to know css" is a tad misleading perhaps.

I understand that the contribution has been around forever, but the instructions seem to assume the reader is a long-time user.

I'll contact the contributor and make these suggestions, but in the meantime, maybe this post will help someone new to the flyout menu.

Thanks again for the help!
-DBB1

You just DID contact the contributor.......Note taken. I have also stated in a few posts back that I'm planning on releasing a new version. In that version, I will include all this in the Doc.

Thanks for the input.

vandiermen:

Hello,

I am using tpl_categories_css.php which use's categories_ul_generator.php
which CSS Flyout Menu also use's.

My question is: how do I get categories_ul_generator.php from showing the "Document Categories"

Normal old category_tree.php / tpl_categories.php do not show the "Document Categories"... and I put all the 'Document Categories' in to the 'Document Categories side box'...

someone helped me and fixed it; they said they fixed it by doing this

in categories_ul_generator.php between line 45 and 47 i add this:

and c.categories_id NOT IN(33)

it says select all items with the category id from the categories table
except id 33

in the future, to take out more categories (any, not just document, add another number after a comma, like this

and c.categories_id NOT IN(33, 34)

Hello,

I love this plug in. Thank you, Get Em Fast!

Two questions:

1. How can I insert some space right before each menu item? My current menue looks like head-to-head.... https://www.best4future.com (scroll down the page, it is in the bottom)

2. How can I insert an image right before each menu item? In my case, I want to insert a Chinese flag in front of the item "Learn Chinese". https://www.best4future.com

Thank you for any advice!!

lina0962:

Hello,

I love this plug in. Thank you, Get Em Fast!

Two questions:

1. How can I insert some space right before each menu item? My current menue looks like head-to-head.... https://www.best4future.com (scroll down the page, it is in the bottom)

2. How can I insert an image right before each menu item? In my case, I want to insert a Chinese flag in front of the item "Learn Chinese". https://www.best4future.com

Thank you for any advice!!

div#dropMenu li.submenu ul.level2 li a {
text-align: left;
padding-left: 20px;
z-index: 1000;
}

div#dropMenu li.submenu ul.level2 li:hover {
background-image: url(../images/YOUR_IMAGE.gif);
background-position: left center;
background-repeat: no-repeat;
z-index: 1000;
}

annnika:

Hi - I wonder if it would be easy to modify the code in this (brilliant!) module to handle a custom, vertical menu? I.e. a menu listing multiple levels of external/internal links, instead of categories and products?

(I do need both, a Flyout menu listing Categories - working fine - as well as the custom menu) I started by renaming and modifying the following files to use them to display my custom menu, however, I have been playing with this for hours now and cannot get the categories_ul_generaotr.php file to find and loop around menulists other than the categories!

./includes/templates/MYTEMPLATE/sideboxes/tpl_categories_css.php
./includes/modules/sideboxes/MYTEMPLATE/categories_css.php
./includes/classes/categories_ul_generator.php

Might you have any tips to for someone who's php is not yet very proficient yet! :lookaroun

Many thanks!

annika

After tinkering for hours i discovered how to have a fully expanded category tree on the drop down. All css, no category generator(s).

Now you can hover over the level 1, the drop down......err, drops down and you now have a category menu with all of the categories, sub categories and their sub categories expanded.

I'll provide a link to a test site of mine with this working for anyone interested, please remember i have'nt started to style this yet but i will update when i have.

https://www.gearsofwargear.com

first trading:

div#dropMenu li.submenu ul.level2 li a {
text-align: left;
padding-left: 20px;
z-index: 1000;
}

div#dropMenu li.submenu ul.level2 li:hover {
background-image: url(../images/YOUR_IMAGE.gif);
background-position: left center;
background-repeat: no-repeat;
z-index: 1000;
}

Thank you so much, Fasttrading!! Your guidance makes my life easiler!:clap:

Glad to help.

Hi I have installed this great module and everything is working great. It may seem strange but I would like to only have first level items showing as all the drop down boxes cover what is underneath. I have enabled the drop down items in my sidebox categories etc. The only one I am having difficulty locating is the login/create account .. not in layout controller.

Also for some reason the shopping cart tab is a pixel higher top and bottom than the rest of the tabs.

Site is:http://www.rosedakinjewellery.com.au/index.php?main_page=index

The login box at the end is styled slightly different.

Look for:

div#dropMenu li a.noLine {border:none;}

And style accordingly, it looks like you need to put a border around it to make it look like the rest.

If you want the drop down's removed you can find the code in here:

includes/templates/YOUR_TEMPLATE/common/tpl_drop_menu.php

Always back up your files first.

Personally i'd keep it like it is and just change the background of your drop down to something like white.

Or try this first:

Replace:

div#dropMenu li a.noLine {border:none;}

With:

div#dropMenu li a.noLine {}

Thank you very much .. end tab fixed. Dont know how putting a white background would fix the fact that the drop down covers whats underneath.:huh:

It would'nt, but there's not a problem with drop downs doing that, just my opinion. I suggested a lighter background for contrast.

You can take those links out though if you wanted.

Thanks for your support.:D Waiting for client to decide

I just installed the CSS Flyout Menu and it doesn't seem to be working. I will have lots and lots of subcategories for each state, so I really need something like this. Are there any detailed instructions besides the read me page? https://www.southerngenealogybooks.com

cmwoods:

Hi

I am now sat in my office with a number of PC's and have got your site in IE6 on XPSP2 on show with your CSS on a test installation here too looking similar to how you have it on your live site

Once again, I'm pretty certain your csshover.htc is NOT being found. Change that top line to includes/csshover.htc and ensure the file is present and accessible and not restricted in anyway. I can make your CSS hover work just by changing that line. The relative path is too confusing so lets get rid of it and eliminate it.

If you can confirm that you have done that, I'll continue to sort out the display as it is very similar to the problem I had originally.

HTH
Hi,I 'm a new guy about zencart,Now I haove the same problem about my Css flyout categories,can you tell me how to resolve it ?In your post,you suggest change the top line ,what is that?

mary4c:

I just installed the CSS Flyout Menu and it doesn't seem to be working. I will have lots and lots of subcategories for each state, so I really need something like this. Are there any detailed instructions besides the read me page? www.southerngenealogybooks.com

have you enabled it in the admin 'Layout Boxes Controller'
and changed the name of YOUR_TEMPLATE in 2 or 3 places to your template
ALso sometimes the css needs to be remade, I would search this forum for similar questions

Hi everyone. I'm sorry I've not been very supportive the last week or so for the CSS Flyout Menu, but I've got a very good reason for it.

We had an electrical fire in our home forcing us to move with no warning (of course), and no money to do it with. So, in that turn of events, we've been forced to live with my Dad for the last week with very limited access to the internet. We are in the process of getting another home, but really don't have much money to do it with. But, as soon as I can get into another home, and get set back up to work I'll be right back to work on this menu. I've been promising everyone I would release a new version, but under these circumstances I really cant' for a little while.

The admins of this site won't let me ask for the "D" word, but any help would be sincerely appreciated.........lust log into my site (www.getemfast.com) and look for the Payment Plan.......you'll know what to do from there, even though you don't have any payments with me, it will work the same as the "D" word.

(Admins, I know this risky, and I hope I've been enough help in this community that you won't kick me out, as I love my Zen-Cart Family. But, even you've got to understand that desperate times calls for desperate measures, and if any of you've ever been burned out of your home, you know that it becomes desperate........ So sorry........please forgive me.)

If there is anybody out there that I've ever helped, I could really use your help back right now more than ever, and I will surely be available to help you out again some day.

Thank you so much.
Robert Holt (Get Em Fast)

P.S.
Admins........if you feel supportive to the cause, you might also post this in the Pub. I've been a very supportive community member for the last four years.......getting close to 5, and am definitely not going to quit on you now, so I hope you're not going to quit on me. I hope I've earned this much respect. I'm sure you'll let me know by morning how this is going to go over with you.

Again, Thank you so much.
Robert Holt,
Get Em Fast,
www.getemfast.com

Hello

I'm French, so excuse my bad English.

I can not find help on the helpdesk zen cart French, I can therefore vousb ask for help here.

I tried "css flyout menu" and I have a concern with the arrow that starts before any tabs in zen cart home.
The arrow also goes in my pack or stands' css menu flyout But she stood above the class instead of putting his left.

I want:

Name

But right now I:

Name

I just can not color the css script, I'm really sorry :frusty:

body {  
         behavior: url(includes/csshover.htc);
} /* WinIE behavior call */
div#nav-cat {
     margin-top: 0em;
     background-color: #ffffff;
     width: 236px;
     margin-left: auto;
     margin-right: auto;
     font-weight: bold;
     font-size: 1.3em; width:200px;
	 
}
div#nav-cat ul {
     margin: 0em; 
     padding: 0em; 
       width: 236px;
     z-index: 1000;
     line-height: 14px;
     border: none;
	 
}

div#nav-cat ul.level2 {background-color: #ffffff;}
div#nav-cat ul.level3 {background-color: #ffffff;}
div#nav-cat ul.level4 {background-color: #ffffff;}
div#nav-cat ul.level5 {background-color: #ffffff;}
div#nav-cat ul.level6 {background-color: #ffffff;}

div#nav-cat li {
     z-index: 1; 
     position: relative;
     list-style: none; 
     margin: 0;
     margin-top: 0; /* change it to whatever space you want to put space between buttons*/
     border-bottom: 1px solid black; /* <---this line may help or hinder IE menu shifting issues. */
     background-color: pink; /*Sets background of Menu items that DOES NOT have sub-menu's SYSTEM WIDE!!! */
   
}
div#nav-cat li li {
    margin-left: 0em;/* This puts space between menu and sub-menu, reccomend to leave at 0 unless you have over-lapping problems. */
    background-color: salmon;  /* sets the background of submenu ,WITHOUT submenus, when menu is HOVERED */
} 
div#nav-cat li:hover {background-color: green;} /* sets the HOVER background of any MENU item that DOES NOT have submenu items */
div#nav-cat li.submenu {background-color: blue;} /* sets the background of any menu item that DOES have submenu items */
div#nav-cat li.submenu:hover {background-color: red; width:236px; text-align: width:200px;} /*sets the HOVER background of any menu item that DOES have submenu items */



div#nav-cat li a {background-color: transparent; /*<---This will set the background color of the WHOLE MENU, EVERY LEVEL, SYSTEM WIDE!!! If you want different colors, DON'T CHANGE THIS!!! */
    display: block;
    padding: 0.25em 0 0.3em 0em;
    text-decoration: none; 
    width: 100%;
    color: white; /* sets the font color of the menu, SYSTEM WIDE!! In order to over-ride the font colors for the menu, and have different 
    colors for each level, such as font color changing when you hover, you need to remove any MENU colors  referred to in your
    stylesheet.css, as they over-ride this stylesheet! (includes/templates/YOUR_TEMPLATE/css/stylesheet.css) */
}

div#nav-cat ul ul {
    position: absolute; top: 0; left: 100%; 
    display: none; z-index: 1000;
}

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;width:236px;position:absolute; 
}
div#nav-cat ul.level3 li.submenu:hover ul.level4 { height: 200px;overflow: scroll;}

Could you help me please?
Here is my css file stylesheet_categories_menu.css

vandiermen:

have you enabled it in the admin 'Layout Boxes Controller'
and changed the name of YOUR_TEMPLATE in 2 or 3 places to your template
ALso sometimes the css needs to be remade, I would search this forum for similar questions

Thank You! Once I changed it in Layout Boxes Controller it worked. I am still working on the color scheme. Many Thanks!

Hi all,

i've been working on this quality mod, and am fairly happy with the result, except i've somehow managed to get the submenus to stop acting like block displays in IE. The main menu works when the pointer goes over any part of the blocks, but the submenus are almost impossible to navigate and will frustrate users.

I'm not sure how i've caused this. Works fine in Chrome and Firefox.

If anyone could take a look here

http://www.testuksi.co.uk/catalog/

and let me know how badly i've messed things up it would be greatly appreciated.

Best regards, bod