0

とにかく、基本的に 2 つのボタンを重ねたトグル リンクを作成しようとしています。そのうちの 1 つはdisplay:none、クリックすると になり、その逆も同様です。

現在、私のCSSはこのようなものです

#main-nav:target + .page-wrap {
    position:absolute;
    left:-80px;
    #open-menu {
    display: none;
    }
    #close-menu {
    display: block;
    }
}

...しかし、#open-menu と #close-menu の表示オプションが表示されていないようです。何か助けはありますか?

編集: わかりましたので、プリプロセッサが必要です._.

もう一度編集:うまくいきました、ありがとう!ページ div 全体 (メニューを除く) をページからスライドせる方法はありますか? それとも単純なoverflow-x:hiddenですか?

4

2 に答える 2

1

プリプロセッサーを使用しておらず、使用したくない場合は、HTML 構造が実際にセレクターに対応していると仮定して、次のように CSS を書き直すことができると思います。

#main-nav:target + .page-wrap {
    position: absolute;
    left: -80px;
}

#main-nav:target + .page-wrap #open-menu {
    display: none;
}

#main-nav:target + .page-wrap #close-menu {
    display: block;
}

もちろん、#open-menu#close-menuが の子孫ではない.page-wrap場合、プリプロセッサを使用してネストされたスタイル ルールの記述をサポートしたとしても、これはまったく機能しません (プリプロセッサはプレーンなCSS)。

前述のように、これらの要素が子孫コンビネータと兄弟コンビネータで表現できる方法で関連付けられていない場合は、目的を達成するために JavaScript を使用する必要があります。

于 2013-04-11T12:15:30.047 に答える