New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Mini mode

  • Weather Forecast in Europe

 

17ºC

Rainy weather in Paris.

 

29ºC

Sunny weather in Madrid.

 

21ºC

Sunny weather in Rome.

 

16ºC

Cloudy weather in Berlin.

The RadDrawer offers a mini mode. With the mini mode enabled the RadDrawer changes its width instead of closing. Most commonly used to maintain quick selection available on the side at all times, leaving just the icons.
In this demo the RadDrawer can be opened either by clicking on the hamburger icon or using swipe gesture on the associated content.
  • DefaultVB.aspx
  • scripts.js
  • styles.css
<%@ Page Language="vb" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
    <script src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-narrow" runat="server">
        <telerik:RadToolBar runat="server" ID="RadToolBar1" OnClientButtonClicked="OnClientButtonClicked">
            <Items>
                <telerik:RadToolBarButton Value="toggle" CssClass="k-i-menu k-icon">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton>
                    <ItemTemplate>
                        <h3 class="toolbar-title">Weather Forecast in Europe</h3>
                    </ItemTemplate>
                </telerik:RadToolBarButton>
            </Items>
        </telerik:RadToolBar>
        <telerik:RadDrawer runat="server" ID="RadDrawer1" CssClass="RadDrawer1CssSelector" Mode="push" 
            Position="left" MinHeight="300" DrawerWidth="200" Mini="false" ShowBorders="true">
            <ClientEvents OnItemClick="OnItemClick" />
            <ContentTemplate>
                <div id="Paris">
                    <span class="rainy">&nbsp;</span>
                    <div class="weather">
                        <h2>17<span>&ordm;C</span></h2>
                        <p>Rainy weather in Paris.</p>
                    </div>
                </div>
                <div class="hide">
                    <span class="sunny">&nbsp;</span>
                    <div class="weather">
                        <h2>29<span>&ordm;C</span></h2>
                        <p>Sunny weather in Madrid.</p>
                    </div>
                </div>
                <div class="hide">
                    <span class="sunny">&nbsp;</span>
                    <div class="weather">
                        <h2>21<span>&ordm;C</span></h2>
                        <p>Sunny weather in Rome.</p>
                    </div>
                </div>
                <div class="hide">
                    <span class="cloudy">&nbsp;</span>
                    <div class="weather">
                        <h2>16<span>&ordm;C</span></h2>
                        <p>Cloudy weather in Berlin.</p>
                    </div>
                </div>
            </ContentTemplate>
            <MiniSettings Width="50" />
            <ItemsTemplate>
                 <div>
                    <span data-role="drawer-item" class="k-drawer-item k-state-selected"><span class='k-icon flag france-flag'></span><span class='k-item-text'>France</span></span>
                    <span data-role="drawer-item" class="k-drawer-item"><span class='k-icon flag spain-flag'></span><span class='k-item-text'>Spain</span></span>
                    <span data-role="drawer-item" class="k-drawer-item"><span class='k-icon flag italy-flag'></span><span class='k-item-text'>Italy</span></span>
                    <span data-role="drawer-item" class="k-drawer-item"><span class='k-icon flag germany-flag'></span><span class='k-item-text'>Germany</span></span>
                </div>
            </ItemsTemplate>
        </telerik:RadDrawer>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance