search

gfranko / jquery.tocify.js

A jQuery Table of Contents plugin that can be themed with Twitter Bootstrap or jQueryUI.
http://gregfranko.com/jquery.tocify.js/
MIT License
927 stars 217 forks source link

Responsive menu #48

Open tmkinn opened 10 years ago

tmkinn commented 10 years ago

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 commented 10 years ago

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>

gfranko commented 10 years ago

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