Складная боковая панель с бутстрапом с жидким твиттером
Я ищу решение для CSS, чтобы создать кнопку для включения и отключения боковой панели с помощью бутстрапа twitter.
Мне бы хотелось, чтобы на их веб-странице был один из тех маленьких значков, который выглядит как вкладка выталкивания, когда боковая панель закрыта, а затем следует за боковой панелью, когда она потянута, - имеет ли это имя?
Я создал ссылку значка toggleSidebar для этого, но у меня есть две проблемы:
- Я не могу заставить его плавать с боковой панелью с помощью float: left или display: inline-block
- Исправлено, он создает собственный столбец... Я хочу, чтобы он плавал поверх основного содержимого.
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/
Для жизни во мне я не могу найти пример в Интернете - но здесь быстрый рисунок того, что мне нужно:
![Pull Bar]()
Это немного похоже на эффект @http://simplerealtytheme.com/plugins/pullout-widgets/ - похоже, что они используют дисплей: block; ясно: оба; а затем позиционируя выталкивающую вкладку абсолютно в пределах div с отрицательным правым положением.
Ответы
Ответ 1
Я думаю, что это то, что вы хотите, см. здесь.
Соответствующий код:
#content {
float:left;
}
#mapCanvas img {
max-width: none;
}
#maincont{
margin-top: 42px;
}
#toggleSidebar {
float:left;
color:#779DD7;
padding:2px 4px;
}
#sidebar{
float:left;
}
Пожалуйста, подтвердите, что это то, что вы имеете в виду!
Ответ 2
Это то, что вы имели в виду?
http://jsfiddle.net/dmyTR/37/
В основном, вместо .hide() и .show(); вы анимируете его положение.
// to hide
$('#sidebar').animate({
left: -180,
});
// to show
$('#sidebar').animate({
left: 20,
});
Я удалил #sidebar из .container-fluid, потому что, ну, это не часть контейнера. Я также добавил #toggleSidebar в #sidebar.
Ответ 3
Здесь анимированный боковой ящик, который я рисовал, требуя очень маленькой модификации бутстрапа:
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;
}
}
Фиксированный navbar с использованием стилей .side-collapse
позволяет нам фиксировать панель до края нашего экрана.
Добавление .side-collapse-container
в контейнер после того, как заголовок позволяет переносить содержимое при открытии.
Некоторые script добавляют событие click к селектору [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 или jade.
Источник HTML
https://github.com/ZombieHippie/Side-drawer/tree/gh-pages