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

How to change back color of Kendo UI Menu

4 Answers 910 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Glen
Top achievements
Rank 1
Glen asked on 10 Mar 2014, 11:27 AM
I simply want to change the background color of Kendo UI Menu.
Also I want to control the color of each item in the Menu bar.
How can I make it possible? Please help me.

4 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 12 Mar 2014, 08:14 AM
Hi Glen,

Please review the following example.

http://jsfiddle.net/dimodi/sgW6a/

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Joel
Top achievements
Rank 2
Iron
Iron
Iron
answered on 24 Jan 2019, 07:31 PM
Link no longer exists.  Please post your example here.
0
Dimo
Telerik team
answered on 25 Jan 2019, 08:38 AM
Hello Joel,

Here is a snippet, which shows how to modify the styling of the following Kendo UI Menu elements:

- background of the widget
- background and color of an item
- background of an item's hovered state


<style>
 
#computerMenu {background: yellow;}
#computerMenu .menu-file > .k-link { background: green; color: red; }
#computerMenu .menu-file.k-state-hover > .k-link { background: lightblue; }
 
</style>
 
<div id="example">
 
  <ul id="computerMenu">
    <li class="menu-file">File</li>
    <li>
      Edit
      <ul>
        <li>
          Go To
          <ul>
            <li>Go To All</li>
            <li>Go To File</li>
          </ul>
        </li>
        <li>
          Find and Replace
          <ul>
            <li>Quick Find</li>
            <li>Quick Replace</li>
          </ul>
        </li>
        <li>
          Undo
        </li>
        <li>
          Redo
        </li>
      </ul>
    </li>
  </ul>
 
  <script>
    $(document).ready(function() {
      $("#computerMenu").kendoMenu();
    });
  </script>
</div>


Regards,
Dimo
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.
0
Joel
Top achievements
Rank 2
Iron
Iron
Iron
answered on 25 Jan 2019, 05:03 PM
Thanks, I'll take a look.
Tags
Menu
Asked by
Glen
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Joel
Top achievements
Rank 2
Iron
Iron
Iron
Share this question
or