Old Forums
Search:
Portal Engine Questions on portal engine and web parts.
Version 6.x > Portal Engine > CMSListMenu active item View modes: 
User avatar
Member
Member
Rene 7 - 5/16/2012 1:20:00 AM
   
CMSListMenu active item
Dear Kentico,
I am using the CMS List Menu to display a simple menu. I would like to give a special style to the currently active item (the page that is open) but I cannot find a class or id. I would expect class="active" or class="selected".
How would I solve this problem?
Cheers

User avatar
Kentico Support
Kentico Support
kentico_radekm2 - 5/16/2012 6:51:14 AM
   
RE:CMSListMenu active item
Hello.

CSS List Menu uses CMSListMenuHighlightedLI class for this purpose. If you see source code of the page, you should see code below for currently selected page:

<li class="CMSListMenuHighlightedLI">

Does it work like this on your end?

Best Regards,
Radek Macalik

User avatar
Member
Member
Rene 7 - 5/16/2012 9:23:17 PM
   
RE:CMSListMenu active item
Hi Radek,
I clicked on "Render CSS" and I get following output (leaing out the anchors):

<ul id="menuElem" class="CMSListMenuUL">
	<li class="CMSListMenuHighlightedLI"></li>
	<li class="CMSListMenuHighlightedLI">
		<ul class="CMSListMenuUL">
			<li class="CMSListMenuHighlightedLI">
		</ul>
	</li>
</ul>

But I would like to have is following (like e.g. Joomla does it):

<ul id="menuElem">
	<li></li>
	<li class="parent highlighted">
		<ul>
			<li class="hightlighted active"></li>
			<li></li>
		</ul>
	</li>
</ul>

so I know what is the highlighted path ("highlighted"), what is the currently opened page ("active") and which item has a nested list ("parent"). With this information I can give the css styling I want.
User avatar
Member
Member
kentico_michal - 5/21/2012 2:33:23 AM
   
RE:CMSListMenu active item
Hi,

The CSS classes are generated in the source of Kentico CMS. So, to change the way Kentico CMS renders them, you would need to modify the rendered HTML code. The CMSListMenu control provides a property called RenderedHTML. It is a string varible which contains the complete HTML markup displayed by the web part. So, you can access the HTML code, parse it and change or remove CSS classes according to your requirements. The recommended place to work with the RenderedHTML property is the OnPreRender. Anyway, you might need to set the LoadDataAutomaticaly property of the CMSListMenu control to false.

Best regards,
Michal Legen

Top