Remove most of the UI on a Menu?

2 posts, 0 answers
  1. Ian
    Ian avatar
    73 posts
    Member since:
    Jun 2013

    Posted 18 Jun 2013 Link to this post

    Before I dig too deep into it, I'd like to know if the following is possible on a menu.

    I have a static background I must use, then on top of it I need a flat 1 level hierarchical menu that looks like this:

    Canada  England Brazil
    Toronto Halifax Vancouver Calgary Montreal

    As the use clicks or hovers over a country, the cities appear below and can be selected.

    1) Can all the UI elements (borders, shading etc) be removed (I have a background I must use)
    2) Can the menu go horizontal as per example above?

  2. Iliana Nikolova
    Iliana Nikolova avatar
    2622 posts

    Posted 20 Jun 2013 Link to this post

    Hello Ian,

    You could customize appearance of any particular Kendo UI widget using custom CSS and the widget's specific class. For example the following code snippet can be used to remove the Menu widget borders: 
    .k-menu .k-group.k-popup{
        border: none;

    In order to achieve requirement 2 you could set display: inline-block to the .k-menu .k-group .k-item elements. I.e.: 
    .k-menu .k-group .k-item{
        display: inline-block;
    More detailed information about customizing the appearance in Kendo UI is available in the corresponding documentation. Also, it is recommended to use some browser inspector to check what HTML output and CSS rules are applied in a given situation.

    Iliana Nikolova
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top