http://www.lwis.net/free-css-drop-down-menu/ のフリーのスタイルシート(CSS)をいただいて実現する。
dropdown menu を作るのは難しくないけれども、
幅とか矢印?(caret?)とかのカスタマイズがちょっと面倒。
CSSはそれほど複雑じゃないけれども文字を眺めながら調整する。
コードは下のような感じ(某サイトで2012年4月1日から稼動)
<ul id="nav" class="dropdown dropdown-horizontal"> <li class="dir"> <a href="http://hogehoge.hogehoge.jp/hogehoge/index.html"> Home </a></li> <li class="dir"><a href="./" style="text-decoration: none">その1</a> <ul> <li><hr color="#ffffff" size="1"></li> <li><a href="http://hogehoge.hogehoge.jp/hogehoge/nununu.html">枝1−1</a></li> <li><a href="http://hogehoge.hogehoge.jp/hogehoge/yayaya.html">枝1−2</a></li> ...... </ul> </li> <li class="dir"><a href="./" style="text-decoration: none">その2</a> <ul> <li><hr color="#ffffff" size="1"></li> <li><a href="http://hogehoge.hogehoge.jp/oyoyo/rerere.html">枝2−1</a></li> <li><a href="http://hogehoge.hogehoge.jp/huhuhu/ohoho.html">枝2−2</a></li> ...... </ul> </li> </ul>
タッチパッド(iPad や アンドロイド)のようにマウスオーバーがない (マウスがないからオーバーもありえない)デバイスへの対応として
<a href="./" style="text-decoration: none">
と「./」を指しておくと動作がきちんとする。
インストラクションだと「#」となっているのだけども、そうすると
マウスのあるマシンのブラウザの動作がいまひとつなので、「./」とした。
twitter bootstrap では簡単に dropdown menu が実現できます。
<div class="dropdown"> <!-- Link or button to toggle dropdown --> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Separated link</a></li> </ul> </div> twitter bootstrap の ドキュメント(components.html)より
ですが、そのままではマウスオーバー(hover)が使えません。
そこで、
http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click/8878666#8878666
に従って、CSSを加えるとそれだけでマウスオーバー(hover)が実現。
ul.nav li.dropdown:hover ul.dropdown-menu{ display: block; margin: 0; }
タッチパッドでもそのままおっけい。
と思ったら、参考にしたコードの下にコメントがあり、
そのままじゃだめよ〜んと(margin: 0; が必要と)。
こちらのテストでも指摘されて、修正したところ、動きがよくなりました。
21日追記(上のコードは修正後のものです)
Today:1 | Yesterday:0 | Total:2640 since 20 January 2013 |