0

トグル可能なCSSで3列のレイアウトを作成しようとしています。次のスキームは、言葉よりもよく説明する必要があります。 ここに画像の説明を入力

3列を全高にしたい。

  • 赤: 静的な幅の列
  • 緑色: 切り替え可能なメニュー
  • 濃い緑色：トグル後のメニュー
  • 白: ページの残りの部分を埋めるメイン コンテナ

私は次のコードでそれをやろうとしましたが、成功しませんでした:

<div id="header"></div>
<div id="inline_container">
    <div id="left_menu"></div>
    <div id="toggle_menu"></div>
    <div id="main_container"></div>
</div>

そして、このCSSコードで：

* {margin: 0; padding: 0;}
.body {height: 100%; width: 100%;}
#header {height: 70px; width: 100%;}
#inline_container {height: 95%; width: 100%;}
#left_menu {height: 100%; width: 80px; display: inline-block; float: left;}
#toggle_menu {height: 100%; width: 150px; display: inline-block; float: left;}
#main_container {height: 100%; width: 100%; display: inline-block; float: left;}
4

2 に答える 2

5

このようなものが欲しかったですか？

http://jsfiddle.net/Kcfde/

トグル効果を表示する jQuery スクリプトを追加しました。緑色の div をクリックするだけです。

基本的に、 と を設定するfloatと、コンテンツに収まるためwidth、要素は のままにする必要があります。display: block

于 2013-05-20T16:57:15.210 に答える
2

Working FIDDLE Demo

全高のページを作成するには、ラッパーが必要です。

<div id="wrapper">
    <!-- MARKUP -->
</div>

それはページ全体を埋めます：

#wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

内wrapperで、必要な要素を作成します。

<div id="wrapper">
    <div id="red"></div>

    <div id="lime">
        <div id="green"></div>
        <span class="close">[X]</span>
    </div>
    <div id="white">
        TEXT
    </div>
</div>

green要素は要素の子であることに注意してくださいlime。limeget classの場合collapsed、すべてのデータが非表示になり、green1 つのデータが表示されます。CSSは次のとおりです。

#wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

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

#green {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    background: green;
    display: none;
    cursor: pointer;
}

#lime .close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background: pink;
    cursor: pointer;
}

#white {
    height: 100%;
    background: gray;
}

#lime {
    position: relative;
    float: left;
    width: 200px;
    height: 100%;
    background: lime;
    transition: width 0.5s;
}

#lime.collapsed {
    width: 30px;
}

#lime.collapsed * {
    display: none;
}

#lime.collapsed #green {
    display: block;
}

要素を閉じたり開いたりするlimeには、JS が必要です (私は jQuery を使用しました)。

$(function () {
    $('#lime .close').on('click', function () {
        $('#lime').addClass('collapsed');
    });

    $('#green').on('click', function () {
        $('#lime').removeClass('collapsed');
    });
});

最終的なFIDDLE Demoを見ることができます。

于 2013-05-20T17:27:02.743 に答える