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

Making menu responsive...

6 Answers 417 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Rene
Top achievements
Rank 1
Rene asked on 24 Oct 2013, 05:33 PM
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

6 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 25 Oct 2013, 12:44 PM
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!
0
Mark
Top achievements
Rank 1
answered on 15 May 2014, 03:44 AM
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
0
Rene
Top achievements
Rank 1
answered on 15 May 2014, 04:40 AM
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.
0
Rene
Top achievements
Rank 1
answered on 15 May 2014, 04:43 AM
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.
0
Rene
Top achievements
Rank 1
answered on 15 May 2014, 04:45 AM
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.
0
Accepted
Mark
Top achievements
Rank 1
answered on 15 May 2014, 05:24 AM
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
Tags
Menu
Asked by
Rene
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Mark
Top achievements
Rank 1
Rene
Top achievements
Rank 1
Share this question
or