Getting Started with the ResponsivePanel
This guide demonstrates how to get up and running with the Kendo UI for jQuery ResponsivePanel.
After the completion of this guide, you will be able to achieve the following end result:
<header>
<button class="toggle-button"><span class="k-icon k-i-menu"></span></button>
Logo
</header>
<nav id="navigation">
<a href="#">Home</a>
<a href="#">Products</a>
</nav>
<article>
Content
</article>
<script>
$("#navigation").kendoResponsivePanel({
orientation: "top",
toggleButton: ".toggle-button",
breakpoint: 700
});
</script>
1. Create an input Element
First, create an <nav> element on the page that will be used to initialize the component.
<nav id="navigation">
<a href="#">Home</a>
<a href="#">Products</a>
</nav>
2. Initialize the ResponsivePanel
In this step, you will initialize the ResponsivePanel from the <nav> element.
<nav id="navigation">
<a href="#">Home</a>
<a href="#">Products</a>
</nav>
<script>
// Target the nav element by using jQuery and then call the kendoResponsivePanel() method.
$("#navigation").kendoResponsivePanel({
orientation: "top",
toggleButton: ".toggle-button",
breakpoint: 700
});
</script>
3. Apply Basic Configurations
The ResponsivePanel provides several options that enable you to modify its behavior. The following example demonstrates how to apply a top orientation, a toggleButton, and a 700 orientation to the component.
<nav id="navigation">
<a href="#">Home</a>
<a href="#">Products</a>
</nav>
<article>
Content
</article>
<script>
$("#navigation").kendoResponsivePanel({
orientation: "top",
toggleButton: ".toggle-button",
breakpoint: 700
});
</script>