CODEWITHSUNDEEP
csszurb-foundation
user687554
user687554

Reputation: 11131

Dynamic Column Sizing in Zurb Foundation

I am using Zurb Foundation 5 to build a site. My site has a navigation panel against the left side of the screen. When open, I want the nav area to take up 3 columns. The actual content will take up the remaining space. Here is the HTML I have thus far:

<body>
  <div style="width:100%; max-width:100%; height:100%;">
    <div id="navDiv" class="large-3 columns" style="background-color:#2D2D2D;height:100%;">
      <!-- Nav Items Go Here -->
    </div>
    <div class="large-9 columns">
      <!-- Main Content Goes Here -->
    </div>
  </div>
</body>

Each nav item has an icon and some text. I need to be able to collapse the navDiv in a way that it shrinks down so that only the icons are showing. The text goes away. At the same time, I need the main content area to grow to take up the space that was used by the nav area. I cannot figure out how to do this in the realm of zurb. From what I can tell, the grid is not dynamic. Is it possible to do what I'm trying with a grid? If so, how?

THank you!

Upvotes: 0

Views: 2204

Answers (1)

Tyler Eich
Tyler Eich

Reputation: 4248

If you want to use Foundation (with jQuery dependency) and no other add-ons, you can use a jQuery event handler to toggle the classes used by Foundation. It feels like a hack, but it works.

HTML

<body>
    <button>Toggle sidebar</button>
    <div class="row">
        <div id="navDiv" class="small-2 medium-1 columns">
            <img src="http://dummyimage.com/48"><span>Item 1</span>
        </div>
        <div id="content" class="small-10 medium-11 columns">
            <!-- Content goes here -->
        </div>
    </div>
</body>

CSS

.small-2 span {
    /* Hide text when sidebar is small */
    display: none;
}

JavaScript + jQuery

$(function() {
    $('button').click(function() {
        // Resize sidebar
        var navDiv = $('#navDiv');
        navDiv.toggleClass('small-3');
        navDiv.toggleClass('small-2');
        navDiv.toggleClass('medium-2');
        navDiv.toggleClass('medium-1');

        // Resize content
        var content = $('#content');
        content.toggleClass('small-9');
        content.toggleClass('small-10');
        content.toggleClass('medium-10');
        content.toggleClass('medium-11');
    });
});

Demo on Plunker

Upvotes: 1

Related Questions