1

私はこれを少し遊んでいて、それを完全に理解することができないので...

私は本質的にスライド式のサイドバーであるものを持っています。

初期状態はこんな感じ。

#sidebar {
    position: fixed,
    width: 200px
}

他の状態は次のとおりです。

#sidebar {
    position: fixed,
    width: 200px,
    left: -190px
}

画面の残りのスペースを埋めるこの右側に別の場所を配置したいと思います。これも動的である必要があるため、＃sidebarを切り替えると、常にスペースを埋めるようにサイズが変更されます。

注：#sidebarへのcssの変更は、$。animateでもアニメーション化されるため、サイドバーのサイズが変更されるときにサイズを変更する必要があります。

CSSでこれを行う良い方法はありますか？または、スライドイン/スライドアウトサイドバーに適したjscript/jqueryライブラリはありますか。見ましたが見つからなかったので、自分で転がし始めました。

私が考えることができる他の唯一の方法は、＃sidebarを再配置しながら、jscriptを使用してもう一方のサイズを手動で変更することです。しかし、それはやり過ぎのようです。

4

2 に答える 2

1

次に例を示します。

CSS：

#sidebar
{
    position: fixed;
    width: 200px;
    background-color:#9cf;
    left:0;
}
#sidebar.tucked { left: -190px; }
#content
{
    margin-left:200px;
}
#content.tucked { margin-left:10px; }

Javascript：

$(function()
{
    $('#sidebar').on("click", function()
    {
        $('#sidebar, #content').toggleClass("tucked", 1000);
    });
});

フィドル： http： //jsfiddle.net/w9aWp/

于 2013-02-24T16:43:29.387 に答える
1

私が取り組んだ同様のプロジェクトに基づいて、このフィドルをまとめました：http: //jsfiddle.net/DrdHJ/

基本的に私は2つの列を持っています：

<div id="sidebar">

    <a class="resize" data-width="300">Large</a>
    <br>
    <a class="resize" data-width="200">Small</a>

</div>

<div id="main"></div>

#sidebarは「スライド」列で#mainあり、コンテンツを含むメインブロックです。

次に、CSSの場合は次のようになります。

html, body { width: 100%; height: 100%; }

#sidebar { 
    width: 200px;
    height: 100%;
    float: left;
    background-color: red;
}

#main {
    width: auto;
    height: 100%;
    margin-left: 200px;
    background-color: blue;
}

注意すべき重要なことは、margin-leftオン#mainが所定の位置にとどまるということです。

次に、JavaScriptの場合、次のようになります。

$('.resize').on('click',function(){

    var width = $(this).data('width');

    $('#sidebar').css('width',width+'px');
    $('#main').css('margin-left',width+'px');

});

これは、サイズ変更するイベントをリッスンし、クリックされたリンクの属性に基づいて、の幅#sidebarとのマージン左オフセットを調整します。これは明らかに、をに置き換えるために微調整することができます。#maindata-widthcss()animate

于 2013-02-24T16:45:18.527 に答える