Twitterブートストラップを使用してサイドバーのオンとオフを切り替えるボタンを作成するCSSソリューションを探しています。
サイドバーを閉じたときにプルタブのように見えるWebページにある小さなアイコンの1つに、サイドバーを引いたときにサイドバーに続くようにしたい-これには名前がありますか?
これを行うためにtoggleSidebarアイコンリンクを作成しましたが、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内に絶対的に配置し、負の正しい位置に配置します。
これがあなたが望むものだと思う、 here を参照。
関連するコードは次のとおりです。
#content {
float:left;
}
#mapCanvas img {
max-width: none;
}
#maincont{
margin-top: 42px;
}
#toggleSidebar {
float:left;
color:#779DD7;
padding:2px 4px;
}
#sidebar{
float:left;
}
それがあなたが念頭に置いていることであることを確認してください!
これはあなたが念頭に置いていたものですか?
基本的に、.hide()および.show();の代わりにその位置をアニメーション化します。
// to hide
$('#sidebar').animate({
left: -180,
});
// to show
$('#sidebar').animate({
left: 20,
});
.sidetainer-fluidから#sidebarを削除しました。これは、コンテナの一部ではないからです。また、#toggleSidebarを#sidebar内に配置します。
これは、私が作成したアニメーションのサイドドロワーです。非常に小さなbootstrap=変更: 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');
});
});
ソースhtmlまたはjadeのgithubページを見てください。
HTMLソース https://github.com/ZombieHippie/Side-drawer/tree/gh-pages