ギターの和音（記事1、2、3 ）に取り組む前に、私はその人をサイトのメニューツリーにする必要に直面しました。 私はまったく描きたくなかったので、古き良きHTMLをCSSで取り、このツリーの作成を開始し、シンプルな1レベルのツリーから始め、後でマーカーのあるマルチレベルのツリーを作成しました。
後にこのツリーはhabrahabr.ru/blogs/css/53792の形で私に果物を与えました
階層化されたツリー
実装では、画像ではなくHTMLとCSSのみを使用します。
リストを展開するためのマーカーを描画するために、ブロックサイズがゼロの境界線を持つCSSトリックを使用しました。
スクリプトの続き。
HTML
< div id ="multi-derevo" >
< h4 >< a href ="#" > </ a ></ h4 >
< ul >
< li >< span >< a href ="#1" >< em class ="marker open" ></ em > 1. </ a ></ span >
< ul >
< li >< span >< a href ="#11" class ="current" title =" " >< em class ="marker open" ></ em > 1.1. </ a ></ span >
< ul >
< li >< span >< a href ="#111" > 1.1.1. </ a ></ span ></ li >
< li >< span >< a href ="#112" > 1.1.2. </ a ></ span ></ li >
</ ul >
</ li >
< li >< span >< a href ="#12" > 1.2. </ a ></ span ></ li >
</ ul >
</ li >
< li >< span >< a href ="#2" >< em class ="marker" ></ em > 2. </ a ></ span ></ li >
< li >< span >< a href ="#3" >< em class ="marker" ></ em > 3. </ a ></ span ></ li >
< li >< span >< a href ="#4" >< em class ="marker" ></ em > 4. </ a ></ span ></ li >
< li class ="last" >< span >< a href ="#5" title =" " >< em class ="marker open" ></ em > 5. , </ a ></ span >
< ul >
< li >< span >< a href ="#1" > 5.1. </ a ></ span ></ li >
< li >< span >< a href ="#1" > 5.2. </ a ></ span ></ li >
</ ul >
</ li >
</ ul >
</ div ><! -- / multi-derevo -- >
CSS
/* */
body {font-family: Arial, Tahoma, sans-serif; margin: 2em; font-size: 62.5%;}
p {
font-size: 1.2em;
}
a {
color: #0066cc;
text-decoration: none;
outline: none;
}
/*a:link {
color: #0066cc;
}
a:visited {color: #00cc63; }*/
a:hover {
text-decoration: underline;
}
a:active, a:focus {
color: #666;
background-color: #f4f4f4;
}
a.current {
color: black;
font-weight: bold;
}
/*
-------------------------------- */
#multi-derevo {
width: 220px; /* */
border: solid; /* */
border-color: silver gray gray silver;
border-width: 2px;
padding: 0 0 1em 0; /* */
font-size: 1.3em;
}
span { /* */
text-decoration: none;
display: block; /* */
margin: 0 0 0 1.2em;
background-color: transparent;
border: solid silver; /* */
border-width: 0 0 1px 1px; /* : */
}
span a { /* */
display: block;
position: relative;
top: .95em; /* */
background-color: #fff; /* */
margin: 0 0 .2em .7em; /* , */
padding: 0 0.3em; /* */
}
h4 { /* */
font-size: 1em;
font-weight: bold;
margin: 0;
padding: 0 .25em;
border-bottom: 1px solid silver;
}
h4 a {
display: block;
}
ul, li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
ul li {
line-height: 1.2em;
}
ul li ul {}
ul li ul li {
margin: 0 0 0 1.2em;
border-left: 1px solid silver; /* */
}
ul li.last ul li { /* , . */
border: none;
}
.marker { /* */
border-color: transparent transparent transparent gray;
border-style: solid;
border-width: .25em 0 .25em .5em;
margin: .35em .25em 0 0;
float : left;
width: 0px;
height: 0px;
line-height: 0px;
}
.marker.open { /* */
border-color: gray transparent transparent transparent;
border-width: .5em .25em 0 .25em;
}
/* IE 6 Fixup */
* html #multi-derevo * { height: 1%;}
* html .marker { border-style: dotted dotted dotted solid; }
* html .open { border-style: solid dotted dotted dotted; }
* This source code was highlighted with Source Code Highlighter .
完全なコードと動作例を参照してください。
記事のトピックの続き。 多くの人が期待するように、ノードは現在デプロイされています。
FF3、IE6-8、Opera 9、Google Chrome、Safari 4 Betaでテスト済み。
更新：
UPD 03/28/2009： IE 6をサポートするために変更が行われました（ alemiksに感謝）。
UPD 03/30/2009： IE6、Mac OS X 10.5.6 Safari 4 Beta 、 Firefox 3.0.0.7 、 Win7でIE8で動作 （ anton_ivanovにより確認 ）、テキストのタイプミスが修正されました（ ferrariに感謝）。
UPD 03/31/2009： cssにアウトラインのリンクを追加：リンクなし、指定：アクティブ、フォーカス。 デモが更新されました。
UPD 2009年4月4日： jQueryを使用してコードを変更しました。 これでノードが展開されました。 記事の詳細。
UPD 05/19/2011： ツリーの状態をCookiesに保存するオプションが作成されました 。
UPD 02/24/2012： 2番目の設計オプションが sanch3zのリクエストで作成 されました。