how can I just show the hamburger button

8 posts, 0 answers
  1. moegal
    moegal avatar
    273 posts
    Member since:
    Jul 2007

    Posted 02 Apr 2015 Link to this post

    When I have a device that is small enough to  show the hamburger part, how can I only show the hamburger button.  I want to put some text to the left of the button where is now only dead space.

    Marty
  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 06 Apr 2015 Link to this post

    Hello,

    The hamburger button is displayed automatically on mobile device or if the screen is narrower than 720 pixels. If you would like to move all items to the "hamburger" button, you can also make it by the internal method moveAllNodesInMenuButton(). A custom text which is not an item can be added for this moment by an additional custom JavaScript.

    Regards,
    Magdalena
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. moegal
    moegal avatar
    273 posts
    Member since:
    Jul 2007

    Posted 23 Apr 2015 in reply to Magdalena Link to this post

    i have tried several combinations of moveAllNodesInMenuButton I cannot get RadNavigation to do anything differently.

     Also, not sure what you mean by custom javascript for adding text.  Do you mean doing something like jquery before or append and just add it myself?

  5. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 24 Apr 2015 Link to this post

    Hi,

    The solution $find("RadNavigation1").moveAllNodesInMenuButton() will hide all nodes so only hamburger button will be visible. If you do not want to display gradient background that expand to the entire width, you can use RadMenu control in the Mobile or Auto render mode.

    Regarding to adding the text, I mean to add it by an additional JavaScript and yes - the "append()" method by jQuery is one of the possible approaches.

    Regards,
    Magdalena
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  6. moegal
    moegal avatar
    273 posts
    Member since:
    Jul 2007

    Posted 24 Apr 2015 in reply to Magdalena Link to this post

    That makes sense. I was looking for a server side setting. 

    Is there a server property I can set?

    Also, is there a onResize event I can watch on the client side?

    Thanks, Marty

     

    I am using the following at the moment in testing:

    function pageLoad() {
               $(".rnvRootGroupWrapper").resize(function (e) {
                   if ($(".rnvRootGroup ").children().length == 0) {
                       if ($(".cool").length == 0) {
                           $(".rnvRootGroupWrapper").append('<div class="cool">Test</div>');
                       }
                   } else {
                       $(".cool").remove();
                   }
               });
           }

    I have had to add a jquery resize plugin that I would rather not have to load as well.

  7. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 27 Apr 2015 Link to this post

    Hello Marty,

    Hiding root items in the sandwich is implemented only on client side so it cannot be achieved on server side. There is no client side event for re-sizing (you can find all client side event of the RadNavigation in our online documentation) so it is necessary to use your custom logic.

    Regards,
    Magdalena
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  8. moegal
    moegal avatar
    273 posts
    Member since:
    Jul 2007

    Posted 14 May 2015 Link to this post

    here is what I ended up with to add icons and/or text to the empty space beside the hamburger button. It is dependent on jquery and  jquery.resize.js

    Marty

    function pageLoad() {
        $ = $telerik.$;
        function updateMenu() {
            $(".navCTitle").remove();
            if ($(".rnvRootGroup ").children().length == 0) {
                if ($(".navCTitle").length == 0) {
                    var str = '';
                    str += '<div class="navCTitle">';
                    str += '<a href="/"><span class="fa fa-home fa-2x"></span></a>';
                    str += '<a href="/contact"><span class="fa fa-envelope-o fa-2x"></span></a>';
                    str += '</div>';
                    $(".rnvRootGroupWrapper").append(str);
                }
            }
        }
        $(".rnvRootGroupWrapper").resize(function (e) {
            setTimeout(updateMenu, 100);
        });
        if (typeof contentPageLoad == 'function')
            contentPageLoad();
    };

     

  9. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 14 May 2015 Link to this post

    Hi Marty,

    We are glad that you were able to achieve the expected behavior. Thank you for sharing the solution with the community.


    Regards,
    Magdalena
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017