jquery.tocify.js icon indicating copy to clipboard operation
jquery.tocify.js copied to clipboard

Responsive menu

Open tmkinn opened this issue 12 years ago • 2 comments

Your plugin is very useful, but I have a suggestion for a feature.

When we make a responsive navbar, the navbar menu turns into a button on small devices, like shown in this video, for instance. http://www.youtube.com/watch?v=qpWlaOeGZ_4

It would be cool if the data-target attribute for the button could refer to the generated tocify ul navlist (and equivalent for the Bootstrap 3 version). Then we could use default Tocify menu for large screens and the button for small devices. That would be marvelous.

I guess this is a challenge, but I hope you like that!

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

tmkinn avatar Oct 16 '13 06:10 tmkinn

I did a brief testing to see if this would work. I made an additional list outside of the <div class="navbar navbar-inverse navbar-fixed-top"> element, which is used when using a collapsing menu. The button´s data-target=".navbarCollapse1", which refer to a list outside of the scope of the above element. And it worked!

If the tocify menu would look somewhat like this, we could use the class name of the list as the value of the data-target.

<div class="container"> <div class="navbar-collapse1 collapse"> <ul class="nav navbar"> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li>
</ul> </div> </div>

tmkinn avatar Oct 16 '13 14:10 tmkinn

Going to need another day or two to figure this out.

gfranko avatar Oct 22 '13 05:10 gfranko