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.

Trufa
  • 39,971
  • 43
  • 126
  • 190
Adam Morris
  • 8,265
  • 12
  • 45
  • 68
  • have you looked at jquery as an option, slideToggle if i am understanding your question correctly – Richlewis Nov 28 '12 at 13:07
  • Thanks although, I'm okay with the toggling - more looking for help on positioning the button that toggles. – Adam Morris Nov 28 '12 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. – Adrian Heine Nov 28 '12 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? http://stackoverflow.com/questions/11377472/slide-out-menu-like-android-google-and-youtube-style-slide-menu-not-like-faceb – Maktouch Dec 17 '12 at 21:49
  • @Adam I am a little confused as to what you are asking. So questions: 1) Is your problem purely a CSS problem? Also could you make a really quick sketch of how it should look like in both states? Also if you could chat for a minute we could create a room here http://chat.stackoverflow.com/ cheers! – Trufa Dec 18 '12 at 00:16
  • @Trufa - I can't seem to find a working example on the web, but I do see this as a CSS problem. Something with positioning things absolutely relative to a div container. I've added a quick sketch to the question. – Adam Morris Dec 19 '12 at 17:07
  • 1
    @Aktee - thanks - I found a link there to http://simplerealtytheme.com/plugins/pullout-widgets/ that is an example of what I'm trying to do. – Adam Morris Dec 19 '12 at 17:16

3 Answers3

32

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!

Trufa
  • 39,971
  • 43
  • 126
  • 190
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.

Maktouch
  • 3,117
  • 20
  • 21
  • 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! – Adam Morris Dec 19 '12 at 19:47
  • You're better off covering google maps than redrawing it every time someone clicks on your sidebar. – Maktouch Dec 19 '12 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. – Adam Morris Dec 19 '12 at 19:58
  • thank you very much for this sidebar, nice easy and bootstrap ready! – sirvon Mar 17 '13 at 23:50
  • Can anyone explain why clicking the sidebar arrow automatically scrolls you to the top of the page? – varatis Mar 28 '13 at 17:23
  • 2
    @varatis It's because the link target is set to "#" which tends to scroll you to the top of the page. – Eli Lipsitz Mar 31 '13 at 04:30
  • dude, it's perfect solution without tons of code and external libraries! Big thanks! – kaleb4eg Jun 23 '15 at 07:54
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

Cole Lawrence
  • 615
  • 6
  • 13