23

I am looking for a CSS solution to create a button to toggle a sidebar on and off using twitter bootstrap.

I'd like one of those little icons people have on their webpage that looks like a pull tab when the sidebar is closed, and then follows the sidebar out when it is pulled - does this have a name?

I've created a toggleSidebar icon link to do this, but I have two problems:

  1. I can't get it to float with the sidebar using float: left or display: inline-block
  2. Fixed, it creates a column of it's own... I want it float on top of the main content.

The html:

<div class="container-fluid">
  <div class="row-fluid">
    <div id="sidebar" class="span3 scrollDiv" style="display: none;">
      <!--Sidebar content-->
    </div>
    <div id="content" class="span12">
      <!--Main content-->
    </div>
    <a id="toggleSidebar" href="#" class="toggles"><i class="icon-chevron-right"></i></a>
  </div>
</div>

The css:

#toggleSidebar {
  /* float: left; */
  /* display:inline-block; */
  position:fixed;
  display:block;
  left:0;
  top:45px;
  color:#779DD7;
  padding:2px 4px;
}

The javascript:

function sidebar(panels) {
  if (panels === 1) {
    $('#content').removeClass('span9');
    $('#content').addClass('span12 no-sidebar');
    $('#sidebar').hide();
  } else if (panels === 2) {
    $('#content').removeClass('span12 no-sidebar');
    $('#content').addClass('span9');
    $('#sidebar').show();
  }
}

$('#toggleSidebar').click(function() {
  if ($.asm.panels === 1) {
    $('#toggleSidebar i').addClass('icon-chevron-left');
    $('#toggleSidebar i').removeClass('icon-chevron-right');
    return sidebar(2);
  } else {
    $('#toggleSidebar i').removeClass('icon-chevron-left');
    $('#toggleSidebar i').addClass('icon-chevron-right');
    return sidebar(1);
  }
})

A working example of this: http://jsfiddle.net/amorris/dmyTR/

For the life in me, I can't find an example on the web - but here's a quick drawing of what I'm after: Pull Bar

It's a bit like the effect @ http://simplerealtytheme.com/plugins/pullout-widgets/ - which looks like they're using a display: block; clear: both; and then positioning the pull tab absolutely within the div with a negative right position.

7
  • have you looked at jquery as an option, slideToggle if i am understanding your question correctly
    – Richlewis
    Commented Nov 28, 2012 at 13:07
  • Thanks although, I'm okay with the toggling - more looking for help on positioning the button that toggles. Commented Nov 28, 2012 at 13:33
  • Just two hints: CSS only supports the comment syntax /* comment */ (unlike LESS, which you might be using) and the semicolon after the declaration of the sidebar function is unnecessary. Commented Nov 28, 2012 at 13:40
  • 1
    Is there a website with a similar effect? I have trouble understanding. Do you want something that always follows when you scroll, and when you click on it, slides out, like on Android/iPhone? stackoverflow.com/questions/11377472/…
    – Maktouch
    Commented Dec 17, 2012 at 21:49
  • 1
    @Aktee - thanks - I found a link there to simplerealtytheme.com/plugins/pullout-widgets that is an example of what I'm trying to do. Commented Dec 19, 2012 at 17:16

3 Answers 3

32
+50

I think this is what you want, see here.

Relevant code is this:

#content {
    float:left;
}

#mapCanvas img {
    max-width: none;
}

#maincont{
    margin-top: 42px;
}

#toggleSidebar {
    float:left;
    color:#779DD7;
    padding:2px 4px;
}

#sidebar{
    float:left;   
}

Please confirm that that was what you have in mind!

0
15

Is this what you had in mind?

http://jsfiddle.net/dmyTR/37/

Basically, instead of .hide() and .show(); you animate its position.

  // to hide 
  $('#sidebar').animate({
        left: -180,
  });

  // to show
  $('#sidebar').animate({
        left: 20,
  });

I removed #sidebar from .container-fluid, because, well, it's not part of the container. I also put #toggleSidebar inside #sidebar.

7
  • I just accepted Trufa's before seeing this - but using the animate looks much better. I'm not sure if I can get away with covering the google map, as I don't want to hide the zoom controls on the upper left of the map, but I think I can still float the map along side the sidebar. I like putting the toggleSidebar inside sidebar... makes much more sense to me intuitively. Thank you! Commented Dec 19, 2012 at 19:47
  • You're better off covering google maps than redrawing it every time someone clicks on your sidebar.
    – Maktouch
    Commented Dec 19, 2012 at 19:51
  • The redrawing performance is okay, as the tiles are cached locally and not re-downloaded... but it does shift the map. A better approach might be to put this toolbar on the right, and then I can cover the google map with the toolbar without loosing anything important... it does look sexier to have it just zip over the map, and saves the re-calculation. I'll look into that. Commented Dec 19, 2012 at 19:58
  • thank you very much for this sidebar, nice easy and bootstrap ready!
    – sirvon
    Commented Mar 17, 2013 at 23:50
  • 2
    @varatis It's because the link target is set to "#" which tends to scroll you to the top of the page. Commented Mar 31, 2013 at 4:30
2

Here's an animated side drawer I drew up requiring very little bootstrap modification: http://zombiehippie.github.io/Side-drawer/

@media screen and (max-width: 768px) {
    /* this is container is moved to the side if class is added*/
    .side-collapse-container{
        width:100%;
        position:relative;
        left:0;
        transition:left .4s;
    }
    /* toggled when navbar is out */
    .side-collapse-container.out{
        left:200px;
    }
    .side-collapse {
        /* need top to keep from overlapping fixed header*/
        top:50px;
        bottom:0;
        left:0;
        width:200px;
        position:fixed;
        overflow:hidden;
        /* transition animates the element */
        transition:width .4s;
    }
    /* toggled when navbar is in */
    .side-collapse.in {
        width:0;
    }
}

A fixed navbar using the styles of .side-collapse allows us to fix the bar to the edge of our screen.

Adding .side-collapse-container to the the container after the header allows that content to be shifted over on open.

Some script appends a click event to the [data-toggle=] selector.

$(document).ready(function() {   
    var sideslider = $('[data-toggle=collapse-side]');
    var sel = sideslider.attr('data-target');
    var sel2 = sideslider.attr('data-target-2');
    sideslider.click(function(event){
        $(sel).toggleClass('in');
        $(sel2).toggleClass('out');
    });
});

Look at the github page for the source html or jade.

HTML source https://github.com/ZombieHippie/Side-drawer/tree/gh-pages

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.