Making menu responsive...

7 posts, 1 answers
  1. Rene
    Rene avatar
    65 posts
    Member since:
    Nov 2010

    Posted 24 Oct 2013 Link to this post

    I have a menu where I wanted to make the text labels hidden and only have the top menu item choices show the image when the screen / client area is a smaller size and found it actually pretty easy to do:

    <style type="text/css">
    @@media only screen and (max-width: 920px){
        #RootMenu .menuItemText { display:none; visibility: hidden;}                 
     }
    </style>

    and for the menu:

     @(Html.Kendo().Menu()        
                    .Name("RootMenu")
                    .HtmlAttributes( new {style="white-space:nowrap;overflow:hidden;max-height:38px;"} )
                    .HighlightPath(false)
                    .Orientation(MenuOrientation.Horizontal)
                    .Items(items => {
                      
                        items.Add().Text("<span class='menuItemText'>Home</span>").Action("Index", "Home").ImageUrl("~/Images/home-white-24.png").Encoded(false);
                     })
            
     )

    The key is to wrap the menu item text in span with a classname and making sure .Encoded(false) is set.

    From there the media query will do the rest.

    Have it working quite nicely at http://www.renepilon.com

  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 25 Oct 2013 Link to this post

    Hello Rene,

    Thank you for your contribution. Yes indeed, using CSS media queries is a good way to achieve a responsive layout. By the way, setting display:none makes using visibility:hidden unnecessary.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Mark
    Mark avatar
    5 posts
    Member since:
    Oct 2013

    Posted 14 May 2014 in reply to Rene Link to this post

    Hi Rene,
    You site looks good, but the menu doesn't work on my Nokia Lumia 1020.  It changes to the bars image/font on the left side, but nothing happens when I try to click it.  That is using IE.  I didn't try with another browser.

    Regards,
    Mark
  5. Rene
    Rene avatar
    65 posts
    Member since:
    Nov 2010

    Posted 14 May 2014 in reply to Mark Link to this post

    Hi Mark,

    thanks for the feedback. 

    The "3 bar" menu at top left is not a Kendo menu, it's actually from the following:

    http://tympanus.net/Tutorials/AnimatedBorderMenus/index2.html

    Thanks again,

    Rene.
  6. Rene
    Rene avatar
    65 posts
    Member since:
    Nov 2010

    Posted 14 May 2014 in reply to Rene Link to this post

    I do use:

    <meta http-equiv="X-UA-Compatible" content=IE=edge,chrome=1">

    I wonder if it's related to that?

    If you get a chance - do the menus as per the link above work on your Lumia with IE?

    Thanks agian.

    Rene.
  7. Rene
    Rene avatar
    65 posts
    Member since:
    Nov 2010

    Posted 14 May 2014 in reply to Rene Link to this post

    Btw, the menu is somewhat of an "illusion"... when the menu opens up - what is actually showing up is them making the left border wide (ie 200px) with a list on the border.  It's pretty cool.
  8. Answer
    Mark
    Mark avatar
    5 posts
    Member since:
    Oct 2013

    Posted 15 May 2014 in reply to Rene Link to this post

    Hi Rene,
    I had a look at the animated menu link on my desktop and it works fine.  I loaded it on my Lumina and it doesn't work.

    For your website, only the 3 bars and the word Build is visible and a wallpaper, nothing else loads.

    Your site looks great by the way.

    Regards,
    Mark
Back to Top
UI for ASP.NET MVC is VS 2017 Ready