-
Support for CSS Flyout Menu
I've been asked if there was a thread for support of this mod. I didn't start one because I didn't design this mod, just modified it to include images. The original author of this mod is DrByte, but since I modified it, I've inherited all the questions...........so go ahead, ask away. I'll do my best to answer any question you might have, but keep in mind that I didn't write this, so there may be some questions that I don't have an answer to. All I can say is, I'll do my best.
-
Re: Support for CSS Flyout Menu
Cool! Looks like I have a new thread to haunt!
Sooo... my first though is to use a single image for the background and then use the "sliding door" method to change image's Position. This is actually faster than swapping out two images. I have actually done this quite a bit and it isn't hard to do, but will take a bit of study to make sure it fits in well with zencart and uses zencarts css identifiers.
-
Re: Support for CSS Flyout Menu
Yea, sound nice. The thing is, if it just slides in or out, you won't have the rollover effect of seeing the change, other than from an image, to a plain background, will you? That's why I edited this mod to begin with, because someone wanted a rollover effect in their Flyout Menu. Let me show you one that I've done, although, it still uses 2 images. IF you're into cars, then you will really appreciate this menu, as it has moving pistons in it. Just the screenshot that I've included isn't NEARLY as much fun as moving your cursor up and down the menu just to watch the pistons "work".:P
By the way......somehow, i just KNEW you'd be the first poster in this thread....:D
Anyway, here's the screenshot of that menu. If anyone wants it, just pm me, and I'll pack it up for you. It requires a column width of 170px, though, just so everybody will know before they want it.
-
Re: Support for CSS Flyout Menu
Yea, I know.......I'm getting old and senile. So HERE'S the screenshot.
Well, maybe not. Doesn't seem like the forum will let me show it.
-
Re: Support for CSS Flyout Menu
Well.......this isn't working. Give me a few, and I'll have a test site ready for the looking. Then everybody can see it in action. That's probably better, anyway.
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
Get Em Fast
Yea, sound nice. The thing is, if it just slides in or out, you won't have the rollover effect of seeing the change, other than from an image, to a plain background, will you?
The image doesn't actually "slide" out, It is instantaneous. Only the position changes in the css. It is as quick as a color change on regular roll overs.
And example is here:
www <dot> chicagophoto <dot> net/sandra/ (sorry, don't want a link)
The horizontal menu uses this method.
The vertical menu has a styled <ul> with background image while the <li> links use a color change.
-
Re: Support for CSS Flyout Menu
Hey Get Em Fast, having an interesting time with the CSS Flyout menu, for some reason I can't seem to change the font colour in the menu, due I suspect to my own ineptitude.
I initially tried to create a rollover change to switch the text to white, but had no luck, so moved on to trying it on all text in the menu, but no change.
I couldn't find anywhere in the comstock CSS files that may have been overiding this, but i could have easily overlooked something. Any suggestions on this are welcome, as I'm well and truly out of ideas
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
deserted
Hey Get Em Fast, having an interesting time with the CSS Flyout menu, for some reason I can't seem to change the font colour in the menu, due I suspect to my own ineptitude.
I initially tried to create a rollover change to switch the text to white, but had no luck, so moved on to trying it on all text in the menu, but no change.
I couldn't find anywhere in the comstock CSS files that may have been overiding this, but i could have easily overlooked something. Any suggestions on this are welcome, as I'm well and truly out of ideas
Those are actually controlled from your regular stylesheet: includes/templates/YOUR_TEMPLATE/css/stylesheet.css.
For the initial color, look for these lines of code:
Code:
a:link, #navEZPagesTOC ul li a {
color: #3300FF;
text-decoration: none;
}
For hover color, look for these lines of code:
Code:
a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
color: #FF0000;
}
Hope this helps.
-
Re: Support for CSS Flyout Menu
Thanks for that, I actually found the answer before I checked back here :)
also I was able to set it just for the CSS flyout menu, using the following in the stylesheet_categories_menu CSS sheet
Code:
#nav-cat ul:hover li:hover a:hover {color: #ffffff;
}
-
Re: Support for CSS Flyout Menu
Hi all.
I'm new to this whole zen cart thing, but i must say, Nice Work! :clap:
i'm having trouble aligning my text on the buttons in this wonderful menu. Anybody can give me a hint?
furthermore i'd like to know how i can change the link names for this menu.
Give me a shout!
thx!
-
Re: Support for CSS Flyout Menu
can this hack be used ot create a side menu as used here
http://www.cmldistribution.co.uk
notice each main category has an image, and when expanded it does not reload
-
How to make Css Flyout Categories Menu support multiple lines?
I have a site that I am porting to Zen Cart (http://classygroundcovers.com -> http://classygroundcovers.com/cart/i...=index&cPath=1).
It needs categories to be displayed with both latin and common names (on separate lines for readability).
There are two Categories side boxes on the left of the ZC site presently:
- the one at the bottom works OK and displays multiple lines per category
- the one at the top is the css flyout version that I am trying to get working, it displays only the first line of each category when you mouseover All Types
Can anyone advise me how to get Css Flyout Categories to display categories on more than one line? (like the category box below)
-
creating a separator
I installed this mod without a problem, and it works fine.
However, I noticed that it loaded a blank tab, and after that, the tabs for "Specials...", "New Products...", etc.
I would like to get rid of this blank tab and introduce in its place some nice-looking separator.
How do I do that?
Also, I noticed that "Featured Products..." is too long and overlaps on the image. Maybe I could fix this by adding a > instead of the ...
How do I do that?
Thanks.
-
Re: Support for CSS Flyout Menu
Hi,
I'm sorry to ask a question that I know has been raised a hundred times before - my problem is that none of the answers that I've seen posted have worked for me.
I'm using CSS Flyout Menu v1.3.0.3.2. I've installed it and it's working perfectly on Firefox, but the subcategories refuse to appear in IE6. So far I have:
a) copied csshover.htc into both my main directory and into includes
b) ensured that all references in includes/configure.php and admin/includes/configure.php to http(s)://www.possumbooks.com include the full "www.possumbooks.com" and not just the "possumbooks.com"
c) updated the first few lines of stylesheet_categories_menu.css to include the full path
Code:
*/body {
behavior: url(http://www.possumbooks.com/includes/csshover.htc);
/* WinIE behavior call */}
All with no success. If anyone out there has any ideas on what I should try next I'd REALLY appreciate it.
Thanks,
Possum
www.possumbooks.com
-
Spacing between subcategory menus
Hi again,
I've been struggling to get the same vertical spacing between the subcategory items as appeared for the main categories. Based on the screenshot that came with the download this no-vertical-space layout is the default.
I've been playing with the following code but with no luck.
This is the css I think I'm supposed to be updating.
Code:
div#nav-cat ul.level2 {margin: -1px 0 0 -1px; padding: 0; width: 150px;
background-color: transparent;
border: none;
}
Can anyone help out with suggestions?
Thanks,
Possum.
-
Re: Support for CSS Flyout Menu
-
Re: Support for CSS Flyout Menu
So sorry, everyone. I was out of commission for a while, but I'm back, and stronger than ever. Everyone who has posted on this thread, let me know if you're still here and Zenning, and if you're still having these issues, or if you've got them resolved by now.
Thank you.
-
Re: Support for CSS Flyout Menu
This is my current menu (i cant take a screen grab while hovering so i’ve photoshoped it, but you get the idea);
http://www.jameschetwood.com/css/men1.jpg
This is the menu Im trying to make;
http://www.jameschetwood.com/css/men2.jpg
How can i get the text for each link in the fly out menu to alight to the right of ‘More Gems’?
I made this with
css_horizontal_dynamic_menu_pauls_edition_1-1
-
Re: Support for CSS Flyout Menu
-
Re: Support for CSS Flyout Menu
Nickolay, go to includes/templates/YOUR_TEMPLATE/css/stylesheet_categories_menu.css and over-write ALL the code in there with this:
Code:
body {
behavior: url(includes/csshover.htc);
} /* WinIE behavior call */
div#nav-cat {
margin-top: 0em;
background-color: #838367;
width: 95%;
margin-left: auto;
margin-right: auto;
font-weight: bold;
font-size: 1.0em;
}
div#nav-cat ul {
margin: 0;
padding: 0;
width: 100%;
background-color: #838367;
z-index: 1000;
/* border: 1px solid #AAA;*/
}
div#nav-cat ul.level2 {background-color: #c65928; width: 180px;}
div#nav-cat ul.level3 {background-color: #c65928;}
div#nav-cat ul.level4 {background-color: #c65928;}
div#nav-cat ul.level5 {background-color: #c65928;}
div#nav-cat ul.level6 {background-color: #c65928;}
div#nav-cat li {
z-index: 1;
position: relative;
list-style: none;
margin: 0;
margin-top: 2px; /* change it to whatever space you want to put space between buttons*/
border-bottom: 1px solid #CCC; /* <---this line may help or hinder IE menu shifting issues */
}
div#nav-cat li li {
margin: 0; /* this overrides the margin-top in the declaration above */
}
div#nav-cat li:hover {background-color: #c65928;}
div#nav-cat li.submenu {background-color: #838367;}
div#nav-cat li.submenu:hover {background-color: #c65928;}
div#nav-cat li a {
display: block;
padding: 0.25em 0 0.25em 0.5em;
text-decoration: none;
width: 99%;
color: white;
}
div#nav-cat>ul a {
width: auto;
}
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;
background-color: #756783;
}
That is one I just done with solid color backgrounds, so it won't give you the little arrows, as they are images. But it will give you solid background colors that will be a LOT easier for you to work with. If you do want those arrows, then just change images from the ones that's included to a couple of arrows. Then, you'll have to play with the margins, paddings, and such to make it work for you. That's the OLD-OLD version of the menu. I'm currently working on the next version for 1.3.8.
Hope this helps
-
Re: creating a separator
Quote:
Originally Posted by
ckosloff
I installed this mod without a problem, and it works fine.
However, I noticed that it loaded a blank tab, and after that, the tabs for "Specials...", "New Products...", etc.
I would like to get rid of this blank tab and introduce in its place some nice-looking separator.
How do I do that?
Also, I noticed that "Featured Products..." is too long and overlaps on the image. Maybe I could fix this by adding a > instead of the ...
How do I do that?
Thanks.
ckosloff, First of all, nice to see you're still around. Been a long time.
Now, go to includes/templates/YOUR_TEMPLATE/templates/tpl_categories_css.php and find this line (around 27-28):
Code:
if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true') {
$content .= '<ul class="level1"><li><a href=""> </a></li></ul>';
Now, take out the (---<ul class="level1"><li><a href=""> </a></li></ul>----) to make this whole section look like this:
Code:
if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true') {
$content .= '';
And, there ya' go........blank tab gone! You also mentioned putting something else there? Sure you can. Anything you want. Want a link saying "Zen-Cart Rules!" with a link leading to Zen-Cart? just put it in your code, like this:
Code:
if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true') {
$content .= '<ul class="level1"><li><a href="http://www.zen-cart.com">Zen-Cart Rules!</a></li></ul>';
That will give you a nice little link to ZC that reads Zen-Cart Rules!
Note: If you don't add the "http://" to the URL, it will be treated as an internal link, and not be resolved.
Yes, you can also put an image in there, if you like.
Hope this helps.
-
Re: Support for CSS Flyout Menu
Thanks for all the help.
Sure been a long time, but your post comes in right on time.
I am planning to send online the updated site (1.3.8a) this weekend.
After that, I will certainly have to look into more advanced customization, including a better menu.
I will play around with your suggestions and see what I can come up with.
Actually I wasn't thinking of a link nor an image, but an HTML or CSS horizontal ruler to put in between.
-
Re: Support for CSS Flyout Menu
Hello, I have run into a strange problem with the flyout menu on our cart. If you hover on a subcategory and move off the edge of the menu it dissapears correctly but when you hover on the first level of the menu all the flyouts you had out previously re-appear. They also show up blank until you once again hover over them. Any thought on what I may have done wrong?
-Shawn
-
Re: Support for CSS Flyout Menu
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
Code:
* 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 */
}
-
Re: Support for CSS Flyout Menu
Great! I will try that and post my results as soon as I can. Thank you!
-Shawn
-
Re: Support for CSS Flyout Menu
I tried Get 'em Fast's fix and it worked fine, the blank tab disappeared, thanks for that.
For the sake of accuracy, let me state that I am testing on a demo site, a ZC install with the demo products.
The tpl_categories_php file is in includes --> templates --> custom (in my case classic) --> sideboxes.
Now, I need help with more advanced customization.
I would like to get rid of the image altogether and work with CSS: customize the font, the box holding the category and the background color.
Also, it would be nice to have different settings for subcategory level, e.g. sub category with different background color, and sub-sub-category with yet another different background color.
I am using TopStyle Pro for CSS, so I don't need help with the settings, all the options are in the program, just need to know where to look...
Thanks in advance.
-
Re: Support for CSS Flyout Menu
Yikes! Posted too early.
Will try the fix recommended for Nikolay and be back here.
Sorry.
-
Re: Support for CSS Flyout Menu
All right, tried the fix for Nikolay, but no luck.
Still getting the image roll-over effect.
Replaced the whole stylesheet_categories_menu_css.
Please help.
Thanks in advance.
-
1 Attachment(s)
Re: Support for CSS Flyout Menu
Wow, seems I'm the only guy posting.
I worked on the menu, the stylesheet and the .php and am quite pleased with the results achieved so far.
Got the separator by simply inserting an <hr /> there.
The buttons are from buttongenerator dot com, please note that the screenshot does not reflect the behavior of the menu.
Actually, upon hovering the button flips to a red edge to match the hover effect, the flyout is separated 5px. from the main.
If anybody interested, I'll post my stylesheet and .php here.
Forget about my previous rant about css buttons, I don't think the full effect can be achieved with CSS only, you still need image flip.
Now, I also have some questions:
1) How can I change the color of the active link from blue to something else? I know this comes from the main stylesheet but a change there will be site-wide and I don't want that. I tried changing in the category_css stylesheet but it didn't work.
2) How do I get text inside the buttons to be vertical-align = middle? I tried in the stylesheet and it doesn't work. However, text-align = left works.
3) There is a programming glitch somewhere. Underneath the separator, I get the Specials... category, which I wasn't getting in the ZC original menu.
I don't have any specials configured and when clicking on that link it takes to a blank page.
Is it possible to have that link appear only when specials are configured?
Thanks.
-
Re: Support for CSS Flyout Menu
Can this be applied to the horizontal header instead of the side boxes?
Like on the category tab?
-
Re: Support for CSS Flyout Menu
There is another contrib for that, look in the Downloads section, type menu in the searchbox.
-
1 Attachment(s)
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
ckosloff
All right, tried the fix for Nikolay, but no luck.
Still getting the image roll-over effect.
Replaced the whole stylesheet_categories_menu_css.
Please help.
Thanks in advance.
Hmm. with that css that I posted, you should be getting NO imges. I've actually got a more recent css that I worked on for a client that has NO images in it. The css looks like this:
Code:
body {
behavior: url(includes/csshover.htc);
} /* WinIE behavior call */
div#nav-cat {
margin-top: 0em;
background-color: #838367;
width: 95%;
margin-left: auto;
margin-right: auto;
font-weight: bold;
font-size: 1.0em;
}
div#nav-cat ul {
margin: 0;
padding: 0;
width: 100%;
background-color: #838367;
z-index: 1000;
/* border: 1px solid #AAA;*/
}
div#nav-cat ul.level2 {background-color: #c65928; width: 180px;}
div#nav-cat ul.level3 {background-color: #c65928;}
div#nav-cat ul.level4 {background-color: #c65928;}
div#nav-cat ul.level5 {background-color: #c65928;}
div#nav-cat ul.level6 {background-color: #c65928;}
div#nav-cat li {
z-index: 1;
position: relative;
list-style: none;
margin: 0;
margin-top: 2px; /* change it to whatever space you want to put space between buttons*/
border-bottom: 1px solid #CCC; /* <---this line may help or hinder IE menu shifting issues */
}
div#nav-cat li li {
margin: 0; /* this overrides the margin-top in the declaration above */
}
div#nav-cat li:hover {background-color: #c65928;}
div#nav-cat li.submenu {background-color: #838367;}
div#nav-cat li.submenu:hover {background-color: #c65928;}
div#nav-cat li a {
display: block;
padding: 0.25em 0 0.25em 0.5em;
text-decoration: none;
width: 99%;
color: #CDB38B;
}
div#nav-cat>ul a {
width: auto;
}
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;
background-color: #756783;
}
That should make it look EXACTLY like the attached thumbnail:
Though, I see you have been working on it, but you STILL got those images that you initially DIDN'T want. Change to this css (no images), then you can edit the colors the way you want. If you've decided you want images, and need help, just let me know. I'm sorry I haven't been around like I said I would, but I've been VERY busy with a 7-day a week job, 3 boys, 1 wife, 1 dog, 24,000 chickens, a website for a client that I'm already late on, and living on no sleep (3-4 hrs/night) to do it all. But, I DO still check in when I can, so don't give up.
I'll answer your other questions as soon as you know for sure if you want the images, or not.
Hope this helps.
-
Re: Support for CSS Flyout Menu
Get 'em Fast,
Thanks for reply, even if it wasn't "fast".
I am working with just two images for now, because I find that the effect is more stunning and the load is minimal.
The questions are in a previous post, and basically they boil down as to why the stylesheet doesn't override the main stylesheet.
This defeats the purpose of CSS, which should be "cascading".
I would like to have the hyperlink text be vertical-align = middle, but this doesn't work, however, as I said previously, text-align = left does.
Very intriguing.
Cannot change color either.
Also, why is the Specials link showing in this menu, whereas it doesn't show in the original ZC menu?
Another mystery.
These are the questions I am dealing with now.
Will of course give a spin to the purely CSS menu you so kindly posted, I will test it and let you know.
I don't have 24,000 chicken, just half in the fridge, and a dog, but hey, everybody has a tough life and lots of things to do.
Cheers!
-
Re: Support for CSS Flyout Menu
Hi, I have had this on my site for a while now and am currently redoing the site. I like th look of this but I would like it just to show the main product category without the fly out bit ie remove the arrows, how do I do this?
-
Re: Support for CSS Flyout Menu
im trying to just change the font for the top header of the cat menu? i changed font sizes and colors and its not taking effect for the flyout? where is this controlled? it must be seperate since some things change and this doesn't
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
scottrdj
Hi, I have had this on my site for a while now and am currently redoing the site. I like th look of this but I would like it just to show the main product category without the fly out bit ie remove the arrows, how do I do this?
Scott, find this section of code in the stylesheet_categories_menu.css (at the very bottom):
Code:
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;
}
and change "display: block;" to "display: none;" (no quotes).
Hope this helps.
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
fusionsp
im trying to just change the font for the top header of the cat menu? i changed font sizes and colors and its not taking effect for the flyout? where is this controlled? it must be seperate since some things change and this doesn't
Fusion and ckosloff, Try adding this line to your stylesheet_categories_menu.css to control your color:
Code:
h3#categoriescssHeading.leftBoxHeading {
color: #FFFFFF;
}
Hope this helps.
ckosloff, Also, try using "text-align: center;" instead of "middle".
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
Get Em Fast
Fusion and
ckosloff, Try adding this line to your stylesheet_categories_menu.css to control your color:
Code:
h3#categoriescssHeading.leftBoxHeading {
color: #FFFFFF;
}
Hope this helps.
ckosloff, Also, try using "text-align: center;" instead of "middle".
well, i got the color changed but the font size still seems stuck somewhere? is there a override place that i can change every header font to match? i tried it a few different places but only a few changed.
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
fusionsp
well, i got the color changed but the font size still seems stuck somewhere? is there a override place that i can change every header font to match? i tried it a few different places but only a few changed.
Same place. Just add........."font-size: 0.5em;" , or whatever you need your size to be.
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
Get Em Fast
Scott, find this section of code in the stylesheet_categories_menu.css (at the very bottom):
Code:
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;
}
and change "display: block;" to "display: none;" (no quotes).
Hope this helps.
Thanks for that it worked great. The only thing is that the arrows are still at the end of the boxes, how do i remove these?
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
scottrdj
Thanks for that it worked great. The only thing is that the arrows are still at the end of the boxes, how do i remove these?
Please just ignore that found in an earlier thread
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
Get Em Fast
Same place. Just add........."font-size: 0.5em;" , or whatever you need your size to be.
wow thanks. i have been trying to figure that out for days.
-
Re: Support for CSS Flyout Menu
Get 'em Fast,
Thanks for continuing support.
The color for the active link remains unchanged after your mod.
FYI, text-align: center or left works, what doesn't work is vertical-align: middle.
The Specials link to the blank page is always there, and I have tried changing settings in the database to no avail. Still doesn't show in the normal Categories menu.
To prevent further confusion I am enclosing my stylesheet, I know some settings are redundant.
--------------------------------------------------------------
body {
behavior: url(./csshover.htc);
/* WinIE behavior call */}
div#nav-cat {width: 150px; margin: -1px 0 0 -1px;
background-color: transparent; font-weight:bold;
text-align: left;
vertical-align: middle;
line-height: 20px;
}
div#nav-cat ul {margin: 0; padding: 0; padding-top: 0; width: 150px; background-color: transparent;
/*border: 2px solid tan;
background-repeat: no-repeat;*/
}
div#nav-cat ul.level2 {margin: 0; padding: 0; width: 150px;
background-color: transparent;
border: none;
}
div#nav-cat ul.level2 {background-color: transparent;
}
div#nav-cat ul.level3 {background-color: transparent;
}
div#nav-cat ul.level4 {background-color: transparent;
}
div#nav-cat ul.level5 {background-color: transparent;
}
div#nav-cat ul.level6 {background-color: transparent;
}
div#nav-cat li {background-image: url(../images/b1.gif);
position: relative;
list-style: none;
margin: 0;
margin-top: 0;
z-index: 20;
height: 20px;
width: 150px;
/* change it to whatever space you want to put space between buttons*/}
/* <---this line may help or hinder IE menu shifting issues */
div#nav-cat li li {
margin: 0px;
/* this overrides the margin-top in the declaration above */
}
div#nav-cat li:hover {background-image: url(../images/b1_over.gif);
}
div#nav-cat li.submenu {
background-color: transparent;
}
div#nav-cat li.submenu:hover {background-color: transparent;
}
div#nav-cat ul {background-color: transparent;
}
div#nav-cat li a {display: block; padding: 0.25em 0 0.25em 0.5em;
text-decoration: none; width: 150px;}
/*border-left: 0.5em solid #BBB;}
div#nav li a:hover {border-left-color: red;}*/
}
div#nav li a:hover {border: none;
}
div#nav-cat>ul a {width: 150px;
}
div#nav-cat ul ul {position: absolute; top: 0; left: 155px;
display: none;
}
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;
}
/* beginning of Get 'em Fast's mod */
h3 #categoriescssHeading .leftBoxHeading {
color: #FFFFFF;
}
/* end of Get 'em Fast's mod */
-
Re: Support for CSS Flyout Menu
Ahhh! got the Specials link out of the menu.
Admin --> Configuration --> Layout Settings --> Categories Box - Show Specials Link, set to false.
One thing less for Get 'em Fast to worry about.
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
scottrdj
Thanks for that it worked great. The only thing is that the arrows are still at the end of the boxes, how do i remove these?
Remove any call to "arrow.gif" (or whatever it's called) in you stylesheet_categories_menu.css, and remove the images from your images folder. That should do the trick.
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
ckosloff
Get 'em Fast,
Thanks for continuing support.
The color for the active link remains unchanged after your mod.
FYI, text-align: center or left works, what doesn't work is vertical-align: middle.
The Specials link to the blank page is always there, and I have tried changing settings in the database to no avail. Still doesn't show in the normal Categories menu.
To prevent further confusion I am enclosing my stylesheet, I know some settings are redundant.
--------------------------------------------------------------
Vertical-align is only for inline and table elements - doesn't work on block elements. You might try adding "display: inline;", since you've got a "line-height:" set. Other than that, you might just try using padding: settings to align it vertically. Sorry, I missed the "vertical" part in the previous posts. I've been trying to read too much, too fast. Gotta slow down a bit, I guess. :smile:
Hope this helps.
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
Get Em Fast
Gotta slow down a bit, I guess. :smile:
Are you saying that you ought to change your handle to Get Em Slow? Har, har.
This is how the relevant part of the stylesheet looks:
div#nav-cat {width: 150px; margin: -1px 0 0 -1px;
background-color: transparent; font-weight:bold;
text-align: left;
vertical-align: middle;
line-height: 20px;
}
Adding display: inline doesn't help, creates an empty cat, without even an image there.
Adding padding-bottom: 3px; doesn't help either, doesn't modify anything.
Does this thing have padding-top or margin-top somewhere?
Thanks.
-
Re: Support for CSS Flyout Menu
Hi,
I have installed Css Flyout Menu 1.3.0.3.2. Menu works good in Firefox but doesn't work in IE6. My zencart version is 1.3.7. Some ideas?
Site:
http://rampc.pl/
-
Re: Support for CSS Flyout Menu
Here's another problem for Get Em Fast.
I don't have any new products or featured products under the separator line, but I still need to show All Products.
Now, when in Admin --> Configuration --> Layout Settings I set Categories Box - Show Featured Products Link to false the Featured Products disappear, but when I set Categories Box - Show Products New Link to false everything disappears, including All Products, which is set to true.
I suspect this behavior is controlled by tpl_categories_menu.css and the line is:
Code:
if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true'){
I tried to change this line by adding an additional or statement (or SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true'), with the result that the whole site blacked out.
So I need help with this.
Thanks.
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
Darkhijacker
Hi,
I have installed Css Flyout Menu 1.3.0.3.2. Menu works good in Firefox but doesn't work in IE6. My zencart version is 1.3.7. Some ideas?
Site:
http://rampc.pl/
first off, your site link isn't showing anything. You must have taken it down since you posted. i have had this working for quite a while. you may want to install the newest version of zencart to 1.3.8. IE6 has all kinds of problems with zencart. i have a few things that are really flaky with IE6.
-
Re: Support for CSS Flyout Menu
I repaired CSS Flyout Menu on my site, and everything works good.
-
Re: Support for CSS Flyout Menu
Congrats, but it would be interesting to know what you did.
-
Re: Support for CSS Flyout Menu
ARGHHH!
I got it fast.
Replaced the aforementioned line by this one:
Code:
if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true'){
and everything works.
Obviously, you can't put three or statements in a row.
I just replaced NEW by ALL and got rid of the New link.
-
Re: Support for CSS Flyout Menu
Hi
I have just installed CSS flyout and thanks for this great modules
However, the preset flyout image really does not fit my website design, and some how the image is not long enough for my category names
Please let me know how I could enable the fly out without images
Here is my site for your info:
http://www.locomolife.com/zen/
I would like to have the effect as the following site:
http://www.dealextreme.com/
As you can see, the flyout in above site does not use any image, but just a table like blocks. To summarize, below are the effects I want:
1) Do not use flyout image
2) When mouseover the category, either the words or backgrounds of that category will change color
I know it must be very easy to do but I really have no idea. Any help will be appreciated! thanks a lot!!
-
Re: Support for CSS Flyout Menu
Get Em Fast published a menu without any images, just look back in the thread.
For your information, the images are provided for your convenience only, you can use any image you like.
Back in the thread I show how I got the buttons I use with a free online generator.
There are other options, both online and offline.
I just named the buttons the same as in the menu, and replaced them in the appropriate folders.
Then you set the size in the stylesheet, which I also published.
Very easy deal.
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
ckosloff
Get Em Fast published a menu without any images, just look back in the thread.
For your information, the images are provided for your convenience only, you can use any image you like.
Back in the thread I show how I got the buttons I use with a free online generator.
There are other options, both online and offline.
I just named the buttons the same as in the menu, and replaced them in the appropriate folders.
Then you set the size in the stylesheet, which I also published.
Very easy deal.
thanks ckosloff
I have edited the stylesheets accordingly. It works perfectly in FF!!
However, when I test in IE7, problem comes out. In FF, I only have to point to the background of the category and it will change the background color and show the subcategory list. However, in IE7, I have to point to the words to show the subcategory list. This makes me impossible to choose from the subcategory as the subcategory will disappear when the cursor leaves the main category wordings!
Besides, for the styles of the flyout menu, I managed to change the colors. But I want to have a border around the whole flyout menu, pls let me know how I should code it. I am really green to it.
Thanks for your ongoing support!
-
Re: Support for CSS Flyout Menu
me again, I have found how to add the border for subcategory, thanks!
But I still can't solve the problem of IE, please help, thanks!!
besides, I would like to know the use of the following codes:
Code:
div#nav-cat ul.level2 {background-color: #dddddd; width: 180px;}
div#nav-cat ul.level3 {background-color: #dddddd;}
div#nav-cat ul.level4 {background-color: #dddddd;}
div#nav-cat ul.level5 {background-color: #dddddd;}
div#nav-cat ul.level6 {background-color: #dddddd;}
I tried to change the background color but nothing seems changed.
Thanks
-
Re: Support for CSS Flyout Menu
Much as I would like to help you, I'm afraid that I am very limited here.
I am not the author of the imageless menu, Get Em Fast is, but he's a difficult guy to find.
I have never tested it myself.
However, I will give it a shot, do you have it up somewhere I can look at it?
Or is it only on a local test site?
div#nav-cat, etc. obviously refers to the different levels of categories and subcategories, the higher number the deeper.
Do you have the Web Developer toolbar for Firefox installed?
This will tell you exactly what you need to modify in the stylesheet to get the border you want.
Information --> Display Element Infomation
There is something similar for IE, but I never tried that one.
By the way, which IE are you testing on?
IE6 is a pain in the ########.
-
Re: Support for CSS Flyout Menu
find #categoriescss in your stylesheet and put a border around it, like so:
#categoriescss {
border: etc;
}
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
ckosloff
Much as I would like to help you, I'm afraid that I am very limited here.
I am not the author of the imageless menu, Get Em Fast is, but he's a difficult guy to find.
I have never tested it myself.
However, I will give it a shot, do you have it up somewhere I can look at it?
Or is it only on a local test site?
div#nav-cat, etc. obviously refers to the different levels of categories and subcategories, the higher number the deeper.
Do you have the Web Developer toolbar for Firefox installed?
This will tell you exactly what you need to modify in the stylesheet to get the border you want.
Information --> Display Element Infomation
There is something similar for IE, but I never tried that one.
By the way, which IE are you testing on?
IE6 is a pain in the ########.
thanks for your reply, my site is as follow:
www.locomolife.com/zen
meanwhile I will test with the method in your second msg, btw, I am using IE7
thanks again!
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
ckosloff
find #categoriescss in your stylesheet and put a border around it, like so:
#categoriescss {
border: etc;
}
sorry I am really new to it
I couldnt find the #categoriescss in my stylesheet under CUSTOM
can you explain a little bit details?
thanks...
-
Re: Support for CSS Flyout Menu
I have found a website which does not seem to use image flyout, it runs smooth on IE7 too, just for your reference:
http://www.lorindascandlesandmore.com/
-
Re: Support for CSS Flyout Menu
Sorry about #categoriescss.
Just use this, it is already in your stylesheet_categories_menu.css
div#nav-cat {
border: etc;
}
You can make it solid, double, etc., you need a style editor to see all the options.
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
musicfreer
I finally figured out what the prob is....
I set the background color as transparent, it works perfect for FF
but IE simply treat it as it is really transparent, as it is disappeared!
when I added colors to it, I can mousover the category properly in IE!
cheers
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
musicfreer
I finally figured out what the prob is....
I set the background color as transparent, it works perfect for FF
but IE simply treat it as it is really transparent, as it is disappeared!
when I added colors to it, I can mousover the category properly in IE!
cheers
oh, I found it has still a minor problem
in IE7, now I can enable the flyout menu when I mouseover the background of the main category, however, it is not clickable, I still need to point to the words in order to click the main category
it is a minor problem, but it will be great to eliminate it, any idea? thanks!
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
ckosloff
Sorry about #categoriescss.
Just use this, it is already in your stylesheet_categories_menu.css
div#nav-cat {
border: etc;
}
You can make it solid, double, etc., you need a style editor to see all the options.
hi, sorry that I missed your msg
I have added what is it used for?
pls visit my site again:
www.locomolife.com/zen
pls test with IE7, I can show the flyout menu by a mouseover of anywhere of the main category (no more restricted to the words)
however, if I want to visit the categoies, I still have to click on the words instead of the whole bar
any idea?
thanks again for your support
-
Re: Support for CSS Flyout Menu
I don't know why you want to put a border around your categories, I just showed how it's done.
You can use thin, medium, thick, solid, dotted, double, etc. You can also put colors and different colors top, bottom, right, or left.
I tested your site with IE7, making sure to click on bars, not on words, and it worked fine.
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
ckosloff
I don't know why you want to put a border around your categories, I just showed how it's done.
You can use thin, medium, thick, solid, dotted, double, etc. You can also put colors and different colors top, bottom, right, or left.
I tested your site with IE7, making sure to click on bars, not on words, and it worked fine.
thanks for your reply, i mus post too many mesage that made you sick, my bad
actually I have post a msg saying that I have solved the border problem before
for the lickable prob, I also solved it yesterday by using the CSS from other sites while changing the colors to fit my webpage
it works perfectly
the last problem is that IE7 still shows problem at the status bar, it said line 28 needs a ';'
I checked it should be talking about the rewriteengine on of the csshover.htc
though it does not affect the functionality, but any idea how to solve it?
-
Re: Support for CSS Flyout Menu
Look at line 28 of the reported file, the semicolon means the end of a statement, if it is missing, the browser can interpret strange things.
Glad you got things working.
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
ckosloff
Look at line 28 of the reported file, the semicolon means the end of a statement, if it is missing, the browser can interpret strange things.
Glad you got things working.
thanks a lot
just strange that even I added the semicolon, IE7 still show the exclamation mark at the left bottom corner, though it is working fine, buyer may lose confidence if they see a problem occurring at the site
I am still trying to get rid of it, any idea will be helpful!
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
musicfreer
thanks a lot
just strange that even I added the semicolon, IE7 still show the exclamation mark at the left bottom corner, though it is working fine, buyer may lose confidence if they see a problem occurring at the site
I am still trying to get rid of it, any idea will be helpful!
ok, now I deleted the comment
Code:
# Force the plain domain name if came in with extra (www, etc)
everything is fine now, thanks!
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
Get Em Fast
Vertical-align is only for inline and table elements - doesn't work on block elements. You might try adding "display: inline;", since you've got a "line-height:" set. Other than that, you might just try using padding: settings to align it vertically. Sorry, I missed the "vertical" part in the previous posts. I've been trying to read too much, too fast. Gotta slow down a bit, I guess. :smile:
Hope this helps.
Get Em Fast,
If you are still alive:
I was stumped on the links aligning bottom and couldn't get vertical-align: middle to work.
Tried your suggestion and it didn't work either, so I decided to get logical: fired up Web Dev toolbar, checked what the hell was that link thing and "discovered" it was an a.
So I went to this selector in the related css:
Code:
div#nav-cat li a {
display: inline;
padding: 0.25em 0 0.25em 0.5em;
text-decoration: none;
width: 150px;
/*border-left: 0.5em solid #BBB;}
div#nav li a:hover {border-left-color: red;}*/
}
Replaced "block" by "inline" and it works great.
I was fumbling around in the wrong selector.
Duh!!
Thanks.
-
Re: Support for CSS Flyout Menu
Uh, oh.
Posted too fast.
Actually display:inline looks good but doesn't work that good, you need block to display deeper sub cats.
They do show but I was unable to access and click on them, so a little more work and got the final version of that selector.
Code:
div#nav-cat li a {
display: block;
padding-bottom: 8px;
padding-left: 10px;
text-decoration: none;
width: 150px;
/*border-left: 0.5em solid #BBB;}
div#nav li a:hover {border-left-color: red;}*/
}
-
Re: Support for CSS Flyout Menu
I have been hashing over this submenu block problem for the past week. I did clean up the CSS a bit and even tried your css without success. The differing widths does not seem to create a problem but I did not completely remove the width lines from my css, I only changed them all to 150 to test it. I have checked the site with the IE Dev Toolbar and everything looks clean from what it is reading. However somehow it always shows the ul set to display:block and the li set to display:none. I am not sure if that's because it only takes a snapshot or if it's actively reading the state of the script. Somehow I doubt that it's that intelligent though.
I found some references to other people having trouble when building hover scripts with more than two ul levels and it may be a bug within IE7. Does anyone have a working site with more than 2 levels on the menu that I can look at? If you got it to work was there anything special you had to do to get rid of the display: bug? One method I saw used a left: -999em to "hide" the menu but that didn't seem to help either. I have run out of ideas so any help is appreciated.
Thanks,
-Shawn
Quote:
Originally Posted by
cmwoods
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
-
Re: Support for CSS Flyout Menu
Can I somehow add manufacturer drop down to the menu as well?!?!?!
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
poosk
Can I somehow add manufacturer drop down to the menu as well?!?!?!
That's not a supported feature.
You will need custom PHP programming for that.
ZC is open source, so good luck.
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
nightwolff
I have been hashing over this submenu block problem for the past week. I did clean up the CSS a bit and even tried your css without success. The differing widths does not seem to create a problem but I did not completely remove the width lines from my css, I only changed them all to 150 to test it. I have checked the site with the IE Dev Toolbar and everything looks clean from what it is reading. However somehow it always shows the ul set to display:block and the li set to display:none. I am not sure if that's because it only takes a snapshot or if it's actively reading the state of the script. Somehow I doubt that it's that intelligent though.
I found some references to other people having trouble when building hover scripts with more than two ul levels and it may be a bug within IE7. Does anyone have a working site with more than 2 levels on the menu that I can look at? If you got it to work was there anything special you had to do to get rid of the display: bug? One method I saw used a left: -999em to "hide" the menu but that didn't seem to help either. I have run out of ideas so any help is appreciated.
Thanks,
-Shawn
Hi
You are welcome to look at www.wilcodirect.co.uk, which is my handiwork and does work with numerous levels. You've already got the CSS for it and I suggest you need to go through yours again as it still seems far too complicated to me.
I'll have a proper look later today, but if you read this before I get chance to do, I'd print both your current menu CSS and mine, and cross off each line I have, that you have, then that will leave you with the lines which will be causing the problem.
HTH
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
cmwoods
Hi
You are welcome to look at
www.wilcodirect.co.uk, which is my handiwork and does work with numerous levels. You've already got the CSS for it and I suggest you need to go through yours again as it still seems far too complicated to me.
I'll have a proper look later today, but if you read this before I get chance to do, I'd print both your current menu CSS and mine, and cross off each line I have, that you have, then that will leave you with the lines which will be causing the problem.
HTH
Hi, I was able to get another borrowed script to work properly. It may have been that when I tried to use yours the browser never cleared all of mine from the cache and I may not have hit Ctrl-F5 when I tried it.
I went through my css and checked every line to see what was in it that was not in the other script. After some trial and error and a few Ctrl-F5s to clear cache I found the problem. It appears the offending line was under "div#nav-cat li" where I had somehow gotten a "height: 17px" in it. Once I commented that line out everything started behaving properly like the borrowed script. Thanks for your help!
-Shawn
-
Re: Support for CSS Flyout Menu
Guys,
Now is my turn to ask for help.
Below you will find the latest version of my stylesheet.
The menu works great in IE7 and FF.
However, IE6 renders it horribly and the hover doesn't even work.
Could anybody check why this is happening because I am about to go bonkers:frusty:
I cannot fix the stylesheet to work in IE6 without breaking the other browsers.
Thanks.
------------------------------------------------------------
body {
behavior: url(./csshover.htc);
/* WinIE behavior call */}
div#nav-cat {
width: 150px;
margin: 0;
background-color: transparent;
font-weight:bold;
text-align: left;
line-height: 20px;
}
div#nav-cat ul {
margin: 0;
padding: 0;
width: 150px;
background-color: transparent;
}
div#nav-cat ul.level2 {
margin-left: 5px;
padding: 0;
width: 150px;
background-color: transparent;
border: none;
}
div#nav-cat ul.level3 {
background-color: transparent;
}
div#nav-cat ul.level4 {
background-color: transparent;
}
div#nav-cat ul.level5 {
background-color: transparent;
}
div#nav-cat ul.level6 {
background-color: transparent;
}
div#nav-cat li {
background-image: url(../images/b1.gif);
position: relative;
list-style: none;
margin: 0;
z-index: 20;
height: 20px;
width: 150px;
/* change it to whatever space you want to put space between buttons*/}
/* <---this line may help or hinder IE menu shifting issues */
div#nav-cat li li {
margin: 0px;
/* this overrides the margin-top in the declaration above */
}
div#nav-cat li:hover {
background-image: url(../images/b1_over.gif);
}
div#nav-cat li.submenu {
background-color: transparent;
}
div#nav-cat li.submenu:hover {
background-color: transparent;
}
div#nav-cat ul {
background-color: transparent;
}
div#nav-cat li a {
display: block;
padding-bottom: 8px;
padding-left: 10px;
text-decoration: none;
width: 150px;
/*border-left: 0.5em solid #BBB;}
div#nav li a:hover {border-left-color: red;}*/
}
div#nav li a:hover {
border: none;
}
div#nav-cat>ul a {
width: 150px;
padding-bottom: 3px;
}
div#nav-cat ul ul {
position: absolute;
top: 0;
left: 150px;
display: none;
}
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;
}
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
ckosloff
Guys,
Now is my turn to ask for help.
Below you will find the latest version of my stylesheet.
The menu works great in IE7 and FF.
However, IE6 renders it horribly and the hover doesn't even work.
Could anybody check why this is happening because I am about to go bonkers:frusty:
I cannot fix the stylesheet to work in IE6 without breaking the other browsers.
Thanks.
------------------------------------------------------------
body {
behavior: url(./csshover.htc);
/* WinIE behavior call */}
div#nav-cat {
width: 150px;
margin: 0;
background-color: transparent;
font-weight:bold;
text-align: left;
line-height: 20px;
}
div#nav-cat ul {
margin: 0;
padding: 0;
width: 150px;
background-color: transparent;
}
div#nav-cat ul.level2 {
margin-left: 5px;
padding: 0;
width: 150px;
background-color: transparent;
border: none;
}
div#nav-cat ul.level3 {
background-color: transparent;
}
div#nav-cat ul.level4 {
background-color: transparent;
}
div#nav-cat ul.level5 {
background-color: transparent;
}
div#nav-cat ul.level6 {
background-color: transparent;
}
div#nav-cat li {
background-image: url(../images/b1.gif);
position: relative;
list-style: none;
margin: 0;
z-index: 20;
height: 20px;
width: 150px;
/* change it to whatever space you want to put space between buttons*/}
/* <---this line may help or hinder IE menu shifting issues */
div#nav-cat li li {
margin: 0px;
/* this overrides the margin-top in the declaration above */
}
div#nav-cat li:hover {
background-image: url(../images/b1_over.gif);
}
div#nav-cat li.submenu {
background-color: transparent;
}
div#nav-cat li.submenu:hover {
background-color: transparent;
}
div#nav-cat ul {
background-color: transparent;
}
div#nav-cat li a {
display: block;
padding-bottom: 8px;
padding-left: 10px;
text-decoration: none;
width: 150px;
/*border-left: 0.5em solid #BBB;}
div#nav li a:hover {border-left-color: red;}*/
}
div#nav li a:hover {
border: none;
}
div#nav-cat>ul a {
width: 150px;
padding-bottom: 3px;
}
div#nav-cat ul ul {
position: absolute;
top: 0;
left: 150px;
display: none;
}
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;
}
Hi
I'm not able to get access to IE6 until Monday, but your hover problem will be because IE6 needs the csshover.htc file to work, whereas IE7 and FF don't.
Your stylesheet cannot find it. Change the top line of your CSS to includes/csshover.htc and put said file there too. As the mod is originally supplied, it assumes too much about how people follow instructions. You should have the file somewhere already, but it is not being found at the moment by the use of the relative path.
HTH
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
cmwoods
Hi
I'm not able to get access to IE6 until Monday, but your hover problem will be because IE6 needs the csshover.htc file to work, whereas IE7 and FF don't.
Your stylesheet cannot find it. Change the top line of your CSS to includes/csshover.htc and put said file there too. As the mod is originally supplied, it assumes too much about how people follow instructions. You should have the file somewhere already, but it is not being found at the moment by the use of the relative path.
HTH
Nice try, but the mother ############ IE6 doesn't want to know anything about it:no:
BTW the correct path in the stylesheet is:
body {
behavior: url(../../../csshover.htc);
/* WinIE behavior call */}
assuming it is in folder "includes", as the mod originally installs it, the mod should be updated.
In my case, the stylesheet is in includes/templates/CUSTOM/css/, which explains the path to csshover.htc.
If you want to have IE6 in your dev computer, install Virtual PC 2007 + SP1 (free from MS).
Then create a virtual machine with 2KPro.
There are other problems IE6 creates like breaking the sidebox where the menu is installed, but we'll get to that later.
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
ckosloff
Nice try, but the mother ############ IE6 doesn't want to know anything about it:no:
BTW the correct path in the stylesheet is:
body {
behavior: url(../../../csshover.htc);
/* WinIE behavior call */}
assuming it is in folder "includes", as the mod originally installs it, the mod should be updated.
In my case, the stylesheet is in includes/templates/CUSTOM/css/, which explains the path to csshover.htc.
If you want to have IE6 in your dev computer, install Virtual PC 2007 + SP1 (free from MS).
Then create a virtual machine with 2KPro.
There are other problems IE6 creates like breaking the sidebox where the menu is installed, but we'll get to that later.
Hi,
I may have misunderstood you earlier, the csshover.htc is required to get the menu to work at all in IE6. If it does work then that's not your problem but I have seen a number of people (myself included!) who get confused as to where it needs to be located, so mine uses a hard-coded path to prevent it happening.
I notice you appear to have a missing -cat on your li a:hover line towards the bottom. That may be a line to investigate.
HTH
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
cmwoods
Hi,
I may have misunderstood you earlier, the csshover.htc is required to get the menu to work at all in IE6. If it does work then that's not your problem but I have seen a number of people (myself included!) who get confused as to where it needs to be located, so mine uses a hard-coded path to prevent it happening.
I notice you appear to have a missing -cat on your li a:hover line towards the bottom. That may be a line to investigate.
HTH
The location of the file relative to the stylesheet is given to me by the style editor that I use (Top Style Pro).
I tried your suggestion, it is indeed a nice catch, because it is a syntax error in the stylesheet, and IE6 is not forgiving of those.
However, the ########## is still misbehaving :lamo:
The correction has no effect on the other browsers, nor on IE6, it acts impervious to all my tries.
I left it there, just in case.
Let it be known that the contrib is released with the error.
Original line:
div#nav li a:hover {border: none;
}
FYI, I did eliminate some errors in IE6 by adding this line:
div#nav-cat li {
background-image: url(../images/b1.gif);
background-repeat: no-repeat;
position: relative;
list-style: none;
margin: 0;
z-index: 20;
height: 20px;
width: 150px;
}
Have a nice weekend!
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
ckosloff
There is another contrib for that, look in the Downloads section, type menu in the searchbox.
Quote:
Originally Posted by
Get Em Fast
Hmm. with that css that I posted, you should be getting NO imges. I've actually got a more recent css that I worked on for a client that has NO images in it. The css looks like this:
Code:
body {
behavior: url(includes/csshover.htc);
} /* WinIE behavior call */
div#nav-cat {
margin-top: 0em;
background-color: #838367;
width: 95%;
margin-left: auto;
margin-right: auto;
font-weight: bold;
font-size: 1.0em;
}
div#nav-cat ul {
margin: 0;
padding: 0;
width: 100%;
background-color: #838367;
z-index: 1000;
/* border: 1px solid #AAA;*/
}
div#nav-cat ul.level2 {background-color: #c65928; width: 180px;}
div#nav-cat ul.level3 {background-color: #c65928;}
div#nav-cat ul.level4 {background-color: #c65928;}
div#nav-cat ul.level5 {background-color: #c65928;}
div#nav-cat ul.level6 {background-color: #c65928;}
div#nav-cat li {
z-index: 1;
position: relative;
list-style: none;
margin: 0;
margin-top: 2px; /* change it to whatever space you want to put space between buttons*/
border-bottom: 1px solid #CCC; /* <---this line may help or hinder IE menu shifting issues */
}
div#nav-cat li li {
margin: 0; /* this overrides the margin-top in the declaration above */
}
div#nav-cat li:hover {background-color: #c65928;}
div#nav-cat li.submenu {background-color: #838367;}
div#nav-cat li.submenu:hover {background-color: #c65928;}
div#nav-cat li a {
display: block;
padding: 0.25em 0 0.25em 0.5em;
text-decoration: none;
width: 99%;
color: #CDB38B;
}
div#nav-cat>ul a {
width: auto;
}
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;
background-color: #756783;
}
That should make it look EXACTLY like the attached thumbnail:
Though, I see you have been working on it, but you STILL got those images that you initially DIDN'T want. Change to this css (no images), then you can edit the colors the way you want. If you've decided you want images, and need help, just let me know. I'm sorry I haven't been around like I said I would, but I've been VERY busy with a 7-day a week job, 3 boys, 1 wife, 1 dog, 24,000 chickens, a website for a client that I'm already late on, and living on no sleep (3-4 hrs/night) to do it all. But, I DO still check in when I can, so don't give up.
I'll answer your other questions as soon as you know for sure if you want the images, or not.
Hope this helps.
Thanks for your posting, this version of CSS above really helped with some IE6 and IE7 issues when using version 1.3.8a of zencart. I suggest anyone who has issues with IE6 does a compare with the built in CSS and the above to get ideas on how to limit these.
airbag
-
Re: Support for CSS Flyout Menu
Thanks for answer.
I will give it a shot.
In fact, I have prepared a virtual machine with nothing in it except 2KPro and IE6.
It also has the XAMPP server installed, so I can test locally instead of disturbing my live site all the time.
In fact, I only need to butcher those IE6 quirks, everything looks fine in IE7 and Firefox.
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
ckosloff
Thanks for answer.
I will give it a shot.
In fact, I have prepared a virtual machine with nothing in it except 2KPro and IE6.
It also has the XAMPP server installed, so I can test locally instead of disturbing my live site all the time.
In fact, I only need to butcher those IE6 quirks, everything looks fine in IE7 and Firefox.
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
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
cmwoods
Hi
...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...
HTH
You were right on the money about csshover.htc
I changed the line and now it works in IE6.
IE7 and Firefox don't care about these changes.
Strange that now Top Style Pro says it cannot find the file, however IE6 does...
I already FTPed the changes so you will be able to see them in your IE6.
Thank you very much for the suggestion, I was totally confused with the style editor reporting something different.
There's another problem that I need your help to tackle:
IE6 breaks the sidebox.
According to the Web Dev toolbar, the thing that is breaking it is an element "a".
If you have this extension installed, go to Information --> Display Element Information and click on any link in the Catalog.
It reports that the element has a width of 160px. and a height of 28px.
I have set totally different dimensions in my stylesheet (150 * 20).
IE7 and Firefox, though they read the dimensions as 160 * 28, display the element correctly, while IE6 displays it verbatim.
I cannot figure out how to make it obey the commands in the stylesheet.
Thanks in advance.
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
ckosloff
You were right on the money about csshover.htc
I changed the line and now it works in IE6.
IE7 and Firefox don't care about these changes.
Strange that now Top Style Pro says it cannot find the file, however IE6 does...
I already FTPed the changes so you will be able to see them in your IE6.
Thank you very much for the suggestion, I was totally confused with the style editor reporting something different.
Computers are wonderful things aren't they? I had the same problems too a while back and it drove me mad too. I just ended up spending 2 days doing nothing else but get this menu working as I wanted it.
Quote:
There's another problem that I need your help to tackle:
IE6 breaks the sidebox.
According to the Web Dev toolbar, the thing that is breaking it is an element "a".
If you have this extension installed, go to Information --> Display Element Information and click on any link in the Catalog.
It reports that the element has a width of 160px. and a height of 28px.
I have set totally different dimensions in my stylesheet (150 * 20).
IE7 and Firefox, though they read the dimensions as 160 * 28, display the element correctly, while IE6 displays it verbatim.
I cannot figure out how to make it obey the commands in the stylesheet.
Thanks in advance.
I'll have a proper look tomorrow, but I'd get rid of your first line-height declaration for starters. As you are using images for your backgrounds, it's not really needed.
-
Re: Support for CSS Flyout Menu
Thanks a lot for help.
I'll be tinkering with them stylesheets in the evening.
Will check the suggestion on line-height.
Tomorrow.
-
Re: Support for CSS Flyout Menu
Sorry to say, eliminating line-height is not the answer.
It will break the sidebox.
However, I did find some answers for making it look acceptable in IE6.
I am already resigned to the fact that this menu will never work flawlessly in that browser, and I cannot modify the stylesheet to fit that browser, to the prejudice of "good" browsers.
I also had to make some changes in main stylesheet.
Nevertheless, I am making good progress.
Will post results of my research here.
PS. Already found what was inflating the sidebox.
It's the padding or margin that I inserted in the "a".
However, that was needed for esthetical purposes in "good" browsers, that have no problem in rendering it correctly.
-
Re: Support for CSS Flyout Menu
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
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
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
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.
-
Re: Support for CSS Flyout Menu
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.
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
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.
Please do post the hack. I know I'd be interested in taking a look.
-
Re: Support for CSS Flyout Menu
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.
Quote:
Originally Posted by
cmwoods
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
Code:
* 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 */
}
-
1 Attachment(s)
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
Mark Kidd
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.
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
ckosloff
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.
-
Re: Support for CSS Flyout Menu
Quote:
Originally Posted by
Mark Kidd
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.
-
Re: Support for CSS Flyout Menu
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 Code:
<?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 Code:
<?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.
-
Re: Support for CSS Flyout Menu
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