在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中切換覆蓋側欄

回答

相關問題