Categories Dressing

[r1formetoo]

r1formetoo - I played with the styling a bit... see what you think of this.

#chcategories ul {/*top category lists*/
    list-style: none;
    background: none;
    border: nono;
    margin: 0 0 0.4em 0;
    padding: 0;
    }

#chcategories ul a {/*top categories*/
    display: block;
    background: #ffffff;
    border: none;
    margin: 0;
    padding: 0 0.4em;
    }

#chcategories ul ul {/*subcategory lists*/
    list-style: none;
    background: #DCDCDC;
    border: none;
    margin: 0 0 0.0em 0; /*WAS 0 0 0.4em 0*/
    padding: 0 0 0 0.0em; /*WAS 0 0 0 1.3em*/
    }

#chcategories ul ul a {/*subcategories*/
    display: block;
    background: #E9EAEA;
    border: none;
    margin: 0;
    padding: 0;
    }

/*change  bullet when a category w/o bg image is open to subs:*/
#chcategories li a.cat-parent-text {
    color: #000000;
    background: #6CbBff;
    font-weight: bold;
    }

/*change  bullet when a category w/o bg image is open to products:*/
#chcategories li a.cat-selected-text {
    color: #000000;
    background: #6CbBff;
    font-weight: bold;
    }
...

/* top category hover effects*/
#chcategories li.cat-top a:hover {
    color: #000000; /*this is the top level cat text color only when hovering*/
    background:  #4C9Bff; /*this is the top level cat background color only when hovering*/
    } 

/* subcategory hover effects*/
#chcategories li li.cat-subs a:hover, #chcategories li li.cat-products a:hover {
    color: #000000; /*this is the 1st subcat text color only when hovering*/
    background: #4C9Bff; /*this is the 1st subcat background color only when hovering*/
    } 

...

#chcategoriesContent {padding: 0.4em 0;}
/*From here to */
#chcategories li>ul {display: none;}

#chcategories li:hover {position: relative;}

#chcategories li:hover>ul {
    display: block;
    position: absolute;
    left: 98%;
    top: 0;
    border: 1px solid #000000;
    z-index: 100;
    width: 98%;
    }	
/*Here came from post 1750 of main support thread*/

For some reason Glenn I just completely missed seeing this post til now. I implemented your thoughts and then a few of mine. I did away with the grey background in the pop up subcat box and went to white. I then added a hover background color that was a lighter blue this time. I like it. One thing I still think it needs is for the subcats to display once your inside them. Take the link below as an example. It's not until you hover over "sport bike stands" that you are reminded you're in the "commercial series" section. I sort of think that perhaps we should have all the subcats displayed without hovering so people are tempted to continue clicking to see the industrial and swivel series and so on. What do you think of this idea?

http://www.examplecart.com/catalog/s...series-c-87_88

[gjh42]

Have the active category's subs expanded in the sidebox instead of the hoverbox? Could be a good idea, especially if the current subcat is not prominently identified in the main column.

Add to the bottom of your stylesheet

.cat-parent-text+ul {display: block !important;}

It needs some more rule tweaking to eliminate a hover jitter, but that would be a start.
I have to go now, and probably won't be able to spend time on this for a couple of days.

[r1formetoo]

Have the active category's subs expanded in the sidebox instead of the hoverbox? Could be a good idea, especially if the current subcat is not prominently identified in the main column.

Add to the bottom of your stylesheet

.cat-parent-text+ul {display: block !important;}

It needs some more rule tweaking to eliminate a hover jitter, but that would be a start.
I have to go now, and probably won't be able to spend time on this for a couple of days.

I tried that and I see exactly what you mean. Man those jitters are serious! Ha! As usual I have no idea what to do to fix that. Please shoot me over a PayPal PM and I'll send you a couple bucks for your help. Thanks and please let me know if you get any ideas on how to fix that jitter.....

[nummell]

Thanks for the "Prime" rating Glenn

[gjh42]

Try this in place of the short rule above:

#chcategories .cat-parent-text+ul, #chcategories li:hover>.cat-parent-text+ul {
    display: block;
    position: static;
    border: 0;
    width: 100%;
    }

[r1formetoo]

Try this in place of the short rule above:

#chcategories .cat-parent-text+ul, #chcategories li:hover>.cat-parent-text+ul {
    display: block;
    position: static;
    border: 0;
    width: 100%;
    }

I tried that and it did exactly what I think the site needed. I've got another question. In one of your past statements it sounded like you were under the impression that my menu was a little cramped. How do you feel about a stylesheet statement that gives them just a tid bit of vertical spacing in between each line? I'm both for and against it. On one hand the menu is already quite tall due to my large product line but on the other I agree that everything looks a little jumbled.

[gjh42]

I wasn't talking about the categories menu in particular there, but it might not hurt to increase the spacing a bit. Try this:

#chcategories a {line-height: 1.4em}


As it is, when you move the mouse to a subcategory, its top cat loses the hover color. Adding a selector

#chcategories li.cat-top:hover>a,

to

#chcategories li.cat-top a:hover{color:#000;background:#ADDBFF url(/catalog/includes/templates/mower/images/catbghover.gif)}

to get

#chcategories li.cat-top:hover>a, #chcategories li.cat-top a:hover{color:#000;background:#ADDBFF url(/catalog/includes/templates/mower/images/catbghover.gif)}

will fix that.
Unless there is something I don't see, the background image is not doing anything and can be eliminated (red text).

[r1formetoo]

I wasn't talking about the categories menu in particular there, but it might not hurt to increase the spacing a bit. Try this:

#chcategories a {line-height: 1.4em}


As it is, when you move the mouse to a subcategory, its top cat loses the hover color. Adding a selector

#chcategories li.cat-top:hover>a,

to

#chcategories li.cat-top a:hover{color:#000;background:#ADDBFF url(/catalog/includes/templates/mower/images/catbghover.gif)}

to get

#chcategories li.cat-top:hover>a, #chcategories li.cat-top a:hover{color:#000;background:#ADDBFF url(/catalog/includes/templates/mower/images/catbghover.gif)}

will fix that.
Unless there is something I don't see, the background image is not doing anything and can be eliminated (red text).

Yeah, I'll try that. The background image has been switched to nothing but a clear gif file. It was the best way I knew to fix it to not showing up.

[r1formetoo]

Excellent input Glenn. I tried each of those mods and I agree completely that those changes were a "win win" scenario. Thanks and have a great weekend!

Ian

[SweetEmotions]

Picture 01 is how my categories originally looked. I have been trying to move the 2011 category into where the 2010 category is. I have disabled the 2010 category and have made several attempts to make the 2011 move down into its spot. When I try and move it, the Featured title moves along with it. Picture 02 shows one of my attempts. How can I make the Featured title stay at the very top? How do I make it so that 2012 is the only link currently under Featured? www lotions galore dot com