Hello again :P
So using bootstrap, I can have a navbar that when the screen is small enough, will change into a button. How can I do that?
Example: Attachment 25294 is actually Attachment 25295
Printable View
Hello again :P
So using bootstrap, I can have a navbar that when the screen is small enough, will change into a button. How can I do that?
Example: Attachment 25294 is actually Attachment 25295
Hello @cslocus!
Although this is still in the "responsive" subject, the problem is relatively different here. So I moved your post to a new thread so it becomes focused on your specific inquire.
And for the feature you want, the closest I can think of it would be with Tab Panels, like illustrated in this example:
- Tab Panel > Basic > Advanced Tabs MVC example
But this is hardly a navigation bar. For this task, we have the Breadcrumb component. While it does not collapse into an icon, when space is not enough, the breadcrumb becomes scrollable. To see this aspect of the breadcrumb, just get the example below, transform theext:Panel
into anext:Window
and then open the example and resize the window to make it too narrow to fit the breadcrumb:
- Toolbar > Breadcrumb > Overview
You can see further documentation on the component in Sencha documentation page for Ext.toolbar.Breadcrumb.
Hope this helps!
Oh well :(
I'll try and work something out, but thank you anyway! I'll certainly use the breadcrumb elsewhere.
Please close the thread.
Okay, closing.
One idea would be, building a button with menu (7th sample in this example) instead of the breadcrumb when width is too narrow, and using the breadcrumb component when width is enough.
It would be just a matter of dynamically adding the component on load (given the rendered width of the component containing the nav bar -- be it the viewport, a window, panel or a grid); and also monitor the resize event. It could work pretty well, but you'd have to rely more on client-side events and coding (javascript) for best performance rebuilding or deciding which component to draw.
Hope this helps!