This is a migrated thread and some comments may be shown as answers.

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

5 Answers 94 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Jonathan M
Top achievements
Rank 1
Jonathan M asked on 23 Oct 2012, 12:16 AM
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

5 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 26 Oct 2012, 06:57 AM
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!
0
Antonio
Top achievements
Rank 1
answered on 29 Oct 2012, 02:42 PM
Has anyone actually implemented this please? I have a similar requirement to do this. Should I even consider Kendo UI for this?
0
Antonio
Top achievements
Rank 1
answered on 07 Nov 2012, 07:52 AM
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>



0
IQ Business
Top achievements
Rank 1
answered on 21 Nov 2013, 02:14 PM
@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>
0
Petyo
Telerik team
answered on 22 Nov 2013, 11:57 AM
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!
Tags
General Discussions
Asked by
Jonathan M
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Antonio
Top achievements
Rank 1
IQ Business
Top achievements
Rank 1
Share this question
or