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

Menu Colors

1 Answer 45 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Joel asked on 24 Jan 2019, 07:58 PM

How do I change the background color and the hover color of my Html.Kendo().Menu()?

<div id="responsive-panel">
    @(Html.Kendo().Menu()
          .Orientation(MenuOrientation.Vertical)
          .Name("Menu")
          .Items(items =>
          {
              items.Add().Text("Profile").Url("./Manage"); // else "/Index?handler=redirect"
              items.Add().Text("Password").Url("Manage/ChangePassword");
              items.Add().Text("Two-factor authentication").Url("Manage/TwoFactorAuthentication");
              items.Add().Text("Personal data").Url("Manage/PersonalData");
          })
          )
</div>

 

1 Answer, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 29 Jan 2019, 09:40 AM
Hello Joel,

You can achieve this requirement with CSS rules:
<style>
  /* default state */
  .k-menu .k-item{
    background-color: lightblue;       
  }
  /* hovered state */
  .k-menu .k-item .k-state-hover{
    background-color: lime;
  }
  /* parent state */
  .k-menu .k-item .k-state-border-right{
    background-color: white;
    color: black;
  }
</style>

Here is a live dojo sample:
https://dojo.telerik.com/unEMOMug/5

I hope this will prove helpful. If you prefer, I can also prepare an MVC sample and send it to you.

Regards,
Eyup
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Menu
Asked by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Eyup
Telerik team
Share this question
or