ResponsivePanel Overview
The Kendo UI ResponsivePanel widget allows you to hide part of a page content on small screens. This allows more space for content on mobile screens.
Important
CSS3 media queries are supported in Internet Explorer 9 and later versions.
Configuration
Specify Width and Placement
Specify the page width when the content becomes hidden via the breakpoint configuration option. The placement of the expandable content can be configured via the orientation option.
The example below demonstrates how to collapse the menu on the left of small screens.
Example
<header>
<!-- toggle icon, .k-rpanel-toggle hides it on page width > breakpoint -->
<button class="k-rpanel-toggle"><i class="k-icon k-i-menu"></i></button>
<h1>Site header</h1>
</header>
<!-- responsive panel -->
<nav id="sidebar">
<a href="#">Home</a>
<a href="#">About</a>
</nav>
<article id="content">
<p>Lorem ipsum<p>
</article>
<script>
$("#sidebar")
.kendoResponsivePanel({
breakpoint: 768,
orientation: "left"
})
.on("click", "a", function(e) {
// handle clicks of dummy items, actual links do not need this
alert($(e.target).text() + " clicked");
$("#sidebar").kendoResponsivePanel("close");
});
</script>
<style>
#sidebar {
/* panel background should be set to match design */
background: #092646;
}
article {
/* clear the floating sidebar */
overflow: hidden;
}
html, body {
margin: 0;
padding: 0;
}
body {
font-family: Arial,sans-serif;
}
header {
padding: 1em;
color: #fff;
background-image: linear-gradient(to top, #014F80 0%, #092646 100%);
}
h1 { display: inline; }
p { padding: 2em; }
nav a {
border: 1px solid #ccc;
background: #ddd;
display: block;
text-decoration: none;
padding: .5em;
}
</style>
See Also
Other articles on Kendo UI ResponsivePanel:
