Side stalk Navigation - HiLight active

[matg (Mat Griffin)]

We are using a side stalk style navigation as below:

•  


When one of the pages listed in the UL is current we want it to be hi-lighted (different colour) and then when the page the LI is current we want this to be hi-lighted in addition to the UL so the user gets a clear indication as to which section and page then page they are viewing.

Is there something missing in the code to do this, as I cant see how Matrx can add the relevant piece of code to the Active UL and LI (again this works very well in classic!)

[Avi_Miller]

Is there something missing in the code to do this, as I cant see how Matrx can add the relevant piece of code to the Active UL and LI (again this works very well in classic!)

Yes, you need to tell Matrix how to highlight the current option:

[codebox]<MySource_AREA id_name="left_menu" design_area="menu_normal">
<MySource_SET name="level" value="sub" />
<MySource_SET name="show_subs" value="on_current" />
<MySource_SET name="settings.class.current" value="current" />
<MySource_SET name="settings.class.normal" value="normal" />
<MySource_SET name="settings.class.hierarchy" value="hierarchy" />
<ul>
<MySource_ASSET>
<li>
<a href="<MySource_PRINT var='asset_link'/>" >
<strong><MySource_PRINT var="asset_name"/></strong>
</a>
</li>
<MySource_SUB design_area="menu_normal">
<ul>
<MySource_ASSET>
<li [b]class="<mysource_print var="settings.class" />"[/b]>
<a href="<MySource_PRINT var='asset_link' />"><MySource_PRINT var="asset_short_name" /></a>
</a>
</li>
</MySource_ASSET>
</ul>
</MySource_SUB>
</MySource_ASSET>
</Mysource_AREA>[/codebox]

This tells Matrix to print <li class="normal"> for normal (non-selected) items, <li class="current"> for the current page and <li class="hierarchy"> for parent pages of the current page. This allows you to highlight not just the current page, but the path to get to the current page as well.

[matg (Mat Griffin)]

Fantastic Avi, I thought there must be something missing!

[Avi_Miller]

Fantastic Avi, I thought there must be something missing!

No worries. Keep in mind that you can also do this for submenus as well. You can also create multiple sets, for example:

<MySource_SET name="settings.class.current" value="current" />
<MySource_SET name="settings.class.normal" value="normal" />
<MySource_SET name="settings.class.hierarchy" value="hierarchy" />
<MySource_SET name="settings.style.current" value="highlight" />
<MySource_SET name="settings.style.normal" value="" />
<MySource_SET name="settings.style.hierarchy" value="" />

Then use <MySource_PRINT var="settings.class" /> and <MySource_PRINT var="settings.style" />. Also note that settings.style will only print a value for the current item. The other two are blank, so it won't output anything for normal/hierarchy items.

[rayholdford (Holdfordr)]

Hi Avi
I have added the code into the design and I am seeing empty class tags being assigned, please see below code.

Could you explain how matrix determins what class to assign to the item (is it on the user click?), in the below code Taxis should be assigned a 'current' class and the rest 'normal'





<ul>

<li class="">

<a href="http://matrix.cambridgeantibody.com/i_need_to/book_it/taxis">Taxis</a>

</a>

</li>

<li class="">

<a href="http://matrix.cambridgeantibody.com/i_need_to/book_it/hotels">(( Hotels ))</a>

</a>

</li>

<li class="">

<a href="http://matrix.cambridgeantibody.com/i_need_to/book_it/meeting_rooms">Meeting Rooms</a>

</a>

</li>

</ul>

[Avi_Miller]

I have added the code into the design and I am seeing empty class tags being assigned, please see below code.

I would need to see your parsefile and a small site map to determine why the class is empty. Essentially, Matrix paints "current" for the currently displayed assets (if it is in the menu), "hierarchy" for assets that are in the lineage of the currently painting asset and "normal" for everything else.

[ncaldwell]

I'd like to be able to assign a class to the current item only – without "class normal", etc, on the other list items – which me as being somewhat more concise and elegant. Is there any way of achieving that?

[ncaldwell]

Hmm… reading the thread again, would "<MySource_PRINT var="settings.style" />" do what I need?

[Avi_Miller]

I'd like to be able to assign a class to the current item only – without "class normal", etc, on the other list items – which me as being somewhat more concise and elegant. Is there any way of achieving that?

Do this:

And then, it'll only print "current" for the current item and for anything else, print nothing.

[ncaldwell]

Ah, thanks. But there's no way around needing something like <li class="<MySource_PRINT var='settings.class" />"> is there? So you'd still have an empty class on each list item in the menu. Yeah, I know, I'm hugely fussy about markup generation.

[Avi_Miller]

Ah, thanks. But there's no way around needing something like <li class="<MySource_PRINT var='settings.class" />"> is there? So you'd still have an empty class on each list item in the menu. Yeah, I know, I'm hugely fussy about markup generation.

Do this:

And then use:

    <li >

It'll print the entire class="current" for you.

[ncaldwell]

That's very cool. I hadn't realised you could set arbitrary strings like that. Thanks.

[Avi_Miller]

That's very cool. I hadn't realised you could set arbitrary strings like that. Thanks.

Yup, you can send anything you like. And you can have multiple groups too. :)