Animations in EJ 1 ASP.NET MVC NavigationDrawer
23 Aug 2017 / 1 minute to read
You can set the transition type of the Navigation Drawer by using type property. The possible transition types are slide and overlay.
- Slide - both navigation panel and content page slides towards left/right direction to view the navigation panel items.
- Overlay - Only the navigation panel slides over the content page to view the navigation panel items. That is, part of the content page is hidden under navigation panel.
NOTE
Transition slide type works only with fixed position.
The default value is Overlay.
@{
@Html.EJ().Button("drawerTarget").Text("Open Drawer")
@Html.EJ().NavigationDrawer("navigationPane").Width(300).Type(NavigationDrawerType.Slide).TargetId("drawerTarget").Position(NavigationDrawerPosition.Fixed).ContentTemplate(@<div>
@Html.EJ().ListView("list").Width(300).Items(items =>
{
items.Add().Text("Home");
items.Add().Text("Profile");
items.Add().Text("Photos");
items.Add().Text("Location");
})
</div>)
}
<style>
#drawerTarget
{
top: 200px;
left: 600px;
position: absolute;
}
</style>
<script>
$("#drawerTarget").click(function () {
$("#navigationPane").ejNavigationDrawer("open");
});
</script>
The following screenshot illustrates the output.
Was this page helpful?
Yes
No
Thank you for your feedback!
Thank you for your feedback and comments. We will rectify this as soon as possible!
An unknown error has occurred. Please try again.
Help us improve this page