Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Ways to style CURRENT category menu choice?

Ways to style CURRENT category menu choice?

Locked

Views: 1,819

Results 1 to 6 of 6
This thread is locked. New replies are disabled.
6 Apr 2009, 7:32 PM
#1
pixelwrangler avatar

pixelwrangler

New Zenner

Join Date:
Mar 2009
Posts:
59
Plugin Contributions:
0

Ways to style CURRENT category menu choice?

Is there a way to style the category menu choice of the current page (i.e., the one that is currently displayed) so that CSS can be used to emphasize the user's place in menu navigation? Just a way to style the category menu so that it reflects what's shown in the breadcrumb trail.

Is plain old HTML pages, all you need to do is this:

<ul> <li>First menu choice</li> <li class="selected">second menu choice</li> <li>third menu choice</li>

And then to emphasize the current choice:

li.selected {
color:red;
background: yellow;
}

Can't see any obvious way to do this in ZC. I'm using Categories Dressing, which is just perfect for the rest of the menu styling. But there doesn't seem to be any way to target the current page so that the menu choice for it can be emphasized.

TIA for your suggestions!

6 Apr 2009, 7:35 PM
#2
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,808
Plugin Contributions:
15

Re: Ways to style CURRENT category menu choice?

It is easier for us to look at possibilities with a URL.

6 Apr 2009, 8:31 PM
#3
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Ways to style CURRENT category menu choice?

These lines in stylesheet_categories_dressing.css can be modified to indicate the current category path:```
/change bullet when a category w/o bg image is open to subs:/
#categories li a.cat-parent-text {
list-style: square inside url(../images/bullet2.gif);/change to list-style: none; to remove bullet/
}

/change bullet when a category w/o bg image is open to products:/
#categories li a.cat-selected-text {
list-style: square inside url(../images/bullet3.gif);/change to list-style: none; to remove bullet/
}

6 Apr 2009, 8:46 PM
#4
pixelwrangler avatar

pixelwrangler

New Zenner

Join Date:
Mar 2009
Posts:
59
Plugin Contributions:
0

Re: Ways to style CURRENT category menu choice?

Site is not live, but here's the problem:

6 Apr 2009, 9:06 PM
#5
pixelwrangler avatar

pixelwrangler

New Zenner

Join Date:
Mar 2009
Posts:
59
Plugin Contributions:
0

Re: Ways to style CURRENT category menu choice?

Thank you! I knew it was in there - it just wasn't clear to me exactly how to target it.

I'm going to have to play around with the cascade to see if I can just get the CURRENT link to style differently. Right now, I have the all of the category listings in the link path styled to reflect "where you are" to the user, but I have to make just the LAST link distinctive.

Thanks again for your help!

6 Apr 2009, 11:14 PM
#6
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Ways to style CURRENT category menu choice?

#categories li a.cat-selected-text {} can only apply to the immediate selected category (since it is open to products), but
#categories li a.cat-parent-text {} can apply to the selected category or to any of its parents. Not sure at the moment if there is a handle to distinguish between those cases.