ditto/reflect menu navigation

Hi.

I have a question about navigation options for ditto/reflect. I have been given a very specific visual brief on how a news room should look.
Basically I’d need to output the news room navigation like this:



I’ve tinkered with the code though cannot figure out how to reproduce this kind of menu.

Can anyone offer any pointers?

Thanks.

You can get close using just CSS and JS, however, this would be Year->Month not Month->Year like your image. If this is acceptable, I would recommend modeling it off of the MODx manager’s upper navigation as it uses the same html list structure.

If you want it to look exactly the way you describe, you’ll need a custom snippet since Reflect is designed to work Year->Month not Month->Year. The snippet would iterate through an array of months, checking in the items array if there are any entries and if so, output the corresponding years.

Hi Mark, thanks for the quick reply

With regards your first suggestion: use css/js with existing Reflect snippet.

So you think the below is attainable?



--

With regards your second suggestion: create custom snippet

My PHP coding knowledge is basic so I’m unsure how to interpret your guidance - is it in effect a re-write of the current Reflect snippet or only minor amendments?

Thanks for your help.

Yes, you could do exactly that. Remember that it will only show the months (and years) for which you have documents and not all of the months like in your screenshot.

As for your second question: It would be a re-write of Reflect.

You could do either layout with positioning in CSS, actually.