在Bootstrap中切换覆盖侧栏

我有一些文本输入来过滤我的网页上的一些数据。

如何将这些输入字段放在隐藏的侧边栏中，当我点击导航栏中的切换器时显示该边栏？侧栏应覆盖并具有完整的高度。

我想我可以使用绝对位置，高度100％，宽度300px，顶部0和右侧0的<div>元素，但我不知道如何从导航栏中的按钮切换它。此外，如果切换按钮位于导航栏的右侧，则侧边栏将覆盖在按钮上，因此我无法再将其隐藏起来。如果我点击边栏以外的内容，边栏也必须隐藏。我已经浏览了bootstrap文档，但没有这种情况的例子。

来源

2015-10-17 Jamgreen

引导不支持这一点，但你可以使用其他JS插件，像http://plugins.adchsm.me/slidebars/ - 我使用这一点，我很满意。很容易使用，如果您有任何疑问，我可以提供帮助。 – makshh

Yea bootstrap没有侧边栏，我尝试使用makshh提供的一个，但是我遇到了一些问题，你可以检查这个框架并只带侧边栏http://semantic-ui.com/modules/sidebar.html但如果你有'background-attachment：fixed;'在你的网站的某个地方，你会遇到问题。说实话，我还没有找到好的侧边栏。 –

@NenadVracar幻灯片真的很棒，我也在寻找很棒的插件，并且在CSS幻灯片的一些更改没有问题。你有什么问题？ – makshh

下面是一个如何自己做到这一点的例子。

$(document).ready(function() { 
 
    var open = false; 
 

 
    var openSidebar = function() { 
 
    $('.side-collapse').addClass('open-side'); 
 
    $('.navbar-toggle-side').addClass('open-side'); 
 
    $('#navbar-toggle-side').addClass('open-side'); 
 
    open = true; 
 
    }; 
 

 
    var closeSidebar = function() { 
 
    $('.side-collapse').removeClass('open-side'); 
 
    $('.navbar-toggle-side').removeClass('open-side'); 
 
    $('#navbar-toggle-side').removeClass('open-side'); 
 
    open = false; 
 
    }; 
 

 
    $('.navbar-toggle-side, .nav-close').click(function(event) { 
 
    event.stopPropagation(); 
 
    var toggle = open ? closeSidebar : openSidebar; 
 
    toggle(); 
 
    }); 
 

 
    $(document).click(function(event) { 
 
    if (!$(event.target).closest('.side-collapse').length) { 
 
     closeSidebar(); 
 
    } 
 
    }); 
 
});

body { 
 
    padding-top: 60px; 
 
} 
 
.navbar.navbar-custom { 
 
    background: #fff; 
 
    border: none; 
 
} 
 
.navbar.navbar-custom .navbar-header .navbar-toggle, 
 
.navbar-custom .navbar-header .navbar-toggle:hover, 
 
.navbar-custom .navbar-header .navbar-toggle:focus { 
 
    background: none; 
 
    border: none; 
 
} 
 
.navbar.navbar-custom .navbar-toggle-side { 
 
    margin-top: 15px; 
 
    background: none; 
 
    border: none; 
 
    float: left; 
 
} 
 
.navbar.navbar-custom .navbar-header .navbar-toggle-side:hover, 
 
.navbar.navbar-custom .navbar-header .navbar-toggle-side:focus, 
 
.navbar.navbar-custom .navbar-header .navbar-toggle-side:active { 
 
    border-radius: 0; 
 
    background: #2480fe; 
 
    color: #fff; 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -moz-transition: all 0.3s ease-in-out; 
 
    -o-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 
.navbar.navbar-custom .side-collapse .navbar-nav > li:first-child { 
 
    background: #2480fe; 
 
    font-size: 25px; 
 
    font-weight: 600; 
 
} 
 
.navbar.navbar-custom .side-collapse .navbar-nav > li:first-child a { 
 
    color: #fff; 
 
} 
 
.navbar.navbar-custom .navbar-nav > li, 
 
.navbar.navbar-custom .navbar-nav > li > a { 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -moz-transition: all 0.3s ease-in-out; 
 
    -o-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 
.navbar.navbar-custom .navbar-nav > li:hover { 
 
    background: #6B8AB5; 
 
} 
 
.navbar.navbar-custom .navbar-nav > li > a:hover { 
 
    border-right: 6px solid #2480fe; 
 
    color: #fff; 
 
} 
 
.navbar.navbar-custom .navbar-nav .form-search, 
 
.navbar.navbar-custom .navbar-nav .form-search:hover, 
 
.navbar.navbar-custom .navbar-nav .form-search:focus { 
 
    border-radius: 0; 
 
    border: none; 
 
    border-top: 1px solid #ccc; 
 
    border-bottom: 1px solid #ccc; 
 
    outline: none; 
 
    box-shadow: none; 
 
    color: #2480fe; 
 
    margin-bottom: 5px; 
 
    width: 256px; 
 
} 
 
.navbar.navbar-custom .side-collapse .nav-close i { 
 
    line-height: 55px; 
 
    right: 10px; 
 
    float: right; 
 
    position: absolute; 
 
    z-index: 2000; 
 
    color: #fff; 
 
    cursor: pointer; 
 
} 
 
.navbar.navbar-custom .side-collapse { 
 
    background: #fff; 
 
    border-right: 2px solid #f5f5f5; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: -256px; 
 
    width: 256px; 
 
    position: fixed; 
 
    overflow: hidden; 
 
    -webkit-transition: all 0.4s cubic-bezier(1, .25, .005, 1.1); 
 
    transition: all 0.4s cubic-bezier(1, .25, .005, 1.1); 
 
} 
 
.navbar.navbar-custom .side-collapse.open-side { 
 
    left: 0; 
 
} 
 
.alert.alert-success-alert { 
 
    background: #2480fe; 
 
    color: #fff; 
 
    border-radius: 0; 
 
} 
 
.alert.alert-success-alert button.close { 
 
    color: #fff; 
 
} 
 
@media (min-width: 768px) { 
 
    .navbar.navbar-custom .side-collapse { 
 
    top: 0px; 
 
    } 
 
    .navbar.navbar-custom .navbar-header .navbar-brand { 
 
    margin-left: 15px; 
 
    } 
 
    .navbar-custom .navbar-header .navbar-toggle-side { 
 
    display: block; 
 
    } 
 
    .navbar.navbar-custom .side-collapse .navbar-nav > li > a { 
 
    width: 256px; 
 
    display: block; 
 
    } 
 
    .navbar.navbar-custom .side-collapse .nav-close i { 
 
    line-height: 45px; 
 
    } 
 
} 
 
@media (max-width: 767px) { 
 
    .navbar.navbar-custom .navbar-toggle-side { 
 
    margin-left: 15px; 
 
    } 
 
    .navbar.navbar.navbar-custom { 
 
    border-bottom: 3px solid #6B8AB5; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default navbar-fixed-top navbar-custom"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header" id="navbar-toggle-side"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-top" aria-expanded="false"> <i class="fa fa-align-right"></i> 
 

 
     </button> 
 
     <button type="button" class="navbar-toggle-side"><span class="sr-only">Toggle navigation</span> <i class="fa fa-align-left"></i> 
 

 
     </button><a class="navbar-brand" href="#">Yupppp</a> 
 

 
    </div> 
 
    <div class="collapse navbar-collapse" id="bs-top"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Sign Up </a> 
 

 
     </li> 
 
     <li><a href="#">Log In</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    <div class="navbar-default side-collapse"> 
 
     <nav role="navigation" class="navbar-collapse"> 
 
     <div class="nav-close"><i class="fa fa-times fa-2x"></i> 
 

 
     </div> 
 
     <ul class="nav navbar-nav"> 
 
      <li><a href="#">Bootstrap</a> 
 
      </li> 
 
      <li><a href="#">About</a> 
 
      </li> 
 
      <li><a href="#">Services</a> 
 
      </li> 
 
      <li><a href="#">News</a> 
 
      </li> 
 
      <li><a href="#">Contact</a> 
 
      </li> 
 
      <li> 
 
      <input type="text" class="form-control form-search" placeholder="Search..." /> 
 
      </li> 
 
      <li> 
 
      <input type="text" class="form-control form-search" placeholder="Name..." /> 
 
      </li> 
 
     </ul> 
 
     </nav> 
 
    </div> 
 
    </div> 
 
</nav> 
 
<div class="container"> 
 
    <div class="alert alert-success-alert alert-dismissible" role="alert"> 
 
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span> 
 

 
    </button> <strong>Yup!</strong> 
 

 
    </div> 
 
    <dl> <dt>Yupppp...</dt> 
 

 
    <dd>Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raices en una pieza cl´sica de la literatura del Latin, que data del año 45 antes de Cristo, haciendo que este adquiera mas de 2000 años de 
 
     antiguedad. Richard McClintock, un profesor de Latin de la Universidad de Hampden-Sydney en Virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos textos 
 
     del latín, descubrió la fuente indudable. Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por C icero, escrito en el año 45 antes de Cristo. Este libro es un tratado de teoría 
 
     de éticas, muy popular durante el Renacimiento. La primera linea del Lorem Ipsum, "Lorem ipsum dolor sit amet..", viene de una linea en la sección 1.10.32...</dd> 
 
    </dl> 
 
    <dl> <dt>Yupppp!...</dt> 
 

 
    <dd>Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raices en una pieza cl´sica de la literatura del Latin, que data del año 45 antes de Cristo, haciendo que este adquiera mas de 2000 años de 
 
     antiguedad. Richard McClintock, un profesor de Latin de la Universidad de Hampden-Sydney en Virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos textos 
 
     del latín, descubrió la fuente indudable. Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por C icero, escrito en el año 45 antes de Cristo. Este libro es un tratado de teoría 
 
     de éticas, muy popular durante el Renacimiento. La primera linea del Lorem Ipsum, "Lorem ipsum dolor sit amet..", viene de una linea en la sección 1.10.32...</dd> 
 
    </dl> 
 
    <dl> <dt>Yupppp!!...</dt> 
 

 
    <dd>Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raices en una pieza cl´sica de la literatura del Latin, que data del año 45 antes de Cristo, haciendo que este adquiera mas de 2000 años de 
 
     antiguedad. Richard McClintock, un profesor de Latin de la Universidad de Hampden-Sydney en Virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos textos 
 
     del latín, descubrió la fuente indudable. Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por C icero, escrito en el año 45 antes de Cristo. Este libro es un tratado de teoría 
 
     de éticas, muy popular durante el Renacimiento. La primera linea del Lorem Ipsum, "Lorem ipsum dolor sit amet..", viene de una linea en la sección 1.10.32...</dd> 
 
    </dl> 
 
    <dl> <dt>Yupppp...</dt> 
 

 
    <dd>Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raices en una pieza cl´sica de la literatura del Latin, que data del año 45 antes de Cristo, haciendo que este adquiera mas de 2000 años de 
 
     antiguedad. Richard McClintock, un profesor de Latin de la Universidad de Hampden-Sydney en Virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos textos 
 
     del latín, descubrió la fuente indudable. Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por C icero, escrito en el año 45 antes de Cristo. Este libro es un tratado de teoría 
 
     de éticas, muy popular durante el Renacimiento. La primera linea del Lorem Ipsum, "Lorem ipsum dolor sit amet..", viene de una linea en la sección 1.10.32...</dd> 
 
    </dl> 
 
    <dl> <dt>Yupppp...</dt> 
 

 
    <dd>Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raices en una pieza cl´sica de la literatura del Latin, que data del año 45 antes de Cristo, haciendo que este adquiera mas de 2000 años de 
 
     antiguedad. Richard McClintock, un profesor de Latin de la Universidad de Hampden-Sydney en Virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos textos 
 
     del latín, descubrió la fuente indudable. Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por C icero, escrito en el año 45 antes de Cristo. Este libro es un tratado de teoría 
 
     de éticas, muy popular durante el Renacimiento. La primera linea del Lorem Ipsum, "Lorem ipsum dolor sit amet..", viene de una linea en la sección 1.10.32...</dd> 
 
    </dl> 
 
</div>

来源

2015-10-17 18:51:23 vanburen

在Bootstrap中切换覆盖侧栏

回答

相关问题