Collapsible sidebar with fluid twitter bootstrap

久未见 提交于 2019-12-02 14:02:01

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!

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.

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!