use own menu button

[toneffectory]

I added a bit of code to be able to use my own menu button. Might be worth adding as parameter?

I added a settings parameter called menuButton which defaults to ''. Next added this (from line 83 onwards):

        if (settings.menuButton === '') {
            $this.btn = $(
                ['<' + settings.parentTag + ' aria-haspopup="true" tabindex="0" class="' + prefix + '_btn ' + prefix + '_collapsed">',
                    '<span class="' + prefix + '_menutxt">' + settings.label + '</span>',
                    '<span class="' + iconClass + '">',
                    '<span class="' + prefix + '_icon-bar"></span>',
                    '<span class="' + prefix + '_icon-bar"></span>',
                    '<span class="' + prefix + '_icon-bar"></span>',
                    '</span>',
                    '</' + settings.parentTag + '>'
                ].join('')
            );
        }
        else {
            $this.btn = $(settings.menuButton);
        }

Obviously this would require the user to add an element that will be used as menubutton: <a id="menuButton" class="slicknav_btn slicknav_collapsed" tabindex="0" aria-haspopup="true" href="#" style="outline: medium none;">click here</a>

The new menu button is finally attached to slicknav by:

$('#menu').slicknav({
        menuButton: '#menuButton'
});

[pawelmil]

It's a good idea

[chadpriddle]

I think i'm trying to accomplish the same thing. I want to create a simple <a href="#" onclick="slicknav('toggle');">Menu</a> some where else on the page to toggle the menu button. I can't figure it out.

[ribo3]

I am also interested in this. Tried to do use the toggle method from a link or button like chadpriddle with no luck. I also tried toneffectory's solution and was not able to get that to work either. +1 this issue for me. Thanks

[ceramicheights]

Fantastic! @toneffectory Thanks for the script. @chadpriddle I don't think you need the "onclick" for your link. But I did add menuButton: '' to the default settings.

[kanjigirl]

This is great - thank you! It's very rare to get a good working example in the first search result...

[baroche]

I cannot thank @toneffectory enough for this code. I had exhausted every avenue trying to adapt his excellent tool to my site design. My implementation called for the scroll down menu to descend from behind a uniquely non rectangular shaped banner that contained my logo. I needed a trigger on a different layer than the slicknav offered. I knew I needed script to achieve the desired effect, but without any knowledge of Javascript, I was dead in the water. I stumbled on this immensely helpful code and it worked perfectly! @toneffectory you are AWESOME!

[commwork]

Doesn't this (toneffectory) work anymore? Did it now this way but it's quick+dirty:

jQuery(document).ready(function($){ $("#menuButton").click(function() { $(".slicknav_nav").slideToggle(); }); });

[0711master]

Thank you, this is exactly what I was searching for! Because if you disable this line $(menuBar).append($this.btn); you can place the button somewhere else. This is especially important when the button has to be in the same row as other buttons or a logo and you want to avoid floating.