0

私は「ウィンドウ レイアウト」を使用しています (つまり、特定の div 内のコンテンツは、Web アプリの外観のために、ブラウザー内のウィンドウのように見えます)。次の機能が必要です。

  • div をクリックすると、スペースをとらないように小さくなります。もう一度クリックすると、再び展開されます。

これは、2 つ<div>の を含む単純なページの例です。

仮定<div id="window1">し、<div id="window2">

#window1 {
    width: 30px;
}

#window1:active {
    width: 100px;
}

問題は、マウス ボタンを離すと、幅が元のサイズに戻ることです。

基本的に、このページには画面の左下に小さなメニュー ( fixed) があり、解像度が小さい (1024 以下) 人にとっては邪魔にならないようにしたいと考えています。

4

2 に答える 2

2

:target を使用して行う方法は次のとおりです- http://jsfiddle.net/joplomacedo/V6pJT/3/

HTML

<div class="block">
    <a class="open" href="#menu"></a>

    <div id="menu">
        Menu Item 1<br />
        Menu Item 2<br />
        Menu Item 3<br />
        Menu Item 4<br />
        Menu Item 5<br />
        Menu Item 6<br />
        Menu Item 7<br />
        <a class="close" href="#"></a>
    </div>
</div>

CSS

.block {
    position: relative;
}

#menu{
    width: 100px;
    background: red;
    border: 1px solid #aaa;
}

#menu:target {
    background: orange;
    width: 200px;
}

.open,
.close {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
}

.close {
    display: none;
}

#menu:target .close {
    display: block;
}

残念ながら、この解決策では、クリックするたびにページがジャンプします。それも無駄に大きい。:checked セレクターを利用するソリューションでは、必要な html と css がはるかに少なくなり、クリックごとにページがジャンプすることもありません。これがその解決策であり、私が推奨するものです：

HTML...

<div class="block">
    <label for="toggle"></label>
    <input type="checkbox" id="toggle"/>

    <div id="menu">
        Menu Item 1<br />
        Menu Item 2<br />
        Menu Item 3<br />
        Menu Item 4<br />
        Menu Item 5<br />
        Menu Item 6<br />
        Menu Item 7<br />
    </div>
</div>

...そしてCSS...

.block { 
    position: fixed;
    bottom: 0;
}

#toggle {
    display: none;
}

label[for="toggle"] {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
}

#menu{
    width: 100px;
    background: red;
    border: 1px solid #aaa;
}

#toggle:checked ~ #menu {
    background: orange;
    width: 200px;
}

</p>

</p>

于 2012-07-09T23:00:11.457 に答える
1

:target疑似セレクターを使用できます- http://jsfiddle.net/V6pJT/

#menu{
    display: none;
}

#menu:target {
    width: 200px;
    display: block;
    border: 1px solid #aaa;
}​
于 2012-07-09T22:40:26.963 に答える