Navigation Menu With Highlight Parent and Child Category When Active

digihub

Can someone show me how to create a navigation menu with highlight parent and child category when active or current. What I am trying to achieve is something like http://www.bbc.co.uk/news when you click on "UK" the parent keeps being highlighted. When you click on "England" the child keeps being highlighted. I have tried to modify plugins like Categories2Menu, Category Headings 0.1.3b and CategoriesDropdown 1.2 but failed. Thank you.

hgtonight

What you want to do is use categories as your navigation?

You could probably put the logic in Javascript, although the default categories module isn't a hierarchical list.

I would definitely go the plugin route. You could do something like the menu module currently does. It highlights the current route by default. I would read through /applications/dashboard/modules/class.menumodule.php as well as the pertinent documentation on plugins. You would need to modify it based on the category model to highlight all it's ancestors as well.

digihub

Thanks @hgtonight. I will try.

businessdad

@hgtonight I implemented a hierarchical menu for a client which uses a mix of dropdown and accordion elements (see this forum for an example), and I would not recommend doing everything via JavaScript. The reason is that, with JS disabled, the menu would not appear at all.

The approach I used was to render the menu in the backed, creating nested list elements, then add CSS to transform into a semi-dynamic dropdown menu. Last step was to add the JS to implement extra features, such as the accordion and auto resize. The result is a nice menu with JS, and a "spartan", but usable menu without JS.

hgtonight

@businessdad I was just suggesting doing the highlight in JS.

businessdad

@hgtonight said:
businessdad I was just suggesting doing the highlight in JS.

Oh, I see! Sorry about that. Anyway, the highlight could also be done without JS (although, obviously, it would require a page reload).

digihub

@businessdad Can you make it and show me?

businessdad

@digihub said:
businessdad Can you make it and show me?

I would not have the time to develop the whole plugin, it's not something that can be put together in a couple of minutes. I would suggest to separate the work in smaller parts:

Step 1 - The Dropline Menu (i.e. like bbc.co.uk)

To develop this part, look at one of the many tutorials about CSS menus. It's not too difficult, and you can use the CSS styles provided with the examples as a starting point.

Tip for quick prototyping: to populate the menu, use static <ul> lists and apply the styles to them. This will allow you to immediately see how the menu will look like.

Step 2 - Generate the menu dynamically

When your styles are looking nice, implement the PHP code that will output the real <ul> list with the categories, instead of the static one.

Step 3 - Add salt, pepper and JS

Add any nice feature that requires JavaScript on top of what you have. Doing it for last will help you not getting crazy if something doesn't work as you expect, as you won't have to jump between CSS, PHP and JS to find the culprit.

digihub

Thanks @businessdad