Need tips/suggestions: sliding side bar like Google/Facebook apps

[Jonathan M]

We'd like to implement a side bar that slides in from the left like in recent Google and Facebook apps. We're very familiar with HTML, CSS, and JavaScript, and have worked extensively with jQuery Mobile, but we are pretty new to Kendo UI Mobile.

Does anyone have any suggestions for what would be a good way to start implementing something like this in the Kendo world? Is there anything that comes out of the box that could help us, or do we need to do it totally custom?

Thanks for any advice you can give!

Jonathan

[Petyo]

Hi Jonathan,

Currently, Kendo UI Mobile does not offer such widget. As this application pattern gets more popular, we may introduce something like that in our future releases. 

If you decide to implement this by yourself, the swipe events utility we provide would be of help. 

All the best,
Petyo
the Telerik team

[Antonio]

Has anyone actually implemented this please? I have a similar requirement to do this. Should I even consider Kendo UI for this?

[Antonio]

OK. So this is how I did it just in case anyone would be interested:

Basically the home page is within the main DIV that I called "mainmenu". I know that's a bad name. I should have named it mainbody or something. This main body is the one that slides to the left to reveal the main Menu.

The main menu is on another DIV called topmenu.

Enjoy...

<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
       
    <script type="text/javascript">


        $(function () {
            var app = new kendo.mobile.Application(document.body, { platform: "ios" });


            $("#btnmenu").click(function () {
                $("#mainmenu").kendoAnimate({ effects: "slide:left", complete: function (element) {
                    $('#webpage-overlay').height($('#mainmenu').height());
                    $("#webpage-overlay").show();
                }
                }).css("padding-left", "25px");
            });


            $('#webpage-overlay').click(function () {
                $("#mainmenu").kendoAnimate({ effects: "slideIn:right", complete: function (element) {
                    $("#webpage-overlay").hide();
                }
                }).css("padding-left", "0px");
            });
        });

    </script>

   <!--****************************************************************************************************
            Main content DIV
   ****************************************************************************************************-->
   <div data-role="view" id="mainmenu">    
    
        <header data-role="header">
            <!--****************************************************************************************************
                    HEADER SECTION
            ****************************************************************************************************-->
            <div data-role="navbar">
                <div id="pageheader">
                    <div>
                        <a href="/"><img src="/images/menuicon.png" class="menuicon"  style="float:left;margin-top:0px;margin-left:15px;border:0; padding-top:0px;" alt="" /></a>
                        <input type="image" href="#" data-transition="slide" data-align="right" data-icon="Menu" id="btnmenu" src="/images/menu_button.png" class="menubutton" style="padding-top:3px; margin-right:0px;"  /><!--<img src="/images/menu_button.png" class="menubutton"  id="btnmenu" alt="" />-->
                    </div>             
                </div>    
            </div>
        </header>    
        <section>

:
:
:

 </div>
   <!--****************************************************************************************************
            END: Main content DIV
   ****************************************************************************************************-->



   <!--****************************************************************************************************
            THIS IS THE RIGHT SLIDE MAIN MEANU
    ****************************************************************************************************-->
    <div id="topmenu">
        <!-- RIGHT MENU -->
        <div  id="menugright" style="float:right;width:100%;z-index:-999;">
            <img src="/images/header_menu.png" class="headermenu" />
            <div class="rightmenu" id="menuright_main">
                <!--***** HOME *****-->
                <a href="/">Some link 1</a>
                <!--***** PRODUCTS *****-->
                <a href="/products/">Some link to Products</a>
                <!--***** EXPERTS & EDUCATION *****-->
                <a href="/EducationAndExperts/Default.aspx">Some lins</a>                                
            </div> 
        </div>      
        <!-- END: RIGHT MENU -->
    </div>
    <!--****************************************************************************************************
            END:    THIS IS THE RIGHT SLIDE MAIN MEANU
    ****************************************************************************************************-->

    <!-- overlay for hot back button-->
    <div  style="display:none;border:0 none;top: 0;left: 0; position:absolute; width:25px;z-index:9999;cursor:pointer;" id="webpage-overlay">
    </div>

[IQ Business]

@Antonio
Hi there, I have tried to use your technique but it does not seem to work for me. I understand the click event is added onto a button
(or what ever you want clicked) and once you click on it it should move the "mainmenu" div out of the way.
This does not happen for me. if i target the click event to move any other id then it does work. It seems like the <section> is fixed some how.

My code below (adapted from yours)

Thank you
<!---------------------------------------------------------------------------------------------------------------------------------->
<body>
<div data-role="view" id="mainmenu">  
 
<section id="mobileContainer" data-role="layout" data-id="default">
</section>
</div>

    <div id="topmenu">
        <!-- RIGHT MENU -->
        <div  id="menugright" style="float:right;width:100%;z-index:-999;">
            <img src="/images/header_menu.png" class="headermenu" />
            <div class="rightmenu" id="menuright_main">
                <!--***** HOME *****-->
                <a href="/">Some link 1</a>
                <!--***** PRODUCTS *****-->
                <a href="/products/">Some link to Products</a>
                <!--***** EXPERTS & EDUCATION *****-->
                <a href="/EducationAndExperts/Default.aspx">Some lins</a>                                
            </div>
        </div>      
        <!-- END: RIGHT MENU -->
    </div>
 <!-- overlay for hot back button-->
    <div  style="display:none;border:0 none;top: 0;left: 0; position:absolute; width:25px;z-index:9999;cursor:pointer;" id="webpage-overlay">
    </div>

<script type="text/javascript">

var app = new kendo.mobile.Application(document.body, {
    transition : "slide"/* , platform:"android" */
});
$(document).ready(function(e) {
    app.navigate('modules/login/login/login.html');
});
</script> 
</body>

[Petyo]

Hi,

This thread is over an year old. Meanwhile we released the drawer widget, which provides a superset of the features described below. 

Regards,
Petyo
Telerik