Kendo Mobile Drawer widget - Advanced

by kendomobile

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<!-- Demo created for the book: Building Mobile Applications Using Kendo UI Mobile and ASP.NET Web API.
http://www.packtpub.com/building-mobile-applications-with-kendoui-html5/book -->


<div data-role="layout" data-id="drawer-layout">
    <header data-role="header">
        <div data-role="navbar">
            <a data-role="button" data-rel="drawer"
               href="#left-drawer"  data-align="left">
                   Open Left
            </a>
            <span data-role="view-title"></span>
            <a data-role="button" data-rel="drawer"
               href="#right-drawer"  data-align="right">
                   Open Right
            </a>
        </div>
    </header>
    
</div>

<div data-role="drawer" id="left-drawer"
     data-views="['drawer-page1', 'drawer-page2', 'drawer-page3']">
    <ul data-role="listview" data-type="group">
        <li>Clickable Menu
            <ul>
                <li data-icon="favorites">
                    <a href="#drawer-page1">
                        Page 1
                    </a>
                </li>
                <li data-icon="downloads">
                    <a href="#drawer-page2"
                       >
                        Page 2</a>
                </li>
                <li data-icon="featured">
                    <a href="#drawer-page3">
                        Page 3</a>
                </li>
            </ul>
        </li>
        <li>Static Menu
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>               
            </ul>
        </li>
        </ul>
</div>

<div data-role="drawer" id="right-drawer"
     data-title="Two Way Menu"
     data-position="right" >
    <header data-role="header">
        <div data-role="navbar">
            <span...

CSS

#right-drawer > .km-ios .km-list > li {
           
            background: #000!important;
            color:#fff!important;
        }

JavaScript

var app = new kendo.mobile.Application(document.body);