0

わかりましたので、2 つの状態を持つ右側のページ スライド効果を構築しようとしています。スライド パネルを最初に開いたときにメニューを表示し、メニュー項目を選択すると、ボックスを展開して開くこともできます。大きくしてその情報を表示します。

前に見たことがないので、私がやろうとしていることを正確に説明するのは難しいと思いますが、高さ100％、幅200pxの最初のdivを開くと、その中のリンクを選択すると、右からアニメーション化されます別の div を展開してその左にフロートさせ、ボックスをさらに展開させたいと思います。これは理にかなっていますか？他のどこでこれを行うか、これを機能させるためのJavaScriptに関するリンクは大歓迎です...これまでの私のコーディングは次のとおりです。

HTML:

<div id="enquirypost">

<div style="width:200px;">
<a href="#extra" style="color:#999; text-decoration:underline;">Extra Expand</a>
<br />
<br />
Menu<br />
<a href="#" style="color:#fff; text-decoration:none;">Close</a>
</div>

<div id="extra">test</div>


</div>

<a href="#enquirypost" style="color:#999; text-decoration:underline;">Login/Register</a>

CSS:

body{margin:0;}
#enquirypost {
        height:100%;
        overflow:hidden;
        z-index:1000;
        width:0px;
        float:right;
        background:#ccc;
        font-size:20px;
        line-height:65px;
        position:absolute;
        top:0px;
        right:0px;
        color:#FFF;
        text-align:center;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;}
#enquirypost:target 
{
    bottom:0px;
    overflow:auto;
    min-width:200px; 
    height: 100%;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
}

#extra {
        height:100%;
        overflow:hidden;
        z-index:1000;
        width:0px;
        float:right;
        background:#000;
        font-size:20px;
        line-height:65px;
        position:absolute;
        top:0px;
        right:0px;
        color:#FFF;
        text-align:center;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;}
#extra:target 
{
    bottom:0px;
    overflow:auto;
    min-width:400px; 
    height: 100%;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
}

そして、ここにjsfiddleがあります

4

3 に答える 3

1

#enquirypost の外に #Extra を追加します。

http://jsfiddle.net/davidja/wFutQ/15/

    <div id="enquirypost">

    <div style="width:200px;">
    <a href="#extra" style="color:#999; text-decoration:underline;">Extra Expand</a>
    <br />
    <br />
    Menu<br />
    <a href="#" style="color:#fff; text-decoration:none;">Close</a>
    </div>




    </div>

    <a href="#enquirypost" style="color:#999; text-decoration:underline;">Login/Register</a>

    <div id="extra">test</div>
于 2013-07-01T14:10:16.650 に答える
0

あなたが探していた解決策があると思います：

http://jsfiddle.net/wFutQ/17/

トリッキーな部分は、「メニュー」である div の前に「サブメニュー」である div を置くことです。.submenu:target + .menu {次に、サブメニューがターゲットになっている間、メニューを開いたままにできるcssセレクターを使用できます。

サブメニューとメニュー.subsubmenu:target + .submenuを.subsubmenu:target + .submenu + .menuセレクターで開いたままにして、より深いサブサブメニューを実行することもできます

私のhtmlコード（申し訳ありませんが、いくつかのクラスを追加しましたが、それらのいくつかは現在使用されていません）：

<div>

    <div id="extra" class="menuPart submenu">
            <div class="content">test</div>
    </div>

    <div id="enquirypost" class="menuPart menu">
        <div class="content">
            <a href="#extra" style="color:#999; text-decoration:underline;">Extra Expand</a>
            <br />
            <br />
            Menu<br />
            <a href="#" style="color:#fff; text-decoration:none;">Close</a>
        </div>
    </div>

</div>

<a href="#enquirypost" style="color:#999; text-decoration:underline;">Login/Register</a>

私のCSSコード:

body {
    margin:0;
}

.menuPart {
    height: 100%;
    width: 0px;
    font-size:20px;
    line-height:65px;
    position:absolute;
    color: #FFF;
    text-align: center;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}

.menu:target {
    overflow: auto;
    min-width: 200px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}

.submenu:target + .menu {
    overflow: auto;
    min-width: 200px;
}

.submenu:target {
    overflow: auto;
    min-width: 200px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    padding-right: 200px;
}

#enquirypost {
    background: #CCC;
    right: 0px;
}

#extra {
    background: #000;
    right: 0px;
}
于 2013-07-01T14:27:18.120 に答える