drawer demo

by grippstick

HTML

<script src="http://babackofficedev.radolo.com/Kendo/js/jquery.min.js"></script>
<script src="http://babackofficedev.radolo.com/Kendo/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.flat.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.flat.mobile.min.css">
<div id="example" class="k-content">
    <div class="demo-section">
        <div id="drawer">
             <h3>Sports</h3>
 <a href="#" data-target="baseball" class="drawer-link active">Baseball</a>
 <a href="#" data-target="golf" class="drawer-link">Golf</a>
 <a href="#" data-target="swimming" class="drawer-link">Swimming</a>
 <a href="#" data-target="snowboarding" class="drawer-link">Snowboarding</a>

        </div>
        <div id="content-container"> <a id="drawer-trigger" href="#"><span>Show drawer</span></a>

            <div id="baseball" class="inner-content">
                 <h3>Baseball</h3>

                <p>Baseball is a bat-and-ball sport played between two teams of nine players each. The aim is to score runs by hitting a thrown ball with a bat and touching a series of four bases arranged at the corners of a ninety-foot diamond. Players on the batting team take turns hitting against the pitcher of the fielding team, which tries to stop them from scoring runs by getting hitters out in any of several ways. A player on the batting team can stop at any of the bases and later advance via a teammate's hit or other means. The teams switch between batting and fielding whenever the fielding team records three outs. One turn at bat for each team constitutes an inning and nine innings make up a professional game. The team with the most runs at the end of the game wins.</p>
            </div>
            <div id="golf" class="inner-content">
                 <h3>Golf</h3>

                <p>Golf is a...

CSS

<style> #content-container {
    height: 100%;
    background-color: #fcfcfc;
    padding-top: 10px;
    border-left: 3px solid #359cf3;
}
.demo-section {
    position: relative;
    overflow: hidden;
    width: 500px;
    height: 270px;
    padding: 0;
}
#drawer-trigger {
    display: block;
    width: 36px;
    height: 36px;
    background: url('../../content/web/drawer/menu.png') no-repeat 50% 50% #359cf3;
}
#drawer .km-widget {
    background-color: #212834;
    padding: 20px;
}
#drawer h3 {
    margin: 0 0 10px;
    padding: 0 0 10px 5px;
    color: #fff;
    border-bottom: 1px solid #454545;
}
#drawer a {
    display: block;
    text-decoration: none;
    color: #68baff;
    font-weight: bold;
    font-size: 1.1em;
    padding: 0 5px;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
    border-radius: 2px;
}
#drawer a:hover, #drawer a.active:hover {
    color: #212834;
    background-color: #68baff;
}
#drawer a.active {
    color: #45719a;
}
#drawer-trigger span {
    display: none;
}
.inner-content {
    padding: 20px 36px;
    color: #000;
}
.inner-content h3 {
    margin-bottom: 5px;
}
</style>

JavaScript

$(function () {
    $("#drawer").kendoMobileDrawer({
        container: "#content-container"
    });

    $("#drawer-trigger").click(function () {
        $("#drawer").data("kendoMobileDrawer").show();
        return false;
    });

    $(".drawer-link").click(function () {
        $("#drawer").data("kendoMobileDrawer").hide();
        $(".drawer-link").removeClass("active");
        $(this).addClass("active");
        return false;
    });

    $(".drawer-link").click(function () {
        $(".inner-content").hide();
        $("#" + $(this).data("target")).show();
    });
});