左のメニューを開いたり閉じたり。

左側のメニューが、長すぎだったので、ちょっといじってみた。ただし、Firefoxで使えることしか確認してない。IEでは、駄目。IE使わないから問題なし。*1
閉じるようにしたのは、最新タイトルと、カテゴリーと、RSSモジュール使ってるはてな告知。はてな告知は、さらに概要を飛び出すようにしてみた。
ソースはこんな感じ。

HTML

	<div id="menu-section" class="smenu">
		<a class="open" href="#">▽</a>
		<a class="close" href="#">△</a>
		<hatena template="hatena-module" name="section">
	</div>

	<div id="menu-sectioncategory" class="smenu">
		<a class="open" href="#">▽</a>
		<a class="close" href="#">△</a>
		<hatena template="hatena-module" name="sectioncategory">
	</div>

	<div id="menu-rssnews" class="smenu">
		<a class="open" href="#">▽</a>
		<a class="close" href="#">△</a>
		<hatena name="rss" template="hatena-module hatena-news" desclength="1000" dateformat="%c/%e %H:%i" url="http://r.hatena.ne.jp/kou21058/%E3%81%AF%E3%81%A6%E3%81%AA%E5%91%8A%E7%9F%A5/rss">
	</div>

CSS

/* 閉じたり開いたりするメニュー。*/
div.smenu {
 position : relative; /* 「▽」と「△」のため。 */
}
div.smenu a.open, div.smenu a.close { /* 「▽」と「△」。 */
 text-decoration : none; /* 効いてない? */
 position : absolute;
 top : 15px;
 left : 15px;
 display : block;
}
div.smenu a.open, /* 最初の「▽」 */
div.smenu a.open:focus + a { /* 「▽」を選択した時の「△」。 */
 z-index : 1; /* 出す。 */
}
div.smenu a.close, /* 最初の「△」 */
div.smenu a.open:focus { /* 「▽」を選択。 */
 z-index : -1; /* 隠す。 */
}
div.smenu div.hatena-moduletitle + div.hatena-modulebody { /* 最初は本体非表示。 */
 display : none;
}
div.smenu:hover div.hatena-moduletitle /* メニューに乗っかってる。 */
 + div.hatena-modulebody,
div.smenu a.open:focus + a + div.hatena-module div.hatena-moduletitle /* openが選択されてる。 */
 + div.hatena-modulebody { /* 本体表示。 */
 display : block;
}

div#menu-rssnews div.hatena-moduletitle {
 text-indent : 1em; /* 「▽」のためにずらす。 */
}

div#menu-rssnews dt + dd { /* タイトルに乗っかってない時は、概要非表示。 */
 display : none;
}
div#menu-rssnews dt:hover + dd { /* rssで、タイトルに乗っかった時に概要を開く。 */
 display : block;
 width : 500px;
 z-index : 5;
 background-color : #fff;
 color : #000;
 border : solid #000 1px;
 padding : 5px;
}
div#menu-rssnews dl.hatena-rss dt a { /* rssの日付とリンクの行を分ける。 */
 display : block;
}

最初はこんな感じ。

枠の中にマウスをもってくと開く。

▽をクリックすると、枠の外にマウスが行っても、開いたまま。

正確には、クリックじゃなくて、選択する。押して、他に動かして、放す感じ。でもクリックで大丈夫っぽい。
実は、△は必要ない。▽の選択を解除するだけ。ほかのリンクをクリックしても、リンク以外をクリックしても、解除される。

はてな告知の飛び出すやつ。

タイトルのリンクの上に乗せると、タイトルのタイトル*2が飛び出すけど、Firefoxだと全部は表示しないようで。これ、表示できるんだっけか。:afterとか、contentとかか。*3

ちょっとした解説。

div.smenu {
 position : relative; /* 「▽」と「△」のため。 */
}
div.smenu a.open, div.smenu a.close { /* 「▽」と「△」。 */
 text-decoration : none; /* 効いてない? */
 position : absolute;
 top : 15px;
 left : 15px;
 display : block;
}

これで、二つの三角を同じ場所に表示してる。text-decoration:none;で下線を消してるはずなんだけど、表示されてる。なんでだろ。

div.smenu a.open, /* 最初の「▽」 */
div.smenu a.open:focus + a { /* 「▽」を選択した時の「△」。 */
 z-index : 1; /* 出す。 */
}
div.smenu a.close, /* 最初の「△」 */
div.smenu a.open:focus { /* 「▽」を選択。 */
 z-index : -1; /* 隠す。 */
}

▽がa.open、△がa.close。
html的には、

<div class="smenu">
 <a class="open" href="#">▽</a>
 <a class="close" href="#">△</a>
 <div class="hatena-module">
  <div class="hatena-moduletitle"><a>…</a></div>
  <div class="hatena-modulebody">

になってる。
smenu は、Small MENUか何かの略。最初ポップアップメニューとか書こうと思ったんだけど、これはポップアップメニューとは違うよなぁ。

で、"div.smenu a.open:focus + a"は、"+ a"で次の要素を表してるわけですね。次、というか、兄弟。すぐ後の弟だけらしい。*4

":focus"は選択されてる要素。疑似クラスと言うらしい。*5

'href="#"'としてるのは、href抜きでやったらうまくいかなかったから。

z-indexは、重なってる順番をいじる。0が普通の状態で、値が大きいと、上、というか、手前側。それで、"z-index:-1;"で隠れるわけですな。"display:none"と違って存在はしてる。*6

div.smenu div.hatena-moduletitle + div.hatena-modulebody { /* 最初は本体非表示。 */
 display : none;
}

で、本体の非表示。
わざわざ"+"を使ってるのは、IEよけですな。IEは"+"に対応してないので、非表示にならなくて、はっぴー、と。*7

で、

div.smenu:hover div.hatena-moduletitle /* メニューに乗っかってる。 */
 + div.hatena-modulebody,
div.smenu a.open:focus + a + div.hatena-module div.hatena-moduletitle /* openが選択されてる。 */
 + div.hatena-modulebody { /* 本体表示。 */
 display : block;
}

が、表示する部分。
"div.smenu:hover"で、マウスが乗っかってるのを表してる、と。":focus"と同じく疑似クラスってやつですな。*8
単に、"div.hatena-modulebody"ではなく、"div.hatena-moduletitle + div.hatena-modulebody"としてるのは、たぶん上の方の"+"つきのが優先しちゃうんだと思うんだけど、うまくいかなかったから。
"+"使いまくりだなぁ。

(
 ( div.smenu:hover div.hatena-moduletitle ),
 ( div.smenu a.open:focus + a + div.hatena-module div.hatena-moduletitle )
) + div.hatena-modulebody

とかやりたいんだけど、できるのかなぁ。*9

まぁ、そんな感じ。

*1:IEでも問題はない、長すぎだけど。

*2:ややこし。

*3:使ったことないなぁ。

*4:△は後で追加したのだけど、それまで"a.open + div.hatena-module"としてたのが、そのままじゃだめになった。"+"を"+ a +"にする必要がある。

*5:説明発見。ってか、ここいいなぁ。http://www6.plala.or.jp/go_west/nextcss/ref/slctr/ps_clas.htm#active_p

*6:最初、△を"display:none"でやってたら、タブで移動してたら抜け出せなくなってしまった。

*7:"+"は隣接セレクタというのか。http://www6.plala.or.jp/go_west/nextcss/ref/slctr/slctr.htm#adjacent

*8:おっと、「擬似」って書いてた。

*9:ためしてない。