ドロップダウンメニューを作りたい！初心者向けのサンプルを教えてください
- ドロップダウンメニューに関する初心者向けのサンプルを探している人のために、親メニューは画像で表示し、子メニューはCSSで表示する方法について教えてください。
- ドロップダウンメニューを作るためには、JavaScriptまたはCSS+HTMLのいずれかを使用する必要があります。縦並びに配置し、オンマウスで子メニューが展開するようにしたいと思っています。
- ネット上のサンプルでは、親メニューが全て画像で表示されるか、全てCSSで表示されるものがありますが、親メニューは画像で、子メニューはCSSで表示するものがなかなか見つかりません。初心者の私に教えていただける方がいらっしゃいましたら、どうぞご教授願いたいです。
- ベストアンサー
ドロップダウンメニューに関する質問。超初心者です。
ドロップダウンメニュー（親メニューだけgif画像で子メニューはcssで表示）を作りたいと思っています。 javascript又はCSS+htmlを使ってドロップダウンメニューを作りたいと良いサンプルを探しております。 親メニューは画像で、子メニューはcssで表示させたいと思います。 サイドメニューとして、縦並びに配置して、オンマウスで右側に子メニューのリストが展開するように。 ネット上でサンプルを探しているのですが、全部cssで展開だったり、全部画像で展開だったりして、 親メニューだけ画像で、子メニューはcssで表示というのがなかなかみつかりません。。 超超初心者の私にどなたかご教授願えないでしょうか。 よろしくお願い致します。m(_ _)m
- mig1
- お礼率51% (14/27)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
続き CanvasMenu.jsは var menuitem = [ {src:"/image/アイテム1画像.jpg",w:200,h:100,x:0,y:0}, {src:"/image/アイテム2画像.jpg",w:200,h:100,x:0,y:100}, {src:"/image/アイテム3画像.jpg",w:200,h:100,x:0,y:200}, {src:"/image/アイテム4画像.jpg",w:200,h:100,x:0,y:300}, {src:"/image/アイテム5画像.jpg",w:200,h:100,x:0,y:400} ] var count = 0; var canvas = document.getElementById("menumap"); /*@cc_on @if (@_jscript_version <= 5.8) canvas = G_vmlCanvasManager.initElement(canvas); /*@end@*/ var ctx = canvas.getContext('2d'); for(var i=0;i<menuitem.length;i++){ var img= new Image(); img.src = menuitem[i].src + "?" + new Date().getTime(); img.onload=(function(obj){ return function(event){ ctx.drawImage(this,obj.x,obj.y,obj.w,obj.h); } })(menuitem[i]); } canvas.onmousemove = function(e){ var submenu = []; var target = /*@cc_on @if (@_jscript_version <= 5.8) document.getElementById("menumap");@else@*/e.target;/*@end@*/ var rect = target.getBoundingClientRect(); var x = (e?e.clientX:event.clientX); var y = (e?e.clientY:event.clientY); var mouseX = x - rect.left; var mouseY = y - rect.top; for(var i=0;i<menuitem.length;i++){ if((menuitem[i].x < mouseX && mouseX < (menuitem[i].x + menuitem[i].w)) && (menuitem[i].y < mouseY && mouseY < (menuitem[i].y + menuitem[i].h)) ){ submenu = /*@if (@_jscript_version >= 5.8) document.querySelectorAll("div.main div.right ul"); @elif (@_jscript_version < 5.8) document.getElementById("submenu").getElementsByTagName("UL");@else@*/ document.querySelectorAll("div.main div.right ul");/*@end@*/ submenu[i].style.display = "block"; for(var j=0;j<submenu.length;j++) if(!(i==j)) submenu[j].style.display = "none"; } } } ※おやっ、ＩＥ８でも-ms-column-count:2;とか-msbreak-after: column; がきかないぞ！ まあこの辺はfloat使って配置するように変えればいいだけだから．．。
その他の回答 (2)
- yyr446
- ベストアンサー率65% (870/1330)
javascriptで、左側の親メニューに画像を描画し、 右側のリストはCSSで表示・非表示を制御した。 HTMLとCSSは、 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Button Canvas By HTML5</title> <style type="text/css"> div.main { -moz-column-count: 2; -webkit-column-count: 2; -o-column-count: 2; -ms-column-count: 2; text-align:center;margin:10px auto 10px; } div.main div.left{ break-after: column; -moz-break-after: column; -webkit-break-after: column; -o-break-after: column; -msbreak-after: column; } div.main div.right ul{ display:none; } </style> <!--[if lt IE 9]><script type="text/javascript" src="/jslib/excanvas.js"></script><![endif]--> </head> <body> <h2 style="text-align:center">Button Canvas By HTML5 or IE(excanvas.js)</h2> <div class="main"> <div class="left"> <canvas id="menumap" width="200" height="500" style="border:1px solid black"></canvas> </div> <div class="right" id="submenu"> <ul><li>1-1</li><li>1-2</li><li>1-3</li></ul> <ul><li>2-1</li><li>2-2</li><li>2-3</li></ul> <ul><li>3-1</li><li>3-2</li><li>3-3</li></ul> <ul><li>4-1</li><li>4-2</li><li>4-3</li></ul> <ul><li>5-1</li><li>5-2</li><li>5-3</li></ul> </div> </div> <script type="text/javascript" src="CanvasMenu.js"></script> </body> </html> ※excanvas.jsは↓ http://code.google.com/p/flot/source/browse/trunk/excanvas.js から拾ってくる。 ※CanvasMenu.js は続く．．
- fujillin
- ベストアンサー率61% (1594/2576)
＞親メニューだけgif画像で子メニューはcssで表示 画像（=表示内容)、CSS（=表示指定の技法）なので、並列されても意味がよくわかりません。 「CSSで親メニューに画像を指定」とか「ドロップダウンをCSSで実現」とかならわかりますが… 想像するところ、親メニューだけは画像ボタンなどで、それ以降のメニューはテキストのみという意味でしょうか？ javascriptへのご質問なので、ドロップダウンの機能はjavascriptで実現しているってことでも良いのでしょうか？ それでよいのなら… テキストベースで機能するメニューで適当なものが見つかれば可能だと想像されます。 1）（画像が共通のものを使用できる場合） 親メニューだけCSSで背景画像を指定しておく。 （個別の場合でも、個々に指定するという方法もあります） 2）（画像が個別の場合） 大抵のメニューが <li><a>text</a></li> のような構成となっているので、 <li><a><img src="xxx" alt=""></a></li> のように、HTMLでイメージを表示しておく。（親メニューのみ） のような方法でいけるのではないでしょうか。 スクリプトを使わずにCSSだけで全て実現というのだと、方法が変わってくるかも…（すぐに思いつかない）
お礼
とても参考になりました。 どうもありがとうございます。m(_ _)m
関連するQ&A
- JavaScriptを使用する入れ子のドロップダウンメニューについて
仕事で、入れ子のドロップダウンメニューを作成することになりました。 入れ子でなく、通常のドロップダウンメニューを、 こちらのWebサイト↓ http://exyz.cocolog-nifty.com/good_sleep/2007/09/javascript_8131.html を拝見させて頂き、作成したのですが、 こちらの方法を応用して入れ子にしようとすると、 ドロップダウンメニューが使い物にならないものになってしまいます。 参考としては、こういったものを作りたいと考えています↓。 http://www.ebase.co.jp/solution/index.html こちらのWebサイトの、左側のメニューです。 カテゴリによって、２段になってます。 いろいろなサイトを調べてみましたが、 CSSによるものしか見当たらず、かつサンプルが、私のブラウザ(Sleipnir、IE)では見ることが出来ませんでした。 参考サイトのように、綺麗なドロップダウンメニューにするには、 一体どうしたらいいのでしょうか。 また、参考サイトは、親メニューの部分だけが画像で、 子メニュー部分は全てテキストになっていますが、 この、子メニューも画像で入れ子のドロップダウンメニューを 作成することは可能でしょうか？ 分かりにくい質問で申し訳ございません。 よろしくお願い致します。
- 締切済み
- JavaScript
- ドロップダウンメニューについて
JavascriptやJquoryを使わずにcssのみで、動きのあるドロップダウンメニューを作ることができました。 しかし、スマートフォンなどのタッチデバイスで動作確認をすると、メニューからサイドメニューが出っぱなしの状態になってしまい、引っ込んでくれません。 メニューの部分をクリックして開閉できるようにすればいいのでしょうか。やり方を教えて下さい。また、Javascriptを無効にしてる方でも問題なく使えるようにしたいです。
- 締切済み
- CSS
- タブレットのドロップダウンメニューについて
会社のWebの管理をしていますが、５年前に作ったサイトはJavaScriptを使ってドロップダウンにしました。 しかしタブレットではドロップダウンメニューが開かずページの遷移ができません。 メニューを修正してタブレットやスマホでもリンク先のページに遷移させるのにはどうしたら良いか教えて下さい。 商品のところはドロップダウンで20個程表示されます。 Webについてはほぼ素人でHTMLとCSSは独学で勉強し、JavaScriptは本やサイトのサンプルデータを使わせていただいていて、内容についてはあまり理解していません。 タブレットやスマホではそもそもドロップダウンメニューが使えないようなのですが。 サイトで検索しましたが、今一参考にできそうなサイトにたどりつけませんでした。 アドバイスよろしくお願いします。
- 締切済み
- JavaScript
- 全てが展開するドロップダウンメニュー
こんにちは。 サイトのメニューをドロップダウンメニューにしようかと 思っているのですが、MITSUBUSHIMOTORSのサイトの ような全てが展開するドロップダウンメニューがいいなと 思っているのですが、似たようなサンプルが見当たらず、 知っている方がいたらと思い投稿しました。 http://www.mitsubishi-motors.com/jp/index.html 似たようなものを知っている方がおりましたら 教えてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- ドロップダウンメニュー。
個人でＨＰを運営しているのですが、 この度、フレーム機能とドロップダウンメニューを使用してページを製作しました。 ところが、メニューから項目を選んでクリックしてちゃんと表示されるのですが、クリックしても何も表示されない部分（メニューの中の最初の表示部分や、ｈｔｍなど設定されていない部分）も何故か、何にもない真っ白なページが表示されてしまいます。 ドロップダウンメニューのソースはサンプルから頂いてきて、自分なりに何とか形になったのですが、上記のトラブルを解消するほどの知識がありません。 何卒、ご教授お願いいたします。 http://www003.upp.so-net.ne.jp/tochio-cinema/cinema_review.htm の右上にあるドロップダウンメニューです。 メニューの中の ＬＡＳＴ ＵＰＤＡＴＥと、その下の6/26をクリックすると、下のフレームが真っ白になってしまいます。
- ベストアンサー
- HTML
- ドロップダウンメニューについて
javascriptのドロップダウンメニューの作成について質問させてください。 現在、あるサイトでグローバルナビゲーションにドロップダウンメニューを実装しようとしているのですが、壁にあたってしまいました。 ↓参考サイト http://jsajax.com/EditRunDemo.aspx こういったドロップダウンメニューなのですが、これを例にあげさせてもらうと、例えばこのメニューのDownloadというページをクリックしてDownloadページに自分がいる時はDownloadのドロップダウンメニューを"出さない"ということがやりたいのです。 自分なりに色々とやってはみたものの、javascriptの経験が浅いので正直なところよくわからないのが現状です。 どなたかこのような事例のサンプルを紹介しているサイトをお知りの方、もしくは解決法をご教授いただければ幸いです。 そこまで至らなくてもどのような手法を取ればできそうかということだけでも良いのでご意見をください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- cssでのドロップダウンメニューについて
いつもお世話になっております。 すみません。。。 下記URLのテンプレートを使用して、かつ、ヘッダーのタブメニューに、プルダウンメニュー （タブにマウスオーバーすると、ドロップダウンでメニューが表示）を導入をこころみて いますが、どうしても、IE系（6,7,8）とFireFox系（３）で、表示が大幅にづれてしまいます。 なんとか、ドロップダウンのメニューのサンプルをご教示いただけませんでしょうか。 http://matthewjamestaylor.com/blog/ultimate-1-column-full-page-pixels.htm
- ベストアンサー
- HTML
- CSSのドロップダウンメニューが見出しで切れる
CSSでドロップダウンメニューを作りました。 ページの上部に横並びの状態です。 メニューを押すと下に4項目程度のリストが下がってきます。 今まで本文の見出しには<h1>タグを使用せず画像でのみで作っており、リストには影響がありませんでした。 <h1>を使用しCSSで装飾したところ、ドロップダウンメニューの<h1>にかぶる部分が切れてしまいます。 解決策はありますでしょうか。 宜しくお願い致します。
- ベストアンサー
- CSS
- ウェブサイト：グローバルナビのドロップダウンメニュー作成について
ezorisu-web CSSでドロップダウンメニュー http://ezorisu-web.com/web-design/archives/356 のサンプルを使用させていただき、ドロップダウン付グローバルナビゲーションをカスタマイズしていたところ、壁に当たってしまったので質問させてください。 上記サイトのサンプルどおりに作成したメニューはきちんと動きましたが、今回は添付データの画像のように、初期状態で見えている「一段目のメニュー」のみ画像を使用したいのです。 一段目のメニューにマウスオンで画像ロールオーバー＆上記リンク先サンプルのようにドロップダウンメニュー表示、という動作をさせたいと思っています。 一段目用の画像は、形が不定形で背景にも模様が入っているため、透過PNGを使用しております。 文字も画像化して統合してあります。 今回はIE6にも対応する必要があるため、 ITキヲスク | IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」 http://smkn.xsrv.jp/blog/2009/02/dd_belatedpng_js/ にて配布している「DD_belatedPNG.js」を導入しました。 また、CSSを使い、背景をスライドさせて実現させるタイプのロールオーバー処理を施してあります。 http://www.1uphp.com/con2/over/over3.html を参考に、画像は１枚絵にせずメニュー名別に分割してあります。 ここのリスト化とロールオーバーまではきちんと動きました。 ただ、これを組み合わせると挙動がおかしくなります。 一番上のリンク先のサンプルを基に一段目に背景画像を設定すると、二段目に背景画像が継承されてしまい、思うように表示されません。 添付画像のような動きを実現させるには、どのようなソースを書けば良いでしょうか。 分かりにくい点があるかと思いますが、必要事項あれば追記しますので、よろしくお願いいたします。
- ベストアンサー
- CSS
- ドロップダウンメニュー
このようなドロップダウンメニューを作りたいのですが、サンプル等、参考になるURLをご存知の方、よろしくお願いいたします。 http://www.adenin.com/EnterprisePortal.html それと、HPビルダーに使うことは可能でしょうか？
- 締切済み
- ホームページ作成ソフト
お礼
初めて見る方法で目からウロコでした。 どうもありがとうございます。m(_ _)m