Change Category Navigation Design

Hi guys,

I am trying to edit this category navigation view. What I need is this:

- We do not want to see all main categories or all sub categories as well.
- When I click a Main Category (ParentCategoryId = 0), I should see only this one and it's sub categories.
- When I click one of this sub categories, this sub category should be main category, and this time I should see it's sub categories only.

For ex, navigation system works like this right now:

- Women (selected)
   - Bag
   - Top
   - Dress
- Sound Systems
- Home Decoration
- Gardening

or

- Women
   - Bag
   - Top (selected)
      - Tshirt
      - Sweatshirt
      - Tunic
   - Dress
   - Jeans
   - Suit
- Sound Systems
- Home Decoration
- Gardening

What we want is that:

- Women (selected)
   - Bag
   - Top
   - Dress
   - Jeans
   - Suit
or

- Top (selected)
   - Tshirt
   - Sweatshirt
   - Tunic

@helper RenderCategoryLine(CategorySimpleModel category)
{
// additional check on whether to set an active class on the parents of the current categories and above. Meaning all categories from the 
// breadcrumb will have an "active" class
bool active = false;
if (category.Id == Model.CurrentCategoryId || category.SubCategories.Count(BreadCrumbContainsCurrentCategoryId) > 0)
{
    active = true;
}
    <li class="@(active ? "active" : "inactive")">
        @if (category.ParentCategoryId == Model.CurrentCategoryId || category.Id == Model.CurrentCategoryId)
        { 
        <a href="@Url.RouteUrl("Category", new { SeName = category.SeName })">@category.Name
            @if (category.NumberOfProducts.HasValue)
            {
                <text> </text>@T("Categories.TotalProducts", category.NumberOfProducts.Value)
            }
        </a>
        }
        @{
            if (category.Id == Model.CurrentCategoryId ||
                category.SubCategories.Count(BreadCrumbContainsCurrentCategoryId) > 0)
            {
                if (category.SubCategories.Count > 0)
                {
                    <ul class="sublist">
                        @foreach (var subCategory in category.SubCategories)
                        {
                            @RenderCategoryLine(subCategory)
                        }
                    </ul>
                }
            }
        }
    </li>
}

My code is something like this, but there is a problem. Code is not working when selected category has no sub categories. On this situation it must do something like this:

PS: Sweatshirt has no sub categories.

- Top
   - Tshirt
   - Sweatshirt (selected)
   - Tunic

Instead it shows something like this:

- Sweatshirt (selected)

I'd hope I can explain myself. How can I solve this problem?

Hmmm...
Have you tried just using CSS to hide the other categories which were not selected?
I think you just need to define the inactive class in your stylesheet with

display: none;

so that it does not appear and only the top level list items (navigation links) with an active class appear.

Hi embryo,

I tried your suggestion, but this time all categories are gone except selected one. That's not what we want. But, thank you for your reply.

I am adding some images I'd hope that explain our situation much better.

Btw, code on first message is working and doing what we want, except last part. On the last image, you can see our problem. When there is no sub categories, code displays only selected one. However, we want to keep it original.

Hoping that I could explain the problem.

Thanks.

Nobody? :(

Hello-

I'm sorry to not respond sooner, but I have a job and a family and interests of my own.
I've never attempted this, so I'm not the right person to help. I just thought perhaps CSS would be a more elegant way to approach it..

If nobody can help, just keep trying things until you find the solution..Good luck.