プログラムなどなど5
をテンプレートにして作成
開始行:
#contents
*dropdown menuでマウスオーバー(hover)を使う [#u80c0cbb]
**Free CSS Drop-Down Menu Framework を使う Feb2012((これ...
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.ht...
Home
</a></li>
<li class="dir"><a href="./" style="text-decoration: no...
<ul>
<li><hr color="#ffffff" size="1"></li>
<li><a href="http://hogehoge.hogehoge.jp/hogehoge/nunu...
<li><a href="http://hogehoge.hogehoge.jp/hogehoge/yaya...
......
</ul>
</li>
<li class="dir"><a href="./" style="text-decoration: no...
<ul>
<li><hr color="#ffffff" size="1"></li>
<li><a href="http://hogehoge.hogehoge.jp/oyoyo/rerere....
<li><a href="http://hogehoge.hogehoge.jp/huhuhu/ohoho....
......
</ul>
</li>
</ul>
タッチパッド(iPad や アンドロイド)のようにマウスオーバ...
(マウスがないからオーバーもありえない)デバイスへの対応...
<a href="./" style="text-decoration: none">
と「./」を指しておくと動作がきちんとする。~
インストラクションだと「#」となっているのだけども、そうす...
マウスのあるマシンのブラウザの動作がいまひとつなので、「....
**twitter bootstrap((http://twitter.github.com/bootstrap/...
twitter bootstrap では簡単に dropdown menu が実現できます。
<div class="dropdown">
<!-- Link or button to toggle dropdown -->
<ul class="dropdown-menu" role="menu" aria-labelledby="...
<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 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-tw...
に従って、CSSを加えるとそれだけでマウスオーバー(hover)...
ul.nav li.dropdown:hover ul.dropdown-menu{
display: block;
margin: 0;
}
タッチパッドでもそのままおっけい。
と思ったら、参考にしたコードの下にコメントがあり、
そのままじゃだめよ〜んと(margin: 0; が必要と)。~
こちらのテストでも指摘されて、修正したところ、動きがよく...
21日追記(上のコードは修正後のものです)
|Today:&counter(today);|Yesterday:&counter(yesterday);|To...
終了行:
#contents
*dropdown menuでマウスオーバー(hover)を使う [#u80c0cbb]
**Free CSS Drop-Down Menu Framework を使う Feb2012((これ...
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.ht...
Home
</a></li>
<li class="dir"><a href="./" style="text-decoration: no...
<ul>
<li><hr color="#ffffff" size="1"></li>
<li><a href="http://hogehoge.hogehoge.jp/hogehoge/nunu...
<li><a href="http://hogehoge.hogehoge.jp/hogehoge/yaya...
......
</ul>
</li>
<li class="dir"><a href="./" style="text-decoration: no...
<ul>
<li><hr color="#ffffff" size="1"></li>
<li><a href="http://hogehoge.hogehoge.jp/oyoyo/rerere....
<li><a href="http://hogehoge.hogehoge.jp/huhuhu/ohoho....
......
</ul>
</li>
</ul>
タッチパッド(iPad や アンドロイド)のようにマウスオーバ...
(マウスがないからオーバーもありえない)デバイスへの対応...
<a href="./" style="text-decoration: none">
と「./」を指しておくと動作がきちんとする。~
インストラクションだと「#」となっているのだけども、そうす...
マウスのあるマシンのブラウザの動作がいまひとつなので、「....
**twitter bootstrap((http://twitter.github.com/bootstrap/...
twitter bootstrap では簡単に dropdown menu が実現できます。
<div class="dropdown">
<!-- Link or button to toggle dropdown -->
<ul class="dropdown-menu" role="menu" aria-labelledby="...
<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 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-tw...
に従って、CSSを加えるとそれだけでマウスオーバー(hover)...
ul.nav li.dropdown:hover ul.dropdown-menu{
display: block;
margin: 0;
}
タッチパッドでもそのままおっけい。
と思ったら、参考にしたコードの下にコメントがあり、
そのままじゃだめよ〜んと(margin: 0; が必要と)。~
こちらのテストでも指摘されて、修正したところ、動きがよく...
21日追記(上のコードは修正後のものです)
|Today:&counter(today);|Yesterday:&counter(yesterday);|To...
ページ名: