ドロップダウンメニューに関する質問。超初心者です。

Question

ドロップダウンメニュー（親メニューだけgif画像で子メニューはcssで表示）を作りたいと思っています。

javascript又はCSS+htmlを使ってドロップダウンメニューを作りたいと良いサンプルを探しております。
親メニューは画像で、子メニューはcssで表示させたいと思います。
サイドメニューとして、縦並びに配置して、オンマウスで右側に子メニューのリストが展開するように。

ネット上でサンプルを探しているのですが、全部cssで展開だったり、全部画像で展開だったりして、
親メニューだけ画像で、子メニューはcssで表示というのがなかなかみつかりません。。

超超初心者の私にどなたかご教授願えないでしょうか。

よろしくお願い致します。m(_ _)m

yyr446 · Accepted Answer

続き
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使って配置するように変えればいいだけだから．．。

yyr446 · Answer

javascriptで、左側の親メニューに画像を描画し、右側のリストはCSSで表示・非表示を制御した。 HTMLとCSSは、 Button Canvas By HTML5

Button Canvas By HTML5 or IE(excanvas.js)

1-1
1-2
1-3

2-1
2-2
2-3

3-1
3-2
3-3

4-1
4-2
4-3

5-1
5-2
5-3

※excanvas.jsは↓ http://code.google.com/p/flot/source/browse/trunk/excanvas.js から拾ってくる。 ※CanvasMenu.js　は続く．．

fujillin · Answer

＞親メニューだけgif画像で子メニューはcssで表示画像（=表示内容)、CSS（=表示指定の技法）なので、並列されても意味がよくわかりません。「CSSで親メニューに画像を指定」とか「ドロップダウンをCSSで実現」とかならわかりますが… 想像するところ、親メニューだけは画像ボタンなどで、それ以降のメニューはテキストのみという意味でしょうか？ javascriptへのご質問なので、ドロップダウンの機能はjavascriptで実現しているってことでも良いのでしょうか？それでよいのなら… テキストベースで機能するメニューで適当なものが見つかれば可能だと想像されます。 1）（画像が共通のものを使用できる場合）　親メニューだけCSSで背景画像を指定しておく。　（個別の場合でも、個々に指定するという方法もあります）　 2）（画像が個別の場合）　大抵のメニューが　　

text

　のような構成となっているので、　　

　のように、HTMLでイメージを表示しておく。（親メニューのみ）のような方法でいけるのではないでしょうか。スクリプトを使わずにCSSだけで全て実現というのだと、方法が変わってくるかも…（すぐに思いつかない）

ドロップダウンメニューに関する質問。超初心者です。

続き

javascriptで、左側の親メニューに画像を描画し、

＞親メニューだけgif画像で子メニューはcssで表示

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング