Styling Top Level Menu Item

3 posts, 1 answers
  1. Ian
    Ian avatar
    51 posts
    Member since:
    Apr 2009

    Posted 17 Jan 2013 Link to this post

    I'm new to Kendo UI and struggling to get menus declared using "straight" HTML to work.  However I can get the menus to work if I use code like the following in an MVC view:

       @(Html.Kendo().Menu()
              .Name("Menu")
              .Items(items =>
              {
                  items.Add()
                    .Text("Menu Option 1")
                    .Items(children =>
                        {
                            children.Add().Text("Submenu 1-1")
                                    .Items(innerChildren =>
                                        {
                                            innerChildren.Add().Text("Submenu 1-1 Option 1");
                                            innerChildren.Add().Text("Submenu 1-1 Option 2");
                                            innerChildren.Add().Text("Submenu 1-1 Option 3");
                                        });

                            children.Add().Text("Submenu 1-2")
                                    .Items(innerChildren =>
                                        {
                                            innerChildren.Add().Text("Submenu 1-2 Option 1");
                                            innerChildren.Add().Text("Submenu 1-2 Option 2");
                                        });
                            children.Add().Text("Submenu 1-3")
                                    .Items(innerChildren =>
                                        {
                                            innerChildren.Add().Text("Submenu 1-3 Option 1");
                                            innerChildren.Add().Text("Submenu 1-3 Option 2");
                                        });
                        });
                  items.Add()
                    .Text("Menu Option 2")
                    .Items(children =>
                    {
                        children.Add().Text("Submenu 2-1")
                                .Items(innerChildren =>


    I'd like to individually style each top level button ("Menu Option 1" and "Menu Option 2") to have a different colour, but cannot see a way to add a CSS style tag to the individual Item (I was hoping for a property similar to "Text" called "Id" or "CssClassId").

    In the code example above how could I style "Menu Option 1" to be green, and "Menu Option 2" to be red?
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 18 Jan 2013 Link to this post

    Hi Ian,

    Menu items have a HtmlAttributes() fluent method, which allows you to add inline styles or custom CSS classes.

    items.Add().Text("Menu item").HtmlAttributes(new { @class = "myCustomClass", style = "color:red;" });

    If there is a color style defined for the Menu item's inner element, the inline style in the Menu configuration may not work, because it is applied to the parent <li> element. In such cases you should apply the item's color with a custom CSS class and a child / descendant selector.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Ian
    Ian avatar
    51 posts
    Member since:
    Apr 2009

    Posted 18 Jan 2013 Link to this post

    Thanks Dimo.

    That's exactly what I was looking for.  Can now style the button and text exactly as I'd like. Just need to work out how to do the same for the downward arrow :-)

    Ian
Back to Top