- ベストアンサー
プルダウンメニューを設置したいのですが、下記のサイトのように、プルダウ
プルダウンメニューを設置したいのですが、下記のサイトのように、プルダウンで表示されたメニューが、カーソルを外しても表示されたままになるタイプのライブラリが見当たりません。。。 このようなタイプのプルダウンメニューを設置するにはどうすればよいでしょう？サンプルやライブラリでいいものがあれば教えてください！ http://www.kanazawa-kankoukyoukai.gr.jp/
- ima2008
- お礼率46% (70/151)
- JavaScript
- 回答数4
- ありがとう数0
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
大抵のオンマウスタイプのものはマウスがはずれると元の状態に戻るように作られているので、そのままでぴったりのものはあまりなさそう。 処理としては、元に戻す部分を省けるので簡単になるとはいえますが… クリックでオープンするタイプものもは開いた状態を維持するので、それのトリガーをオンマウスに変更して使うというのが簡単かもしれません。 ユーザー用にメソッドを開示しているものもあるので、そういうものなら比較的対処しやすいと思われます。 と言っているばかりでは役にも立たないでしょうから、かなりいい加減なものですが参考までのサンプルを… （文字数制限に引っかかったので、2回に分けます） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> #wrap, #wrap ul { width:610px; } #wrap { height:60px; background-color:#644; position:relative; } #wrap ul { list-style:none; padding:0; margin:0; height:30px; } #wrap ul#navi { background-color:#800; } #navi a { display:block; width:120px; height:30px; line-height:1.8em; color:#fff; text-decoration:none; text-align:center; overflow:hidden; } #navi li { float:left; border-left:1px solid #a77; border-right:1px solid #211; } #navi ul { position:absolute; } #navi ul.right li { float:right; } #navi a:hover { font-weight:bold; background-color:#d66; } #navi ul a:hover { background-color:#a55; } </style> </head> <body> <div id="wrap"> <ul id="navi"> <li><a href="a0.html">item0</a></li> <li><a href="b1.html">item1</a> <ul> <li><a href="b1.html">item1-1</a></li> <li><a href="b2.html">item1-2</a></li> <li><a href="b3.html">item1-3</a></li> </ul></li> <li><a href="c1.html">item2</a> <ul> <li><a href="c1.html">item2-1</a></li> <li><a href="c2.html">item2-2</a></li> </ul></li> <li><a href="d1.html">item3</a> <ul> <li><a href="d1.html">item3-1</a></li> <li><a href="d2.html">item3-2</a></li> <li><a href="d3.html">item3-3</a></li> <li><a href="d4.html">item3-4</a></li> </ul></li> </ul> </div>
その他の回答 (3)
- fujillin
- ベストアンサー率61% (1594/2576)
<!-- 続き --> <script type="text/javascript"> <!-- //@cc_on (function(target) { var u = target.getElementsByTagName("ul"); var i=0, e, en, w0, w = target.clientWidth; while (e = u[i++]) { en = e.getElementsByTagName("li"); en = en[en.length-1]; w0 = w - en.offsetLeft - en.clientWidth - 2; if (w0- e.offsetLeft < 0) e.style.left = w0 + "px"; e.style.display = "none"; } target./*@if(1)attachEvent('on' + @else@*/addEventListener(/*@end@*/ 'mouseover', sample, false); })(document.getElementById("navi")); function sample(evt) { var t = evt./*@if(1)srcElement @else@*/target /*@end@*/; var i, e, p = t.parentNode.parentNode; if (t.nodeName != "A" || p.id != "navi") return; e = t.nextSibling; while (e && e.nodeName == "#text") e = e.nextSibling; p = p.getElementsByTagName("ul"); for (i=0; i<p.length; i++) p[i].style.display = p[i] == e?"block":"none"; } //--> </script> </body> </html>
- yyr446
- ベストアンサー率65% (870/1330)
「アコーディオンメニュー」で探してみてはいかがでしょう。 http://jqueryui.com/demos/accordion/
- sanlouis
- ベストアンサー率33% (1/3)
こんばんは。 探してみましたが、確かに簡単には見つかりませんね。 ですが、結局はオンマウスで切り替わるタブインターフェースを応用されれば良いのではないでしょうか？ 以下のようなものです。 http://flowplayer.org/tools/demos/tabs/mouseover.html 画像がメニューで切り替わって表示される部分がサブメニュー。 同じことができると思います！
