Forums (Obsolete)

Old Forums

Design and CSS styles

Version 5.x > Design and CSS styles > add specific class to css list menu link item

View modes:

Member

neecom - 7/12/2010 8:11:01 AM

add specific class to css list menu link item

Hi, I'm using cmslistmenu and I'd like to add a specific class (or ID) to a single menu item; kentico (with "Render CSS classes" checked in "css list menu" web part properties) displays something like this in html:

<ul id="menuElem" class="CMSListMenuUL">
 <li class="CMSListMenuHighlightedLIFirst">
  <a title="Home" class="CMSListMenuLinkHighlighted" href="/Home.aspx">Home</a></li>
  etc.

instead I need that the class generated in the link is something more specific, this way i can add single background image for every link, something like this:

<ul id="menuElem" class="CMSListMenuUL">
 <li class="CMSListMenuHighlightedLIFirst">
  <a title="Home" class="homeLink" href="/Home.aspx">Home</a></li>
  etc.

I also tried writing a specific class in page properties>Menu design>"Menu item CSS class", but the class is shown only in the breadcrumbs.

Thanks and sorry for my english

Kentico Developer

kentico_ondrejv - 7/22/2010 1:47:21 AM

RE:add specific class to css list menu link item

Hello,

I tested adding custom CSS class via CMS Desk -> Content -> document -> Properties -> Menu -> Menu item CSS class and it works just fine. Even if I have set RenderCSS classes, particular custom class is being added to the <li> element and you can refer to it with no problem.

On the other hand, you can use alternative approach of parsing RenderedHTML property and amending the HTML code it generates. This is discussed in following forum thread: http://devnet.kentico.com/Forums.aspx?forumid=36&threadid=7311.

Best regards
Ondrej Vasil

Member

neecom - 7/22/2010 4:51:24 AM

RE:add specific class to css list menu link item

Hi,
thanks very much for your help. I tested the first option and it works fine; maybe before I didn't notice that the class was added to the <li> element. I also added a specific class to "Menu item design - highlighted".
I only noticed that it adds the same class to the breadcrumbs element also (<span>), but this is easily managed via css.

Best Regards
Nico Mattei

Top