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

Menu Styling

9 Answers 1249 Views
Menu
This is a migrated thread and some comments may be shown as answers.
oakcool
Top achievements
Rank 2
oakcool asked on 10 Feb 2012, 08:44 AM
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?

9 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 10 Feb 2012, 09:49 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Alec
Top achievements
Rank 1
answered on 10 Feb 2012, 03:42 PM
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.
0
Dimo
Telerik team
answered on 13 Feb 2012, 03:19 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Gabriel
Top achievements
Rank 1
answered on 15 Feb 2012, 03:05 AM
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
0
Alec
Top achievements
Rank 1
answered on 15 Feb 2012, 10:40 PM
Thank you Dimo.
0
oakcool
Top achievements
Rank 2
answered on 17 Feb 2012, 08:13 AM
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 {    
	height40px;
}
 
#mainnav .k-menu {
	border0;	
	background-colortransparent;
	font-weightbold;
	text-decorationnone; 	
}
 
#mainnav .k-menu .k-item
{
	border-color#666666;
	height40px;
	background-imageurl('./themes/base/images/barbackground.png');
	background-repeatrepeat-x;
}
 
#mainnav .k-menu .k-item .k-state-hover:hover
{
	height30px;
}
 
#mainnav .k-menu .k-item .k-state-border-down
{
	height30px;
}
 
#mainnav .k-menu .k-link
{
	padding10px 20px 2px 20px;
	text-decorationnone;
	height40px;
	background-imageurl('./themes/base/images/barbackground.png');
	background-repeatrepeat-x;
}
 
#mainnav .k-menu .k-link .k-state-hover:hover
{
	height30px;
}
 
#mainnav .k-menu .k-link .k-state-border-down
{
	height30px;
}

0
Accepted
Dimo
Telerik team
answered on 17 Feb 2012, 08:37 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
CHI-CHUNG
Top achievements
Rank 1
answered on 12 Sep 2012, 01:03 PM
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 {
	border0;	
	background-colortransparent;
	font-weightbold;
	text-decorationnone;
    background-imageurl('../Content/images/divBg_bg.jpg');
	background-repeatrepeat-x;
    colorWhite;
}
0
CHI-CHUNG
Top achievements
Rank 1
answered on 12 Sep 2012, 01:04 PM
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
Top achievements
Rank 1
commented on 07 Jul 2021, 06:53 PM

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
Telerik team
commented on 08 Jul 2021, 07:16 AM

@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).

Tags
Menu
Asked by
oakcool
Top achievements
Rank 2
Answers by
Dimo
Telerik team
Alec
Top achievements
Rank 1
Gabriel
Top achievements
Rank 1
oakcool
Top achievements
Rank 2
CHI-CHUNG
Top achievements
Rank 1
Share this question
or