1

I'm trying to design a site using Bootstrap 3 with a top navbar and a left side navbar that slides in on demand. I'm not sure if I should be using something off-campus that slides in, or using collapse. I've tried using collapse and here's what I've got so far:

http://www.bootply.com/kUYl9617Fc

Click Reports->Toggle Report Data 1 to toggle the slide effect. There's some things that are wrong with it.

  1. It slides down from the top. I'd like it to slide in from the left.
  2. My "Main Content here" text should appear to the right just like the 'Lorem ipsum' content in the pic below, not below the slide in content. Ideally I'd like "Main Content here" to get pushed right and be centered in the remaining area of the page.

Please note, I've seen plenty of examples on the web of slide in navbars from the side and the reason I'm not simply copying their examples, is because the slide in content fills the page from top to bottom and pushes to the side the top navbar as well. I'm trying to avoid this. It's really important that the slide in content appear below the top navbar like in the mockup.

Ultimately what I'm trying to achieve is something that looks like this:

mockup

Where clicking Reports at the top opens a drop down menu for users to select a category. This slides in a list of sub-categories on the left hand side and pushes the 'Lorem ipsum' content to the right. The mockup is not exact: where it says "Local Catalog Maintenance" I'd actually like that to be included within the sidebar, kind of like a Brand maybe (and I'd shrink that text to fit appropriately).

Thanks in advance for any help.

Edit: Changed the bootply link to incorporate SiggyF's correction. I also moved the id="collapseExample" from the row div above it to the <div class="col-sm-3" below it.

user45183
  • 529
  • 1
  • 7
  • 16

1 Answers1

0

Regarding your first question. The collapsing animation is defined in a stylesheet. It is fixed to animate the height attribute: 

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  @include transition-property(height, visibility);
  @include transition-duration(.35s);
  @include transition-timing-function(ease);
}

If you want to change that animation, you can transition the width property instead. How you implement depends on if you use the sass, less or css version of bootstrap.

Regarding your second question. There's a div out of order on line 36. Try changing the container to:

<div class="container">
  <div class="row" id="collapseExample">
    <div class="col-sm-3" id="sidebar">
      <ul class="nav nav-sidebar">
        <li class="active"><a href="#">Overview</a></li>
        <li><a href="#">Data</a></li>
        <li><a href="#">Analytics</a></li>
        <li><a href="#">Export</a></li>
      </ul>
    </div> <!-- there was a div here -->
    <div class="col-sm-6">
      Main content here
    </div> 
    <div class="col-sm-3">
    </div> <!-- and now it's here -->
  </div>
</div><!-- /.container -->
SiggyF
  • 22,088
  • 8
  • 43
  • 57
  • Thank you for noticing that. I've edited my post and the bootply to correct it. – user45183 Jan 27 '16 at 21:58
  • I'm new to front-end development, but I read that it's not a good idea to change the bootstrap css directly. I'm using the css version. So should I add the .collapsing style to a new css file and load that after I load BS's? Will that sufficiently over-ride the original BS definition? – user45183 Jan 27 '16 at 22:23
  • Nevermind I think I found the answer to my last question here: http://stackoverflow.com/questions/12498476/twitter-bootstrap-collapse-plugin-direction-horizontal-instead-of-vertical/18602739#18602739 and here: http://stackoverflow.com/questions/18993202/bootstrap-3-0-collapse-horizontally – user45183 Jan 27 '16 at 22:29