Perhaps I've missed something, but it seems like panelNavigation2
could use a couple more CSS class hooks and/or behavior customizations.
For example, I'd like to have a menu that looks something like this:
Link 1
Link 2
* Sub Link 1
* Sub Link 2
* Sub Link 3
Link 3
Link 4
...
* If I click on "Link 1" I want it to be highlighted and its page to
be displayed.
* If I click on Link 2 I want it to be highlighted, its page to be
displayed and the submenu to appear.
* If I click on Sub Link 2 I want Link 2 to remain highlighted, Sub
Link 2 to become highlighted (with a bit different style than "Link
2"), and Sub Link 2's page to be displayed.
* If I click on Link 2 again, I want it to remain highlighted, its
page to be displayed, Sub Link 2 to be unhighlighted, and the
submenu to *not* fold up. I only want the submenu to fold up if I
click on another menu heading.
Right now I'm using the following tag:
<t:panelNavigation2 id="nav1" layout="list"
activeItemClass="leftMenuActive"
openItemClass="leftSubMenu">
<t:navigationMenuItems id="navitems" value="$
{navigationMenu.items}" />
</t:panelNavigation2>
and it works like this:
* If I click on Liink 1 it is highlighted and its page is displayed.
* If I click on Link 2 the submenu opens up, its style class changes
to "leftSubMenu", its page is displayed, but Link 1 is still
highlighted and I can't define a class to highlight Link 2 correctly
(not yet anyway).
* If I click on Sub Link 2 it gets highlighted, Link 1's highlight
is turned off, Sub Link 2's page is displayed, etc.
* If I click on Link 2 again, the submenu folds up and Link 2's page
is displayed.
It'd be nice if I could code the tag like this:
<t:panelNavigation2 id="nav1" layout="list" itemClass="leftMenu"
activeItemClass="leftMenuActive" subItemClass="leftSubMenu"
activeSubItemClass="leftSubMenuActive">
<t:navigationMenuItems id="navitems" value="$
{navigationMenu.items}" />
</t:panelNavigation2>
Now, if I click on Link 1 I'll see this:
Link 1 - class="leftMenuActive"
Link 2 - class="leftMenu"
Link 3 - class="leftMenu"
Link 4 - class="leftMenu"
If I click on Link 2 I'll see this:
Link 1 - class="leftMenu"
Link 2 - class="leftMenuActive"
* Sub Link 1 - class="leftSubMenu"
* Sub Link 2 - class="leftSubMenu"
* Sub Link 3 - class="leftSubMenu"
Link 3 - class="leftMenu"
Link 4 - class="leftMenu"
Then if I click on Sub Link 2 I'll see this:
Link 1 - class="leftMenu"
Link 2 - class="leftMenuActive"
* Sub Link 1 - class="leftSubMenu"
* Sub Link 2 - class="leftSubMenuActive"
* Sub Link 3 - class="leftSubMenu"
Link 3 - class="leftMenu"
Link 4 - class="leftMenu"
Right now, to accomplish something like this I have to have style
definitions that look like so:
#leftMenu ul li ul li {
....
}
and
#leftMenu ul li ul li.leftMenuActive A.leftMenuActive:link {
....
}
and I haven't been able to create a style definition that will really
highlight my menu items the way I want it to. Mostly this is because
the submenu code will look like this:
<li class="openItemClass" ... ><a class="openItemClass" ...>Link 2</
a><ul>
<li class="openItemClass" ...><a class="openItemClass" ...>Sub Link
1</a></li>
<li class="openItemClass" ...><a class="openItemClass" ...>Sub Link
2</a></li>
<li class="openItemClass" ...><a class="openItemClass" ...>Sub Link
3</a></li>
</ul></li>
... so "Link 2" has the same class as "Sub Link 1". If I try to set
a style for "Link 2" using CSS hacks like "#leftMenu ul
li.openItemClass" it actually encompasses the whole submenu and I
haven't found a way to set the CSS properties to hide this. I'd like
the generated HTML to look like this:
<li class="activeItemClass" ... ><a class="activeItemClass" ...>Link
2</a></li>
<li class="openItemClass" ...><a class="openItemClass" ...>Sub Link
1</a></li>
<li class="activeOpenItemClass" ...><a
class="activeOpenItemClass" ...>Sub Link 2</a></li>
<li class="openItemClass" ...><a class="openItemClass" ...>Sub Link
3</a></li>
That way I can just set an extra left margin or padding for
"openItemClass" to get it to indent.
So maybe to keep things from getting overly cluttered we could add
"unNestedList" to the valid layout attribute values. This would keep
the tag from generating the nested <ul> tags. Or maybe we could add
a behaviorMode attribute with a few possible values. Or maybe it's
as simple as providing a different renderer class?
Have I missed some capabilities with the existing tag or have I
stumbled across some enhancement opportunities?
Thanks,
Greg
