+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / Changing the Css property of the menu item which is clicked

Changing the Css property of the menu item which is clicked

5 posts, 0 answered
  1. eraashishgupta
    eraashishgupta avatar
    50 posts
    Registered:
    26 Nov 2008
    16 Dec 2008
    Link to this post
    Hi i want to change the css class or directly the background-color property of the parent menu item ie menu item at level 0 whenever either menu item at level 0 is clicked or menu item at any other level is clicked.
    i.e i want the parent menu item at level 0 to indicate that either it is clicked or its some child is clicked by changing the background-color  or background-image or the whole css class or the specific menu item at level 0 only.
    For ex if i have Home,AboutUs,Products as menuitems at level0 and under AboutUs is submenuitem called OurCompany and inside Our Company is further a submenu item Values.
    So in my situation if my users clicks Values the values pages should open and on that page my AboutUs menu item at level 0 should only have a different background color from rest of the menu items thus telling that either AboutUs or its child is currently being read or selected.
    Same is the case if user clicks Our Company which is direct child of AboutUs menu item.

    Thanks for help!!!!!!!!!!


  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    19 Dec 2008
    Link to this post
    Hi,

    You can try using the following code in the SiteMenu.ascx

    <style type="text/css"
    .selectedItem 
    background-colorgreen
    </style>  

    This will set the style for the top-level item even some of the items are clicked.
     
    All the best,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. eraashishgupta
    eraashishgupta avatar
    50 posts
    Registered:
    26 Nov 2008
    19 Dec 2008
    Link to this post
    Thanks
    But what to do if i dont want it for only the first item in the main menu i.e suppose my first item is Home so i dont want to change the background-color for home menu item for rest of them selectedItem css works fine.
    I tried it withing the RadMenu1_ItemDataBound with
    if(e.Item.Text=="Home")
    {
        e.Item.CssClass="homeMenuItem"
    }
    /*CSS File Entry*/
    .homeMenuItem
    {
        background-color:#055841 !important;
    }
    but still no luck
    Looking to hear from you soon
    Thanks for help

  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    20 Dec 2008
    Link to this post
    Hi eraashishgupta,

    The code below will not apply the css class for "Home" page. You need to alter the if loop in SiteMenu code behind.

     RadMenuItem item = this.RadMenu1.FindItemByUrl(this.ResolveUrl(currentNode.Url)); 
                if (item != null && item.Text != "Home"
                { 
                    // here you can set the style for the top-level item    
                    item.CssClass = this.selectedItemCssClass; 
                } 

    I hope this helps.

    Regards,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. eraashishgupta
    eraashishgupta avatar
    50 posts
    Registered:
    26 Nov 2008
    01 Jan 2009
    Link to this post
    i have already tried this but it doesnot make any change when we are clicking the Home menu item although its not entering this loop but its retaining the value for CSSClass to be selectedItemCssClass
    but if i provide some else tag having the CSS class as rmItem then this works
    and this is how i fixed this bug

    RadMenuItem item = this.RadMenu1.FindItemByUrl(this.ResolveUrl(currentNode.Url));
                if ((item != null) && (item.Text != "Home"))
                {
                    // here you can set the style for the top-level item   
                    item.CssClass = this.selectedItemCssClass;
                }
                else
                    if(item!=null)
                    item.CssClass = this.CssClass + "rmItem";

    Hope it helps
    Thanks for your help and support
    Aashish Gupta
    Rampgroup India
    www.rampgroup.com

    My Blog:- http://smallworkarounds.blogspot.com
Register for webinar
5 posts, 0 answered