1

私は CSS3 から始めています。次のようなメニューを作成しようとしています: http://codecanyon.net/item/metro-navigation-menu/full_screen_preview/4573382

ボタンをクリックすると、親divが非表示になり、他のボタンでdiv娘が開きます。

私は、この投稿CSS3 onclick activate another DIV's animationを見ました。これは、例http://jsfiddle.net/kevinPHPkevin/K8Hax/、コードを指します:

CSS:

#box1 {
    display:none;
}
#box1:target {
    display:block;
}

HTML:

<a href="#box1">Click Me</a>
<div id="box1">test test</div>

リンクをクリックすると、divが開きます。しかし、リンクをクリックしてdivを非表示にし、もう一方を開いてから逆にしたいのです。

私はCSS3のみを使用します

tks を助けるために

4

2 に答える 2

2

これを行うために css3 のみを使用したい場合は、Checkbox ハック ( http://css-tricks.com/the-checkbox-hack/ ) を使用できます。

理想的な CSS の使用法とはほど遠いですが、ボックスをラジオ ボックスとして設定すると、それぞれが他のボックスを非アクティブ化するため、非常にうまく機能します。(つまり、デフォルトで「width:0px」を設定し、「transition: width 0.5s;-webkit-transition: width 0.5s;」と組み合わせてチェックで「width:200px」に変更し、アニメーションを少し加えます)。

正直なところ、チェックボックスハックのフォールバックは理想的ではなく、CSSが実際に制御するように構築されているものではないため、jquery/javascriptを使用することをお勧めします。

お役に立てば幸いです、ダン

于 2013-09-30T10:08:35.263 に答える
0

これはすでに回答されています。チェックアウトできます：

CSS3 onclick 別の DIV のアニメーションを有効にする

これは「+」記号のみを使用した非常に単純な手法です。これが役立つことを願っています。

于 2015-07-09T05:03:57.790 に答える