Menu icon Foundation
Toggle Sidebar Menu for Admin Interface

Hi all. I'm trying to build a simple admin interface with a toggling sidebar menu (like the one in the Wordpress dashboard - see attached screenshots). Basically, the first time the user goes to the site, I want the sidebar open with icons and titles displayed. Then, I want them to be able to click a button to collapse the menu to just icons. The menu should stay collapsed as they navigate through the site. Or, if they choose to reopen it, it should stay open. The main content should resize accordingly. Does anyone know how to achieve something like this?

I started building something with Foundation's icon bar, but it's not working quite right. I got the titles to open and close, but the main content gets bumped down the page when the titles are open. And the menu doesn't stay open across pages. And for some reason, the backgrounds of the titles are uneven until the menu is opened and closed once. Here's a jsFiddle with that code: http://jsfiddle.net/regularmegs/2vweLpnf/

I've seen several templates on Envato that have the functionality I'm looking for, but they're all built on Bootstrap. I've been working with Foundation for about 5 months, and I really like it. So I'd love to find a Foundation solution, if possible. Anyone have any ideas?

Wordpress open

Wordpress closed

sidebaroff canvasicon bartogglewordpressiconsjavascriptjquery

Hi all. I'm trying to build a simple admin interface with a toggling sidebar menu (like the one in the Wordpress dashboard - see attached screenshots). Basically, the first time the user goes to the site, I want the sidebar open with icons and titles displayed. Then, I want them to be able to click a button to collapse the menu to just icons. The menu should stay collapsed as they navigate through the site. Or, if they choose to reopen it, it should stay open. The main content should resize accordingly. Does anyone know how to achieve something like this?

I started building something with Foundation's icon bar, but it's not working quite right. I got the titles to open and close, but the main content gets bumped down the page when the titles are open. And the menu doesn't stay open across pages. And for some reason, the backgrounds of the titles are uneven until the menu is opened and closed once. Here's a jsFiddle with that code: http://jsfiddle.net/regularmegs/2vweLpnf/

I've seen several templates on Envato that have the functionality I'm looking for, but they're all built on Bootstrap. I've been working with Foundation for about 5 months, and I really like it. So I'd love to find a Foundation solution, if possible. Anyone have any ideas?

Wordpress open

Wordpress closed
Megan Carroll about 5 years ago

I'm still looking for help with this, if anyone has any ideas. I feel like I've searched to the end of the Internet and come up blank.

Alexander Chekspir about 5 years ago

Hello Megan, i've looking for the same thing for few days!.. Actually i found your post looking for that answer. Apparently it can't be done in Foundation.

I was wondering, could you find any solution to this??? I found some but using anothers frameworks, like these:
http://startbootstrap.com/template-overviews/simple-sidebar/
and http://purecss.io/layouts/side-menu/

I would like to do it with Foundation.

Thanks in advance!

Thomas K. almost 5 years ago

Hello you two,

I search the same. I'm working on a admin tool. I think we can make a "fixed" sidebar outside of foundation. it is a pity that it no ready solution exists, but it seems not so difficult to do it on your own.

This sample is easy. I will try it.
http://codepen.io/abdots/pen/zxloI

Thomas

Thomas K. almost 5 years ago

Here is my actualy solution.
On small screens i will insert a off-canvas menu. (show-for-small-only) But I think a Admin-Tool makes no sense on small screens

HTML-code:

<body>

    <!-- Header content "top-bar" ... -->

        <div class="icon-bar vertical side_fixed hide-for-small-only">
          <a class="item">
            <label>Menuitem 1</label>
          </a>
          <a class="item">
            <label>Menuitem 2</label>
          </a>
          <a class="item">
            <label>Menuitem 3</label>
          </a>
        </div>

        <div class="admin_content">

        <!-- Main-Content   "row" "column" ... -->
        <!-- footer -->

        </div>
    <!-- scripts -->
</body>

SCSS-Code:

@media #{$medium-up} {
  .side_fixed {
    left: 0;
    top: $topbar-height;
    bottom: 0;
    position: fixed;
    width: 8rem;
    max-width: 8rem;
    overflow-x: hidden;
  }
  .admin_content {
    margin-left: 9rem;
  }
}