dropdown menuでマウスオーバー(hover)を使う

Free CSS Drop-Down Menu Framework を使う Feb2012*1

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*2 20Jan2013

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:1Yesterday:0Total:1830 since 20 January 2013

*1 これを書いたのは20Jan2013
*2 http://twitter.github.com/bootstrap/

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 21 Jan 2013 (月) 10:29:55 (2558d)