Menu Styling

[oakcool]

I need to style the menu to fit int the bar I have which currently has a height of 43 pixels, so the menu should not be bigger then that, and sub menus should follow that as well. Also the text seem to stay in place when I attempt to override k-menu and k-item, the cause the whole thing to nonaligned.

What css classes do I have to override the height so I don't have that problem anymore?

[Dimo]

Hi Mateus,

The Menu is normally a lot smaller. You seem to be using custom styles that make it large. Please inspect the HTML output with Firebug and see what causes the problem.

Kind regards,
Dimo
the Telerik team

[Alec]

Dimo,
What styles are used to style the menu? I looked in the common and default css files and found most of them, but it would be helpful to have some sort of quick and dirty styling guide. While I fixed most of the issues I was having, I still need to address the following:

• Main menu item mouse over background and foreground color
• Sub menu background color (main color of the sub menu container
• Sub menu item mouseover background and foreground colors

Any help you can provide would be greatly appreciated.

[Dimo]

Hi Alec,

The Menu does not use its own specific styles. Instead, it uses CSS classes (and hence styles) that are common for all MVC extensions. The CSS classes that you are interested in are:

.k-state-hover - for the hover state. It is applied on the element, which also has the t-link CSS class (<span> or <a>)

.k-menu .k-state-hover:hover
{
       /* your background and color styles here */
}

.k-group - for the sub menu group

.k-menu  .k-group
{
         /*    ..........     */
}

Greetings,
Dimo
the Telerik team

[Gabriel]

Dimo, I don't suppose you could whip up a jsFiddle? I've tried changing the styling as you've said below but the heading background colour for when the mouse leaves the control does not change.

Also, I having trouble applying the styles. The only ones that work for me are:

ul.k-menu .k-state-hover

[Alec]

Thank you Dimo.

[oakcool]

I believe I have fixed it, but I don't like what I had to do.
On the css below I have the solution.
A few pointers:
The problem would start as soon as I made the menu higher, setting the height to 40px, would cause everything to be of balance, also the hover states, would go crazy since it adds a certain amount of pixels to the original height (maybe is padding? ). To solve, all I had to do is work the heights of inner elements to be smaller, in this case I found 30px to be ideal. I have also set to a fixed amount some of the padding.

nav,#mainnav {    
	height: 40px;
}
 
#mainnav .k-menu {
	border: 0;	
	background-color: transparent;
	font-weight: bold;
	text-decoration: none; 	
}
 
#mainnav .k-menu .k-item
{
	border-color: #666666;
	height: 40px;
	background-image: url('./themes/base/images/barbackground.png');
	background-repeat: repeat-x;
}
 
#mainnav .k-menu .k-item .k-state-hover:hover
{
	height: 30px;
}
 
#mainnav .k-menu .k-item .k-state-border-down
{
	height: 30px;
}
 
#mainnav .k-menu .k-link
{
	padding: 10px 20px 2px 20px;
	text-decoration: none;
	height: 40px;
	background-image: url('./themes/base/images/barbackground.png');
	background-repeat: repeat-x;
}
 
#mainnav .k-menu .k-link .k-state-hover:hover
{
	height: 30px;
}
 
#mainnav .k-menu .k-link .k-state-border-down
{
	height: 30px;
}

[Dimo]

Hi Mateus,

Actually, a simpler way to increase the Menu height is to increase the line-height of the menu items' inner elements:

ul.k-menu .k-link
{

}

And then modify the icons' positioning by either setting their vertical align property to "middle" (it is "top" by default) or setting some top margin.

Regards,
Dimo
the Telerik team

[CHI-CHUNG]

Hi Guys,

I used below css style.
works fine for IE & Chrome.

But FireFox cannot display collect background-image.

Can anyone helps me?

Thanks.

#topmenu .k-menu {
	border: 0;	
	background-color: transparent;
	font-weight: bold;
	text-decoration: none;
    background-image: url('../Content/images/divBg_bg.jpg');
	background-repeat: repeat-x;
    color: White;
}

[CHI-CHUNG]

Please help to look at my simple code as below. Thank you.

<style>
       ul.k-menu {
    border: 0;
    background-color: transparent;
    font-weight: bold;
    text-decoration: none;
       background-image: url('divBg_bg.jpg');
    background-repeat: repeat-x;
       color: White;
  }</style>

<div id="example" class="k-content">
<ul id="treeview">
<li data-expanded="true">Item 1
<ul>
<li>Item 1.1</li>
<li>Item 1.2</li>
<li>Item 1.3</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Item 2.1</li>
<li>Item 2.2</li>
<li>Item 2.3</li>
</ul>
</li>
<li>Item 3</li>
</ul>


<script>
$(document).ready(function() {
$("#treeview").kendoMenu();
});
</script>
</div>


Works fine: IE & Chrome.

Not work: Firefox v15.0.1

[William]

I have a related question. Is there some way to just turn OFF ALL the built in styling so I can build my own style? out of the box there are background colors, borders, hover background colors, etc.. how to just disable all of that and start with a basic list of empty menu style sheet classes?

[Dimo]

@William - I assume you are aware of our ThemeBuilder and doesn't meet your requirements in this case. So the other option is:

-- If you are using a LESS-based theme, then you can remove the theme stylesheet from the app and leave just the common stylesheet. Then, create your own theme stylesheet from scratch or from an existing CSS file. Frankly speaking, this will be a big task.

-- If you are using a SASS-based theme, it combines the "common" styles (sizing and layout) with the "theme" styles (colors). In this case, you will need to modify the theme source and build the theme yourself. The linked documentation provides guidance how to do that. Also check the Wiki of the kendo-themes repo.

One last thing to mention is that our components reuse CSS classes, so it's impossible to easily turn off styling for a single component (in case this is what you intended to do).