How to Build a Toggle-able Icon Sidebar like WordPress Dashboard

[megancarroll]

I am trying to build a sidebar navigation like the one used in the WordPress admin dashboard. I like the option to collapse the sidebar but still see the icons. I’m using Zurb Foundation and jQuery. I finally have a solution that I think might work, but it’s doing some funny things. The <li>s are all different widths, until I collapse and reopen the menu for the first time. Then they all stay the same size. So here are my questions:

1. How can I make the lis be the same size on the first load?
2. How can I make the main content resize and push over when the sidebar opens (instead of getting pushed down, which is what is currently happening)?
3. I want the sidebar to appear open on the first page load (with icons and titles), but then if the user toggles it closed (to just the icon view), it should stay closed as they navigate the site. How do I do that?

Here’s a jsFiddle with my code.

If anyone has any ideas on how to adjust my code or other ideas on how to achieve this sort of menu with Foundation, I would gladly welcome them. I’ve been researching this for a few weeks, and I haven’t been able to find anything very helpful. I’m completely stuck. I feel like I’ve seen these kinds of menus around, but there don’t seem to be any tutorials or articles on them. Any help would be much appreciated.

[Paulie_D]

Here’s a simplified fiddle with your first question answered…you were overcomplicating things

http://jsfiddle.net/2vweLpnf/9/

As for your other questions I’m sure a google for offscreen menus will find you some good example.

Oh…look! :)

https://www.google.co.uk/webhp?sourceid=chrome-instant&ion=1&espv=2&es_th=1&ie=UTF-8#q=jquery%20off%20screen%20menu

[megancarroll]

Thanks for trying, but neither of those things are helpful. Your fiddle only collapses the titles and not the entire menu. I don’t see how that’s an improvement over the fiddle I posted.

And please don’t patronize me by posting a link to a Google search. I know how to Google. I’ve been Googling for days. I’ve already looked at many of the links that came up in your search and none of them are exactly what I’m looking for. Posting on a forum for help is something I do last resort, after having exhausted Google, and there is simply nothing more frustrating than someone presuming to answer a question by directing me back to Google.

Thank you for trying to help, though. If you have any other ideas, I would love to hear them.

[verythorough]

I just stumbled on this while looking for something else. I’m sure you figured things out or decided to do something else, but in case anyone else comes here and would like to use your fiddle, the reason the links are varied widths in the beginning is because <span> elements are inline by default, and therefore can’t have widths. If you add display: inline-block to the span rule, they’ll respect your width setting on the initial load.

As for why the widths are fine after the first collapse, it looks like jquery is actually applying the same display property to the span when it does the animation. (Check the inspector while clicking the collapse button, and you’ll see it get added.) I imagine they do this to inline elements to avoid the exact issue you were having.

[Author]

Posts