or
<!DOCTYPE html><html><head> <title>Basic usage</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" > <script src="../../../js/jquery.min.js"></script> <script src="../../../js/kendo.all.min.js"></script> <link href="../../../styles/kendo.common.min.css" rel="stylesheet" /> <link href="../../../styles/kendo.rtl.min.css" rel="stylesheet"> <link href="../../../styles/kendo.default.min.css" rel="stylesheet"> <script src="../../content/shared/js/console.js"></script> <link href="../../../styles/kendo.mobile.all.min.css" rel="stylesheet" /> <style> [href*=index], #back-button { visibility: hidden; } </style></head><body> <div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="Inbox"> <ul data-role="listview" class="inboxList"> <li> <h3 class="time">07:56</h3><h3>John Doe</h3> <h2>Monday meeting</h2> <p>Hi Tom, Since Monday I'll be out of office, I'm rescheduling the meeting for Tuesday.</p> </li> <li> <h3 class="time">08:21</h3><h3>Joe Harper</h3> <h2>I'm sorry, Tom</h2> <p>Hi Tom, my aunt comes for a visit this Saturday, so I can't come back to St. Pete...</p> </li> <li> <h3 class="time">08:33</h3><h3>Sarah Connor</h3> <h2>Regarding org chart changes</h2> <p>Tom, I checked the new org chart last night and I have some reservations about it...</p> </li> <li> <h3 class="time">08:40</h3><h3>John Doe</h3> <h2>Re: Regarding org chart changes</h2> <p>Agree with Sarah...</p> </li> <li> <h3 class="time">09:16</h3><h3>Jane Parker</h3> <h2>Your Costume is ready</h2> <p>Hi mr. Sawyer, I'm sorry for the delay, your Halloween costume is ready. The bears...</p> </li> <li> <h3 class="time">11:03</h3><h3>Becky Thatcher</h3> <h2>Out tonight?</h2> <p>Honey, wanna go out tonight to grab some chicken? My weekly vouchers for cooking...</p> </li> </ul></div><div data-role="view" id="drawer-starred" data-layout="drawer-layout" data-title="Starred Items"> <ul data-role="listview"> <li data-icon="star">Monday meeting</li> <li data-icon="star">Regarding org chart changes</li> <li data-icon="star">Re: Regarding org chart changes</li> <li data-icon="star">Your Costume is ready</li> <li data-icon="star">Out tonight?</li> </ul></div><div data-role="view" id="drawer-drafts" data-layout="drawer-layout" data-title="Drafts"> <ul data-role="listview"> <li data-icon="compose">Re: Monday meeting</li> <li data-icon="compose">Untitled message 1</li> <li data-icon="compose">Untitled message 2</li> <li data-icon="compose">Re: Regarding org chart changes</li> <li data-icon="compose">Re: Re: Regarding org chart changes</li> <li data-icon="compose">Re: Your Costume is ready</li> <li data-icon="compose">Re: Out tonight?</li> <li data-icon="compose">Untitled message 3</li> </ul></div><div data-role="view" id="drawer-sent" data-layout="drawer-layout" data-title="Sent Items"> <ul data-role="listview"> <li>Build enterprise apps</li> <li>Fw: Regarding Multiline textbox</li> <li>Away next week</li> <li>Fw: Your Costume is ready</li> <li>Update completed</li> <li>Survey</li> <li>Problem with this account</li> <li>Advice For Designers</li> <li>Fw: Missing Book</li> <li>Fun & useful reading</li> </ul></div><div data-role="view" id="drawer-deleted" data-layout="drawer-layout" data-title="Deleted Items"> <ul data-role="listview"> <li data-icon="trash">Untitled message 4</li> <li data-icon="trash">Untitled message 5</li> </ul></div><div data-role="view" id="drawer-spam" data-layout="drawer-layout" data-title="Spam"> <ul data-role="listview"> <li>90% Discount!</li> <li>90% Discount!</li> <li>One time offer!</li> </ul> <a data-role="button" style="background-color: darkred; display: block; margin: 2em; font-size: 1.4em;">Delete Spam</a></div><div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['drawer-home', 'drawer-starred', 'drawer-deleted', 'drawer-spam', 'drawer-drafts', 'drawer-sent', '@Url.Content("~/mobile/m/drawer/index.html")']"> <ul data-role="listview" data-type="group"> <li>Mailbox <ul> <li data-icon="inbox"><a href="#drawer-home" data-transition="none">Inbox</a></li> <li data-icon="star"><a href="#drawer-starred" data-transition="none">Starred Items</a></li> <li data-icon="compose"><a href="#drawer-drafts" data-transition="none">Drafts</a></li> <li data-icon="sent"><a href="#drawer-sent" data-transition="none">Sent Items</a></li> <li data-icon="trash"><a href="#drawer-deleted" data-transition="none">Deleted Items</a></li> <li data-icon="spam"><a href="#drawer-spam" data-transition="none">Spam</a></li> </ul> </li> <li>Tasks <ul> <li>To Do</li> <li>In Progress</li> <li>Done</li> <li>High Priority</li> <li>Low Priority</li> </ul> </li> <li>Account <ul> <li data-icon="settings">Settings</li> <li data-icon="off">Log Out</li> </ul> </li> </ul></div><div data-role="layout" data-id="drawer-layout"> <header data-role="header"> <div data-role="navbar"> <a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a> <span data-role="view-title"></span> <a data-align="right" data-role="button" class="nav-button" href="#/">Index</a> </div> </header> <footer data-role="footer"> <div data-role="tabstrip"> <a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a> </div> </footer></div><script> // reset global drawer instance, for demo purposes kendo.mobile.ui.Drawer.current = null;</script><style> .km-ios #my-drawer .km-content, .km-android #my-drawer .km-content, .km-blackberry #my-drawer .km-content, .km-ios #my-drawer .km-list > li, .km-android #my-drawer .km-list > li, .km-blackberry #my-drawer .km-list > li, .km-ios #my-drawer .km-listview-link > .km-icon, .km-android #my-drawer .km-listview-link > .km-icon, .km-blackberry #my-drawer .km-listview-link > .km-icon, .km-ios #my-drawer .km-list li > .km-icon, .km-android #my-drawer .km-list li > .km-icon, .km-blackberry #my-drawer .km-list li > .km-icon { background-color: #4e4e4e; color: #fff; } .km-ios #my-drawer .km-group-title, .km-blackberry #my-drawer .km-group-title { background-color: #6e6e6e; color: #fff; } .km-drawer-button:before, .km-drawer-button:after { content: "\E077"; } .km-inbox:before, .km-inbox:after { content: "\E0B0"; } .km-sent:before, .km-sent:after { content: "\E0C6"; } .km-trash:before, .km-trash:after { content: "\E0C3"; } .km-spam:before, .km-spam:after { content: "\E0C5"; } .km-star:before, .km-star:after { content: "\E0D7"; } .km-settings:before, .km-settings:after { content: "\E0DA"; } .km-off:before, .km-off:after { content: "\E0B9"; } .inboxList { font-size: .8em; } .inboxList p, .inboxList h2, .inboxList h3 { margin: 5px 2px; } .inboxList p, .inboxList h3 { color: #777; } .inboxList h3.time { color: #369; float: left; margin-right: 10px; }</style> <script> window.kendoMobileApplication = new kendo.mobile.Application(document.body); </script></body></html><script src="~/scripts/jquery.min.js"></script> <script src="~/scripts/kendo.web.min.js"></script><script src="~/scripts/modernizr.custom.76706.js"></script><script src="~/scripts/Base.js"></script><link rel="shortcut icon" href="~/css/imgs/Altex-favicon.ico" > <link href="~/css/Themes/kendo.common.min.css" rel="stylesheet" /><link href="~/css/Themes/kendo.silver.min.css" rel="stylesheet" /><link href="~/css/Main.css" rel="stylesheet" /> <table class="TableMenu"> <tr> <td rowspan="2" class="TdLogo"><a href="/"><img alt="Altex" width="200" src="/css/imgs/Logo_Altex.jpg" /></a></td> <td class="NavG"><ul id="NavG" class="menu"> <li> <a class="MenuSelected" href="/home.aspx">Home</a> </li> <li> <a class="" href="/about-altex.aspx">About Us</a> <ul> <li> <a href="/about-altex.aspx">About Altex</a> </li> <li> <a href="/about-altex/why-us.aspx">Why Us</a> </li> <li> <a href="/about-altex/child-safety.aspx">Child Safety</a> </li> <li> <a href="/about-altex/environmental-responsibility.aspx">Environmental Responsibility</a> </li> </ul> </li> <li> <a class="" href="/your-needs.aspx">Our Fabrics</a> <ul> <li> <a href="/your-needs.aspx">Your Needs</a> </li> <li> <a href="/your-needs/ambio®.aspx">Ambio®</a> </li> <li> <a href="/your-needs/transparent.aspx">Transparent</a> </li> <li> <a href="/your-needs/translucent.aspx">Translucent</a> </li> <li> <a href="/your-needs/opaque.aspx">Opaque</a> </li> </ul> </li> <li> <a class="" href="/our-products.aspx">Our Products</a> <ul> <li> <a href="/our-products.aspx">Our Products</a> </li> <li> <a href="/our-products/roller-shade.aspx">Roller Shade</a> </li> <li> <a href="/our-products/aleo™.aspx">Aleo™</a> </li> <li> <a href="/our-products/panel-track.aspx">Panel Track</a> </li> <li> <a href="/our-products/roman-shade.aspx">Roman Shade</a> </li> <li> <a href="/our-products/inclinable-roman-shade.aspx">Inclinable Roman Shade</a> </li> <li> <a href="/our-products/ready-to-install-shade.aspx">Ready-to-install Shade</a> </li> <li> <a href="/our-products/fixed-multiform-shade.aspx">Fixed Multiform Shade</a> </li> </ul> </li> <li> <a class="" href="/warranty.aspx">Support</a> <ul> <li> <a href="/warranty.aspx">Warranty</a> </li> <li> <a href="/warranty/faq.aspx">FAQ</a> </li> <li> <a href="/warranty/security.aspx">Security</a> </li> </ul> </li> <li> <a class="" href="/contact-us.aspx">Contact Us</a> </li></ul></td> </tr> <tr> <td><ul class="NavC-Hidden"></ul></td> </tr> </table>$('#NavG').kendoMenu();