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

how can I just show the hamburger button

7 Answers 100 Views
Navigation
This is a migrated thread and some comments may be shown as answers.
moegal
Top achievements
Rank 1
moegal asked on 02 Apr 2015, 05:15 PM
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

7 Answers, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 06 Apr 2015, 08:27 AM
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.

 
0
moegal
Top achievements
Rank 1
answered on 23 Apr 2015, 05:22 PM

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?

0
Magdalena
Telerik team
answered on 24 Apr 2015, 10:57 AM
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.

 
0
moegal
Top achievements
Rank 1
answered on 24 Apr 2015, 02:58 PM

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.

0
Magdalena
Telerik team
answered on 27 Apr 2015, 07:59 AM
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.

 
0
moegal
Top achievements
Rank 1
answered on 14 May 2015, 11:39 AM

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();
};

 

0
Magdalena
Telerik team
answered on 14 May 2015, 02:40 PM
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
Tags
Navigation
Asked by
moegal
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
moegal
Top achievements
Rank 1
Share this question
or