[SOLVED] Secondary horizontal CSSMenu ?

[martin42]

I'm a CSS newbie, updating a site with a horizontal navigation menu, one level deep...

The main template builds its Nav menu like so:

Code: Select all

{menu number_of_levels="1" start_level="1" loadprops=0 template='cssmenu.tpl'}

For one area of the site, we need a second level menu. For that area, the template says:

Code: Select all

{menu number_of_levels="1" start_level="1" loadprops=0 template='cssmenu.tpl'}
<br/>
{menu number_of_levels="1" start_level="2" loadprops=0 template='cssmenu.tpl'}     

This seems to work OK: it gives a sub-menu below the first one.

But it's illegal CSS (the W3C validator fails), because you end up with duplicated DIVs and ULs:

Code: Select all

<div id="menuwrapper">
<ul id="primary-nav">
... top level menu

<div id="menuwrapper">
<ul id="primary-nav">
... second level menu

Is there a cleaner way to get a secondary horizontal menu?

My first thought was to use the {menu} tag only once (i.e. to lose the number_of_levels="1" limitation) so that drop-down menus appeared. But I would like the site to work on touch-screen devices, and it seemed difficult to get both iOS and Android to work reliably with drop-down menus.... And it's fiddly using drop-downs on a smartphone screens anyway.

Longer-term I'd like to try rebuilding the site with the new Simplex theme (included in the current CMS Made Simple default content). But in the meantime, I'd be grateful if anyone can suggest a cleaner way to get a secondary horizontal menu.

Thanks,

- Martin

[Jo Morg]

Make a copy of the template and change the id for the second level?

[martin42]

Tried that earlier - ended up with funny blobs after the menu entries, so I reverted to the previous version. But maybe I mistyped something. I can try it again tomorrow.

[martin42]

Yep - that's fixed it! Global change in 'vi' is more reliable than editing by hand

Cheers

- Martin