純CSSで折りたたみ可能なツリーメニューを作る
1:Htmlコード
実現の構想はcheckboxのchecked値を用いて下級欄が展開されているかどうかを判断することであり、CSS 3のセレクタにはcheckedという偽類が提供され、この偽類は私たちを提供し、要素がcheckedという値を持っているときにCSSを実行する.△すごいですね.CSS 3があれば、JSをたくさん書かないでくださいよ.
部下
checkboxがchecked値を持っているときはOLを現実にして、私たちが望んでいる機能を達成します.
次にCSSコードを見てみましょう.
このコードはツリーメニューの中心です.
input:checked + ol { background: url(toggle-small.png) 44px 5px no-repeat;margin: -22px 0 0 -44px;padding:27px 0 0 80px;height: auto;display: block; }
これはinoputがcheckedを所有した後、平レベルのOLが所有するスタイルです.
DEMOの表示
IE 9を使用して以下のブラウズは見なくてもいいので、非IEブラウザーを使用してください.
(IE 6+ブラウザにサポートしてもらうのもいいですが、css 3属性をシミュレートするためにJSを追加する必要があります.海外ではIE 6+ブラウザにCSS 3の一部をサポートさせるJS、例えばPIEを書いている牛が多いです)
まとめ:
全体的に実現構想は簡単で,主にCSS 3のchecked擬似クラスを利用してOLの隠蔽表示を実現する.しかし残念なことにIE遊覧機はCSS 3をサポートしていないが、IEのサポートがないためにCSS 3の研究を放棄することはできない.海外ではCSS 3やHTML 5が先端で話題になっていますが、彼らが研究していることは私たちをはるかに上回っていますが、国内で本当に試していることは多くなく、先端開発者にとって悲しいことです.CSS 3は私たちの重視を引き起こすべきで、スタートラインに負けてはいけないと思います.みんなでCSS 3の発展を推進しましょう.
2:効果図
実現の構想はcheckboxのchecked値を用いて下級欄が展開されているかどうかを判断することであり、CSS 3のセレクタにはcheckedという偽類が提供され、この偽類は私たちを提供し、要素がcheckedという値を持っているときにCSSを実行する.△すごいですね.CSS 3があれば、JSをたくさん書かないでくださいよ.
部下
checkboxがchecked値を持っているときはOLを現実にして、私たちが望んでいる機能を達成します.
次にCSSコードを見てみましょう.
li input {
position:absolute;left:0;margin-left:0;opacity:0;z-index:2;cursor:pointer;height:1em;width:1em;top:0;
}
input + ol {
display:none;
}
input + ol > li {
height:0;overflow:hidden;margin-left:-14px!important;padding-left:1px;
}
li label {
cursor:pointer;display:block;padding-left:17px;background:url(toggle-small-expand.png) no-repeat 0px 1px;
}
input:checked + ol {
background:url(toggle-small.png) 44px 5px no-repeat;margin:-22px 0 0 -44px;padding:27px 0 0 80px;height:auto;display:block;
}
input:checked + ol > li {
height:auto;
} このコードはツリーメニューの中心です.
input:checked + ol { background: url(toggle-small.png) 44px 5px no-repeat;margin: -22px 0 0 -44px;padding:27px 0 0 80px;height: auto;display: block; }
これはinoputがcheckedを所有した後、平レベルのOLが所有するスタイルです.
DEMOの表示
IE 9を使用して以下のブラウズは見なくてもいいので、非IEブラウザーを使用してください.
(IE 6+ブラウザにサポートしてもらうのもいいですが、css 3属性をシミュレートするためにJSを追加する必要があります.海外ではIE 6+ブラウザにCSS 3の一部をサポートさせるJS、例えばPIEを書いている牛が多いです)
まとめ:
全体的に実現構想は簡単で,主にCSS 3のchecked擬似クラスを利用してOLの隠蔽表示を実現する.しかし残念なことにIE遊覧機はCSS 3をサポートしていないが、IEのサポートがないためにCSS 3の研究を放棄することはできない.海外ではCSS 3やHTML 5が先端で話題になっていますが、彼らが研究していることは私たちをはるかに上回っていますが、国内で本当に試していることは多くなく、先端開発者にとって悲しいことです.CSS 3は私たちの重視を引き起こすべきで、スタートラインに負けてはいけないと思います.みんなでCSS 3の発展を推進しましょう.
2:効果図