Css Flyout Categories Menu troubles

[clydejones]

Uh....so far, I haven't noticed this, but in some cases you might be right. I've attached a screen shot of the original mod where I developed it. If you have any problems, just let me know. I'm sure it's just a margin or padding issue.

Thanks, I'll play around with it a bit.

[Get Em Fast]

Thanks, I'll play around with it a bit.

Sorry. Had to leave for a bit.
This was just as easy as I thought it would be. Just find these two sections (first part of code):

div#nav-cat {width: 150px; margin: -1px 0 0 -1px;
background-color: transparent; font-weight:bold;
text-align: center;
line-height: 23px;
}

and.....

div#nav-cat ul {margin: 0; padding: 0; padding-top: 0; width: 150px; background-color: transparent;
border: 2px solid tan;
background-repeat: no-repeat;
}


And add:

padding-bottom: 1em;

to each on of them, with the results being:

div#nav-cat {width: 150px; margin: -1px 0 0 -1px;
background-color: transparent; font-weight:bold;
text-align: center;
line-height: 23px;
padding-bottom: 1em;
}


div#nav-cat ul {margin: 0; padding: 0; padding-top: 0; width: 150px; background-color: transparent;
border: 2px solid tan;
background-repeat: no-repeat;
padding-bottom: 1em;
}


Hope this helps.

[manfer72]

Hi,

I've a little problem with css flyout menu.. see: www.crazyanimals.it

When i pass through my menu with IE sometimes i loose the focus closing the menu..
Sometimes choose a second level category it's very difficult..
Someone can help me ??

Thanks !!

Best Regards

Ferruccio

[MrCCTV]

Hi,

I've a little problem with css flyout menu.. see: www.crazyanimals.it

When i pass through my menu with IE sometimes i loose the focus closing the menu..
Sometimes choose a second level category it's very difficult..
Someone can help me ??

Thanks !!

Best Regards

Ferruccio

I had similar problem, works fine as long as I’m at http://crazyanimals.it but not at http:// www.crazyanimals.it I had to add the following lines for each of my domains in the .htaccess file.

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.crazyanimals.it$ [NC]
RewriteRule ^(.*)$ http://crazyanimals.it/$1 [L,R=301]

[MeltDown]

This is a great module - Thanks!! I've been able to fine-tune it for my site but there is one minor annoyance. The font type for the Css Flyout Categories Menu text is a bit different from the other fonts. (Take a look)

I can't seem to track down where the problem is! Could you folks take a look and see if you could spot it for me? This is my modified stylesheet_categories_menu.css:

/* 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: #e8e9e9; /* Sets sidebox background colour, Set colour below for the 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: #e8e9e9; /* Sets CSS Flyout List Area background colour - 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: #bababa; /* Sets CSS Flyout List Area background colour - 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 #e8e9e9; /* 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: #84A4C1; /* Sets the background color of a line item which is being hovered over - 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: #84A4C1; /* 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 */
font-size:.850em; /* Set font size - Applies throughout entire sidebox and CSS Flyout */
color: #000000; /* 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 */
}

Thanks!!!

[cmwoods]

Hi,

You have two font-size settings in your main stylesheet in two different appearances of .sideBoxContent. One sets the size to .850 em and another later on is setting it to .975em.

As you have set the font-size in the css flyout stylesheet to .850em I assume that is the size you think the rest of the sideboxes is displaying, but it isn't as it is getting overridden by the later .sideBoxContent declaration.

If you want the text on your menu to be like the rest of the boxes, than change the font-size in the css flyout stylesheet to .975em and get rid of the erroneous declaration in your main stylesheet.

HTH

[MeltDown]

Hi,

You have two font-size settings in your main stylesheet in two different appearances of .sideBoxContent. One sets the size to .850 em and another later on is setting it to .975em.

As you have set the font-size in the css flyout stylesheet to .850em I assume that is the size you think the rest of the sideboxes is displaying, but it isn't as it is getting overridden by the later .sideBoxContent declaration.

If you want the text on your menu to be like the rest of the boxes, than change the font-size in the css flyout stylesheet to .975em and get rid of the erroneous declaration in your main stylesheet.

HTH

Beautiful - As I hoped, a second set of eyes made all the difference. I kept staring and staring but obviously missing something...

Thanks!!

[welchyboy]

Hello I am having trouble with trying to figure out how to add links to the css flyout vertical menu. I would just like regular links that can go to my home page contact us page and so forth as well as have the products. An example of what I am looking to do for my menu bar is this...

http://www.thepecanbarn.com/index.php


My site is here

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

[issy]

Hello,
Thanks for this great contribution.
ZC V1.3.8
I've been able to install mod but I have a problem with left vertical sub menus displaying behind right content, I've been going at it for days now and I can not figure out where I went wrong, could you guys please take a look at my site? maybe a second set of eyes will catch my error. I've tried 2 version of this mod!!! :)

Thanks in advance for all your help.
Here's the link to site hxxp://www.imagetech.us/shop/

[ckosloff]

...a second set of eyes will catch my error

This is obviously a z-index issue.
If you don't know what this is, do this tutorial
http://www.w3schools.com/css/css_intro.asp
then tweak your CSS accordingly.
You need 3 things:
1) A test site, if you don't know how to build one, buy the Zen manual and follow instructions.
2) A style editor, I use Top Style Pro, but you can use anything you like.
3) The Web Developer add-on for Firefox.
Lastly, please post your questions in the other thread, referenced above.
I will no longer answer questions on this thread.
Thank you.