Problems creating an "active" class for my navigation bar

Hi All,

First off before I say anymore I'd like to mention that I have indeed found the ".category-subs-selected" class that spans across the anchor of my left hand side categories.

My main problem is that it only spans across the anchor, and i need it to be active across the entire list item.

I'm aiming to create a menu style similar to the one at https://www.forgetfoo.com.

I've managed to create the design using css & html but i'm having problems re-creating it in my zen cart install (1.3.8a or the latest one).

Has anyone any ideas? I'm finding my image only covers the anchor part of the list and thus is clipped around the list anchor text.

Generally if I were just designing it in css & html i would place a class="active" inside the <li> instance of the list. Then i would set the image width and height in the list's anchor/item(li) css styling. Add some z-index styling, and the image source to the .active class and it was done.

Can anyone point out what i'm doing wrong or a module that can help me?

Cheers & thanks for your time,

Sykth

I believe you will have to add another div in the code and give it the required width and height before you can make it the active area. That's what they did on that site you mentioned.

However, just for fun, try adding to the definition for a.category-top a width of 100%. (You may have to add that element to your stylesheet.) That should not cause problems, as it will be 100% of the containing div, which is the sidebox. Worth a try anyway.

Rob

Hi there Rsteveson,

Thanks for your suggestions - I tried your A.category-top {width: 100%} fix, but unfortunately had no luck with it.

I believe you will have to add another div in the code and give it the required width and height before you can make it the active area. That's what they did on that site you mentioned.

Without sounding completely new, where would I be adding this Div at?

The side boxes are automatically generated? If I could somehow get access to the code that sets the .category-subs-selected class i might be able to change it from spanning across the anchor to simply the whole list item?

Any ideas where I would find this, if this is a possibility? I'm willing to give addons/plugins a go to get this working but couldn't find any suitable ones in the addons link of the zen cart site.

Thanks for your time & help,

Sykth.

You said that you were trying to create a menu style "similar to the one at www.forgetfoo.com." Alas, those menus are structured quite differently to the menus in Zen Cart. ZC uses a List structure for sidebox menus, and this structure, by default, sets the link area only over the actual text. It doesn't extend this link all the way across the sidebox, which I think is what you're trying to achieve.

There are ways to force this to happen. I think it involves giving each List Item a Span and then telling the Span (in the stylesheet) to display: block;, or something like that.

If you can find a Zen Cart site or template where this is done (I'm sure I've seen them) we can probably pick apart the code to find out how it's done. But looking at your example site won't help us.

Rob

Hey rstevenson,

I've solved it! I couldn't find any templates with the active list item highlighted instead of just the text, so I went digging...

includes\templates\template_default\sideboxes\tpl_categories.php I found the code I was after. (Probably should shift this to my custom template).

In my messy way I edited the line 40 to:

$content .= '<a class="category-subs-selected">' . $box_categories_array[$i]['name'];

Basically taking out the span option where the code checks if the category selected is "current".

I then simply added my styling to .#navCatTabs .category-subs-selected {} in my css stylesheet.

Thanks for the heads up on the "display: block" command for the above styling, because without it, it wouldn't work!

Thanks for your help, and I hope my amateur php coding is ok for anyone with the same problem!

Sykth.