プログラムなどなど5 の変更点

追加された行はこの色です。
削除された行はこの色です。
プログラムなどなど5 へ行く。
プログラムなどなど5 の差分を削除
#contents


*dropdown menuでマウスオーバー（hover）を使う [#u80c0cbb]

**Free CSS Drop-Down Menu Framework を使う Feb2012((これを書いたのは20Jan2013)) [#mcb52ee4]

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">その１</a>
   <ul>
   <li><hr color="#ffffff" size="1"></li>
   <li><a href="http://hogehoge.hogehoge.jp/hogehoge/nununu.html">枝１－１</a></li>
   <li><a href="http://hogehoge.hogehoge.jp/hogehoge/yayaya.html">枝１－２</a></li>
 ......
  </ul>
  </li>
  <li class="dir"><a href="./" style="text-decoration: none">その２</a>
   <ul>
   <li><hr color="#ffffff" size="1"></li>
   <li><a href="http://hogehoge.hogehoge.jp/oyoyo/rerere.html">枝２－１</a></li>
   <li><a href="http://hogehoge.hogehoge.jp/huhuhu/ohoho.html">枝２－２</a></li>
 ......
  </ul>
  </li>
 </ul>

タッチパッド（iPad や アンドロイド）のようにマウスオーバーがない
（マウスがないからオーバーもありえない）デバイスへの対応として

  <a href="./" style="text-decoration: none">

と「./」を指しておくと動作がきちんとする。~
インストラクションだと「#」となっているのだけども、そうすると
マウスのあるマシンのブラウザの動作がいまひとつなので、「./」とした。


**twitter bootstrap((http://twitter.github.com/bootstrap/)) 20Jan2013 [#ob2feed6]

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; が必要と）。~
こちらのテストでも指摘されて追加したところ、動きがよくなりました。~
と思ったら、参考にしたコードの下にコメントがあり、
そのままじゃだめよ～んと（margin: 0; が必要と）。~
こちらのテストでも指摘されて、修正したところ、動きがよくなりました。~
21日追記（上のコードは修正後のものです）



|Today:&counter(today);|Yesterday:&counter(yesterday);|Total:&counter(); since 20 January 2013|