Forums (Obsolete)

Member

fan4u - 8/25/2011 9:37:50 PM

set CMSMenuHighlightedMenuItem css on javascript call on menu click

HI ,

we are trying to set the CMSMenuHighlightedMenuItem css class on menu click ( with out postback) by setting the document menu property to javascript command

function setmenu()
{
document.getElementById("plc_lt_zoneTopMenu_cmsmenu_menuElem-001").className = "CMSMenuHighlightedMenuItem";
}

how ever it doesnt retain on mouse over/ mouse out / mouse down / mouse up

& also do we need to manually set the already selected menu item css class to CMSMenuItem css class ?

Please help !!!

Thanks
Satish

Kentico Support

janh-kentico - 8/26/2011 7:30:15 AM

RE:set CMSMenuHighlightedMenuItem css on javascript call on menu click

In a first place please make sure, that you have set Render CSS classes and Render item ID in the CSS list menu web part to true. Now fill the OnMouseOut script property in this web part with following exact code:

" onClick="setmenu(this.id);return(false);

You also have to modify your function as you can se below:

<script type="text/javascript">
function setmenu(liid) {
     document.getElementById(liid).className = 'CMSListMenuLinkHighlighted';
}
</script>


Member	fan4u - 8/26/2011 11:27:56 PM RE:set CMSMenuHighlightedMenuItem css on javascript call on menu click HI , Thanks for the reply, but sorry i missed to mention that we are using cmsmenu , not the csslistmenu. Thanks

Kentico Support

janh-kentico - 8/29/2011 3:15:33 AM

RE:set CMSMenuHighlightedMenuItem css on javascript call on menu click

Thank you for your message.

It is not that easy for the CMSMenu web part. You would have to edit source code so please open the cmsmenu.ascx.cs file in the \CMSWebParts\Navigation\ directory and paste into it following method:

/// <summary>
/// Render override
/// </summary>
    protected override void Render(HtmlTextWriter writer)
    {
        if (this.StopProcessing)
        {
            base.Render(writer);
        }
        else
        {
            StringBuilder sb = new StringBuilder();
            Html32TextWriter mwriter = new Html32TextWriter(new System.IO.StringWriter(sb));
            base.Render(mwriter);

            // CSubmenuElem1 or CSubmenuElem - depends, how many manus you have on page
            string htmlcode = Regex.Replace(sb.ToString(), "onclick=\"CSubmenuElem1[^\"]*\"", "onclick=\"this.className = 'CMSMenuHighlightedMenuItem'; return(false);\"");                       

            writer.Write(htmlcode);
        }
}

Don't forget link appropriate libraries.

You just have replaced onclick function in this menu with your custom one.

Best regards,
Jan Hermann

Member

fan4u - 8/29/2011 3:39:44 AM

RE:set CMSMenuHighlightedMenuItem css on javascript call on menu click

Awesome.. Thanks a lot for the solution, by the way we are using the same kentico application to host multiple sites & this requirement is only for a single site .

Is there a way we can identify the application name in the render code & based on application we do this custom html rendering or not ?

Kentico Support

janh-kentico - 8/29/2011 6:20:46 AM

RE:set CMSMenuHighlightedMenuItem css on javascript call on menu click

Of course, try this:

string htmlcode = sb.ToString();

if (CMS.CMSHelper.CMSContext.CurrentSiteName == "SiteCodeName")
    htmlcode = Regex.Replace(htmlcode, "onclick=\"CSubmenuElem1[^\"]*\"", "onclick=\"this.className = 'CMSListMenuLinkHighlighted'; return(false);\"");                       

writer.Write(htmlcode);

Best regards,
Jan Hermann