This is a migrated thread and some comments may be shown as answers.

Styling Top Level Menu Item

2 Answers 206 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Ian
Top achievements
Rank 1
Ian asked on 17 Jan 2013, 01:35 PM
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 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 18 Jan 2013, 01:03 PM
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!
0
Ian
Top achievements
Rank 1
answered on 18 Jan 2013, 01:55 PM
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
Tags
Menu
Asked by
Ian
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Ian
Top achievements
Rank 1
Share this question
or