Menu Styling

10 posts, 1 answers
  1. oakcool
    oakcool avatar
    5 posts
    Member since:
    Oct 2009

    Posted 10 Feb 2012 Link to this post

    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?
  2. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 10 Feb 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Alec
    Alec avatar
    24 posts
    Member since:
    Jun 2009

    Posted 10 Feb 2012 Link to this post

    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.
  5. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 13 Feb 2012 Link to this post

    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!
  6. Gabriel
    Gabriel avatar
    79 posts
    Member since:
    Nov 2011

    Posted 14 Feb 2012 Link to this post

    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
  7. Alec
    Alec avatar
    24 posts
    Member since:
    Jun 2009

    Posted 15 Feb 2012 Link to this post

    Thank you Dimo.
  8. oakcool
    oakcool avatar
    5 posts
    Member since:
    Oct 2009

    Posted 17 Feb 2012 Link to this post

    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;
    }

  9. Answer
    Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 17 Feb 2012 Link to this post

    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!
  10. CHI-CHUNG
    CHI-CHUNG avatar
    4 posts
    Member since:
    Sep 2012

    Posted 12 Sep 2012 Link to this post

    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;
    }
  11. CHI-CHUNG
    CHI-CHUNG avatar
    4 posts
    Member since:
    Sep 2012

    Posted 12 Sep 2012 Link to this post

    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
Back to Top
Kendo UI is VS 2017 Ready