23

我正在寻找一个 CSS 解决方案来创建一个按钮来使用 twitter 引导程序打开和关闭侧边栏。

我想要人们在他们的网页上拥有的那些小图标之一，它在侧边栏关闭时看起来像一个拉动标签，然后在侧边栏被拉出时跟随侧边栏 - 这有名字吗？

我创建了一个 toggleSidebar 图标链接来执行此操作，但我有两个问题：

  1. 我无法使用 float: left 或 display: inline-block 让它与侧边栏一起浮动
  2. 已修复，它会创建一个自己的列...我希望它浮动在主要内容之上。

的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>

的CSS：

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

的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);
  }
})

一个工作示例：http: //jsfiddle.net/amorris/dmyTR/

对于我的生活，我在网上找不到一个例子 - 但这是我所追求的快速绘图： 拉杆

这有点像@http : //simplerealtytheme.com/plugins/pullout-widgets/的效果- 看起来他们正在使用 display: block; 明确：两者；然后将拉片绝对定位在 div 内，右侧位置为负。

4

3 回答 3

32

我想这就是你想要的，看这里。

相关代码是这样的：

#content {
    float:left;
}

#mapCanvas img {
    max-width: none;
}

#maincont{
    margin-top: 42px;
}

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

#sidebar{
    float:left;   
}

请确认那是您的想法！

于 2012-12-19T19:17:09.523 回答
15

这是你的想法吗？

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

基本上，而不是 .hide() 和 .show(); 你动画它的位置。

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

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

我从 .container-fluid 中删除了#sidebar，因为它不是容器的一部分。我还将#toggleSidebar 放在#sidebar 中。

于 2012-12-19T19:36:46.340 回答
2

这是我绘制的动画侧抽屉，需要很少的引导修改：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;
    }
}

使用样式的固定导航栏.side-collapse允许我们将栏固定到屏幕边缘。

在标头之后添加.side-collapse-container到容器允许内容在打开时转移。

一些脚本将点击事件附加到[data-toggle=]选择器。

$(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');
    });
});

查看 github 页面获取源 html 或 jam。

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

于 2014-01-14T19:25:11.180 回答