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

6 posts, 0 answers
  1. Jonathan M
    Jonathan M avatar
    16 posts
    Member since:
    Sep 2012

    Posted 22 Oct 2012 Link to this post

    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
  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 26 Oct 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Antonio
    Antonio avatar
    15 posts
    Member since:
    Oct 2012

    Posted 29 Oct 2012 Link to this post

    Has anyone actually implemented this please? I have a similar requirement to do this. Should I even consider Kendo UI for this?
  5. Antonio
    Antonio avatar
    15 posts
    Member since:
    Oct 2012

    Posted 07 Nov 2012 Link to this post

    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>



  6. IQ Business
    IQ Business avatar
    5 posts
    Member since:
    Aug 2012

    Posted 21 Nov 2013 Link to this post

    @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>
  7. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 22 Nov 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready