Я ищу решение для 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/
Для жизни во мне я не могу найти пример в Интернете - но здесь быстрый рисунок того, что мне нужно:
Это немного похоже на эффект @http://simplerealtytheme.com/plugins/pullout-widgets/ - похоже, что они используют дисплей: block; ясно: оба; а затем позиционируя выталкивающую вкладку абсолютно в пределах div с отрицательным правым положением.