• 締切済み

cssとjavascriptでプルダウンメニュー

お世話になります。 いろいろとサンプルを試し、ハマっています・・・。どなたか助けてください！ 今下記のようなソースでメニューを作っています。 <ul id="globalnavi"> <li id="a"><a href="#">a</a></li> <li id="b"><a href="#">b</a> <ul id="subnav"> <li><a href="#">b-1</a></li> <li><a href="#">b-2</a></li> <li><a href="#">b-3</a></li> </ul> </li> <li id="c"><a href="#">c</a></li> </ul> このソースで、親階層のメニューは画像、submenuはテキストで表現したいのですが、FFやIE7、IE6、safariに使える方法でなにか簡単なものありましたら、教えていただきたいです。 よろしくお願い致します！

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

う～～ん。　想像するところ… 親は「画像＋テキスト」あるいは「画像」で、子はテキストのみの表示で、それぞれリンクがあって、階層メニューになっているので、親をクリックすると子が表示される・・みたいなことを考えているのだろうか？ でも、これだと親をクリックすると（リンクがあるので）新しいURLへ飛んじゃうから、子は表示されないなぁ。 「階層　メニュー」あたりで検索すると、いろんなパターン（実現方法も含めて）のものがヒットするので、気に入ったものをアレンジするのが一番簡単では？ 　http://www.google.com/search?q=%e9%9a%8e%e5%b1%a4%e3%80%80%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc

2pola4
質問者

お礼

すみません、かなりあせっていて、質問がわかりづらかったですね。 でもいいサンプルサイトをありがとうございます。こちらから参考となるものを使わせていただきます！

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

どうしたいかが抜けてますが・・・？ 親をクリックしたら子が表示でよいの？ それとも単に画像とテキストにしたいだけ？ 画像にした時のリストの箇条書きはどうするつもり？

2pola4
質問者

お礼

＞どうしたいかが抜けてますが・・・？ 本当にその通りでした・・・。申し訳ございませんでした。ご指摘ありがとうございます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • CSSのプルダウンメニュー

    menu1とmenu2の挙動について疑問があります。 添付画像をご覧ください。 menu2からsub4-1を選択している状態です。 この時、menu2の背景色が赤に戻らないのは仕様でしょうか？ それとも何か間違っているのでしょうか？ 背景を画像にしても同じ結果になります。 -------------------------------------------- ul#menu li{ float:left; list-style-type:none; text-align:center; } ul#menu ul li{ clear:both; } ul#menu li a,.menu1,.menu2{ display:block; width:200px; height:50px; line-height:50px; text-decoration:none; background:#ff0000; } ul#menu li a:hover,.menu1:hover,.menu2:hover{ background:#ffcc00; } ul#menu ul{ display:none; } ul#menu li:hover > ul{ display:block; position:absolute; } ul#menu ul ul{ margin:-50px 0 0 200px; } --------------------- <ul id="menu"> <li class="menu1">menu1</a> <ul> <li><a href="#">sub1</a> <ul> <li><a href="#">sub1-1</a></li> <li><a href="#">sub1-2</a></li> </ul> </li> <li><a href="#">sub2</a></li> </ul> </li> <li class="menu2">menu2</a> <ul> <li><a href="#">sub3</a></li> <li><a href="#">sub4</a> <ul> <li><a href="#">sub4-1</a></li> <li><a href="#">sub4-2</a></li> </ul> </li> </ul> </li> </ul> ------------------ お分かりになる方よろしくお願いします。

    • 締切済み
    • CSS
  • css　でのプルダウン子階層の色について

    こんばんは。初心者で質問自体説明不足かもしれませんが、 どなたかご教授願えたら幸いです。 前回も似たような内容で教えていただいたんですが、 知識不足で少し変わると応用する事ができず、困っております（涙） ＣＳＳでサイトを制作しており、ＣＳＳでできる、 画像を使用した横型プルダウンメニュー（プルダウンは縦）を設置しました。 表示中のページがわかるように、 以下の様に、bodyにidをつけて、bacground-positionをマイナスして画像の下側を 表示させているのですが、子メニューが親メニューと一緒にpositionがマイナス されて、current時のボタン表示になってしまいます。 ****************************************** <body id="01"> <menu> <ul> <li id="menu1"><a href="#">menu</a> <ul> <li id="submenu1"><a href="#">submenu</a></li> <li id="submenu2"><a href="#">submenu</a></li> </ul> </li> </ul> </menu> </body> --------css---------------------------- #menu {width:835px; ～(etc)} #menu #menu1 a {background-image:url(image/***.jpg);width:65px;} #menu #submenu1 a {background-image:url(image/***.jpg);width:65px;} #menu #submenu1 a {background-image:url(image/***.jpg);width:65px;} #menu #current a {background-position:0 -40px;} #p01 #menu #menu1 a {background-position:0 -40px;} ****************************************************** 親メニューのボタンだけのpositionをマイナスにして、 子メニューは適用しない方法を教えて頂けますでしょうか・・・。 また、子メニューの方にも表示中のページをわかるようにするには、 どこにどのような記述をすればよかったでしょうか？ 上記のソースに何か追加や修正をしてできるものがあれば、 大変助かります。 説明不足ですみませんが、どうぞよろしくお願い致します。

    • 締切済み
    • CSS
  • html,cssプルダウンメニューについて教えてください。

    html,cssプルダウンメニューについて教えてください。 現在html,cssのみでプルダウンメニューを作成しているのです、解決のできない問題点が あり困っています。どなたか知識のある方、教えていただけると嬉しいです。 [問題点] オンマウスでプルダウンメニュー表示時、その表示分だけ、親要素の<div>の 高さが広がってしまい、それに伴いそれ以下のページ内要素全て下にずれてきます。 (分かりにく表現で申し訳ありません） 出来れば、プルダウンメニューが表示されても、親要素の高さは変わらず、以下のタグ要素の 上に重なって表示させたいと思っています。 対処法がお分かりになる方、教えて頂けると幸いです。 [html] <div id="main_menu"> <div id="navi"> <ul> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu04.gif"></a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> </ul> </li> <li class="navi_menu1" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu05.gif"></a> <ul class="sub"> <li class="navi_menu1"><a href="#">サブメニュー 1</a></li> <li class="navi_menu1"><a href="#">サブメニュー 2</a></li> </ul> </li> </ul> </div> </div> [css] #navi { width:993; margin:0 auto; border:0px solid red; padding:0px 39px 0px 0px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { float: left; margin: 0; width:120px; } #navi li.navi_menu1{ float: left; margin: 0; width:140px; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 0px 0; text-align: center; font-weight: bold; text-decoration: none; background-color: #3399ff; } #navi li a:hover { color: #ffffff; background-color: #3366cc; } #navi ul.sub { background: #eeeeee; } #navi ul.sub li { padding:5px 0px 0px 0px; float: none; height:25; } #navi ul.sub li.navi_menu1 { float: none; height:25; width:180; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding:0px 0; border-top:0px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border:0px solid #000099; } #navi li.navi_menu_on{ border:0px solid #000099;}

  • Javascriptでプルダウンメニューを作りましたが関数化できません

    <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> function foldmenu(i){ var i; for(j=1;j<=5;j++){ if(i==j) $('#sc'+j).toggle('normal'); else $('#sc'+j).hide(); } $(function(i){ $('#c'+i).click(function(){ for(j=1;j<=5;j++){ if(i==j) $('#sc'+j).toggle('normal'); else $('#sc'+j).hide(); } }); }); } </script> <div id="c1" onClick="foldmenu('1')">1</div> <ul id="sc1"> <li><a href="#">入力画面1-1</a></li> <li><a href="#">入力画面1-1</a></li> </ul> <div id="c2" onClick="foldmenu('2')">2</div> <ul id="sc2"> <li><a href="#">入力画面2-1</a></li> <li><a href="#">入力画面2-2</a></li> </ul> <div id="c3" onClick="foldmenu('3')">3</div> <ul id="sc3"> <li><a href="#">入力画面3-1</a></li> <li><a href="#">入力画面3-2</a></li> </ul> <div id="c4" onClick="foldmenu('4')">4</div> <ul id="sc4"> <li><a href="#">入力画面4-1</a></li> <li><a href="#">入力画面4-2</a></li> </ul> <div id="c5" onClick="foldmenu('5')">5</div> <ul id="sc5"> <li><a href="#">入力画面5-1</a></li> <li><a href="#">入力画面5-2</a></li> </ul> と関数化しましたがうまく動きません。 初期状態では1の部分が開く。 それ以降はクリックした部分が開き開いていた部分は閉じるという感じにしたいです。 縦長のプルダウンメニューです。 たてに1から5が並んでいて、1をクリックすると１と2の間に1の子カテゴリーが表示されます。 困っています。教えてください。

  • ブラウザでjavascriptのプルダウンメニューが効かない！？

    初めての症状なのですが、、 グローバルメニューの部分でプルダウンメニューを使っているサイト（プルダウン部分はjavascriptを使っています）をサーバーにアップしたのですが、 サーバー上で、プルダウンメニューがでてきません。作動しません。。 ローカルでは、firefox, IE, safari, 全て動作確認済みなのですが、、 もちろん、jsファイルもアップしてあります。 他のポップアップウィンドウなどで使用しているjavascriptは正常に動いてるようなのですが、、、 このような現象ありえるのでしょうか？ どなたかお分かりになる方がいらっしゃいましたら、ご教授願えないでしょうか？宜しくお願い致します。 ちなみにプルダウン部分のhtmlです。 javascriptは外部から読み込むようにしてます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta name="keywords" content="Australia, restaurant"> <meta name="description" content="ーー料理" /> <title>Salt | Access</title> <link href="css/import.css" rel="stylesheet" type="text/css" media="all" /> <script src="js/SpryMenuBar.js" type="text/javascript"></script> <script type="text/javascript"><!-- window.onload = function(){ new Spry.Widget.MenuBar("MenuBar1"); } // --></script> </head> <body> <div id="bg2"> <div id="wrapper"> <div id="header"> <div id="h1"><a href="index.html"><img src="img/img_logo.jpg" alt="Salt" width="89" height="83" border="0" /></a></div> <div id="navi" lang="en"> <ul id="MenuBar1" class="MenuBarHorizontal clearfix"> <li id="orange_menu"></li> <li class="first"><a href="index.html" id="first_hover" class="MenuBarItemSubmenu">Top</a></li> <li class="first"><a href="concept.html" id="first_hover" class="MenuBarItemSubmenu">Concept</a></li> <li class="first"><a href="food.html" id="first_hover" class="MenuBarItemSubmenu">Food</a> <ul> <li><a href="lunch3500.html">Lunch</a> <ul> <li><a href="lunch3500.html">Lunch Course 3500</a></li> <li><a href="food.html">Lunch Course 5000</a></li> </ul> </li> <li><a href="raw.html">Dinner</a> <ul> <li><a href="raw.html">Entrees</a></li> <li><a href="main.html">Mains</a></li> <li><a href="vegetable.html">Vegetable Menu</a></li> <li><a href="degustation.html">Degustation</a></li> <li><a href="desserts.html">Desserts and Cafe</a></li> </ul> </li> <li><a href="holiday.html">Holiday Course</a></li> </ul> </li> <li class="first"><a href="wine.html" id="first_hover" class="MenuBarItemSubmenu">Wine</a> <ul> <li><a href="wine.html" class="MenuBarItemSubmenu">Glass</a></li> <li><a href="bubbly_pink.html">Bubbly and PINK</a></li> <li><a href="maritime_white.html">White</a> <ul> <li><a href="maritime_white.html">Maritime</a></li> <li><a href="mediterranean_white.html">Mediterranean</a></li> <li><a href="Altitude_white.html">Altitude</a></li> </ul> </li> <li><a href="maritime_red.html">Red</a> <ul> <li><a href="maritime_red.html">Maritime</a></li> <li><a href="distinctively_red.html">Distinctively Cool</a></li> <li><a href="old_vine.html">Old Vine</a></li> </ul> </li> <li><a href="stickies.html">Stickies</a></li> </ul> <li class="first"><a href="spaces.html" id="first_hover" class="MenuBarItemSubmenu">Spaces</a></li> <li class="first"><a href="access.html" id="first_hover" class="MenuBarItemSubmenu">Access</a></li> <li class="first"><a href="http://www.sweet-w.com/space/salt.html" id="first_hover" class="MenuBarItemSubmenu">Wedding</a></li> <li id="menu_right"></li> </ul> </div> 以下続く。。。

  • プルダウンメニューのcurrentの使い方

    こんばんは。初心者で質問自体説明不足かもしれませんが、 どなたかご教授願えたら幸いです。 ＣＳＳでサイトを制作しており、ほぼＣＳＳでできる横型プルダウンメニューを設置しました。 以下の様に「current」を使用して現在ページのメニューボタンの色を変えているのですが、 <ul> <li class="current"><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> </ul> </li> </ul> 上記のプルダウンメニューだと、入れ子の子メニューにも「current」 が適用されて、一緒に色が変わってしまいます。 親メニューのボタンの色だけを変えて、 子メニューの色まで変えない事はできるのでしょうか・・・。 ちなみに、currentで表示させる色と、子メニューのロールオーバー時の色は一緒です。 説明不足ですみませんが、どうぞよろしくお願い致します。

    • ベストアンサー
    • CSS
  • jqueryでのプルダウンメニューについて

    jqueryでのプルダウンメニューについて こんにちは。 現在私はWEBサイトを製作中です。 メインメニューにプルダウンをつけたいのですが、うまくいきません。 メニューはロールオーバーでの表示（CSSでやってます）です。 slideDownを使用しているのですが、 マウスオーバー時にslidDownで表示された、 サブメニューの背景が、上の要素の背景になってしまいます。 つまり、下のコードでいくとid="sub"の背景がそのまま clas="sub"の"li"要素の背景になってしまうということです。 何か対策はありますでしょうか？ html <div id="head"> <ul id="globalnavi"> <li id="gh"><a href=".">メニュー</a> <ul class="sub"> <li><a href="">サブメニュー</a></li> </ul> </li> </ul> </div> <div id="main"> </div> jquery $(function(){ $("ul.sub").hide(); $("ul#globalnavi>li").hover(function(){ $("ul:not(:animated)", this).slideDown();}, function(){$("ul.sub",this).slideUp();}); }); CSS #globalnavi a{ background-image : url(../img/navi.png); background-repeat : no-repeat; display : block; width : 160px; height : 36px; color : #333333; text-decoration : none; line-height : 36px; } #header #globalnavi li { list-style-type : none; float : left; width : 160px; position : relativ; } #header #globalnavi { clear : both; width : 960px; line-height : 36px; overflow : hidden; position : relative; text-align : center; display : block; } ul,li{ margin:0; padding:0; } .sub li{ float : none; background-color : #FFF; } #gh a{ background-position :0 0; } #gh a:hover{ background-position :0 -36px; } ロールオーバー自体はうまくいっています。 他にプルダウンの方法あるよ、などありましたら教えてください。 よろしくお願いします。

  • メニューをJavaScriptで一括更新させたい

    いつもお世話になっております。 ページが増えてしまったので、 横並びのメニューをjavaScriptで一括更新できるようにしたいのですが、 JavaScriptが勉強不足でうまく記述できません。（これから勉強していくつもりです） 今回は急ぎのため時間がなく… どうかアドバイス等、記述を教えていただけないでしょうか？ 宜しくお願いいたします。 現在メニューはこのように１ページごと書いてあります。 <div id="globalnavi"> <ul> <li id="menu1"><a href="#">Home</a></li> <li id="menu2"><a href="#">menu</a></li> <li id="menu3"><a href="#">menu</a></li> <li id="menu4"><a href="#">menu</a></li> <li id="menu5"><a href="#">menu</a></li> <li id="menu6"><a href="#">menu</a></li> <li id="menu7"><a href="#">menu</a></li> </ul> </div> CSS↓----------------------------------------------- #globalnavi{ margin: 0; padding: 0; width: ***; height: 40px; } #globalnavi ul{ list-style-type: none; margin: 0; padding: 0; } #globalnavi li{ text-indent: -9999px; float:left; width: 100px; margin: 0; padding: 0; } #globalnavi a{ display: block; width: 100%; height: 40px; background-image: url(画像のパス); background-repeat: no-repeat; } #menu1 a{background-position: 0 0;} #menu2 a{background-position: -100px 0;} #menu3 a{background-position: -200px 0;} #menu4 a{background-position: -300px 0;} #menu5 a{background-position: -400px 0;} #menu6 a{background-position: -500px 0;} #menu7 a{background-position: -600px 0;} #globalnavi a:hover{ background-image: url(画像のパス); background-repeat: no-repeat; } #menu1 a:hover{background-position: 0 -40px;} #menu2 a:hover{background-position: -100px -40px;} #menu3 a:hover{background-position: -200px -40px;} #menu4 a:hover{background-position: -300px -40px;} #menu5 a:hover{background-position: -400px -40px;} #menu6 a:hover{background-position: -500px -40px;} #menu7 a:hover{background-position: -600px -40px;}

  • CSSを使用したクリックして開閉するプルダウンメニュー

    CSSを使用して「メニュー1」または「メニュー2」の文字ををクリックする度に、 ツリーメニュー（サブメニュー1、サブメニュー2、サブメニュー3）が 表示、非表示されるようにしたいと思っています。 JavaScriptは使用せずcssのみで、というのは可能でしょうか？ ソースコードは以下です。 <ul> 　<li>メニュー1 　　　<ul> 　　　　<li><a href="sub1-1.html">サブメニュー1</a></li> 　　　　<li><a href="sub1-2.html">サブメニュー2</a></li> 　　　　<li><a href="sub1-3.html">サブメニュー3</a></li> 　　　</ul> 　</li> 　<li>メニュー2 　　　<ul> 　　　　<li><a href="sub2-1.html">サブメニュー1</a></li> 　　　　<li><a href="sub2-2.html">サブメニュー2</a></li> 　　　　<li><a href="sub2-3.html">サブメニュー3</a></li> 　　　</ul> 　</li> </ul> オンマウスでは無く、クリックでサブメニューを開閉させたいと考えておりますが、 方法が見つからなく、ご質問させて頂きました。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • JavaScriptによる疑似プルダウンメニュー

    他の方が作成したサイトの管理を引き継ぎ更新していますが、サイドメニューに使用されているJavaScriptがわかりません。 現在のサイドメニューは、以下のようになっています。 ●米 ●果物 　○いちご　←初期状態は”display: none”、「果物」クリックで展開 ●野菜 　○トマト　←初期状態は”display: none”、「野菜」クリックで展開 ●味噌 この小要素を、以下のように増やしたいのです。 ●果物 　○いちご 　○りんご 　以下、数は可変 現在の該当部分のソースは、 【HTML】 <ul id="menu"> <li><a href="kome.html">米</a></li> <li><a href="#" onclick="kudamonoshow();">果物</a></li> 　<li id="line1" style="display: none;"><a href="kudamono01.html">　いちご</a></li> <li><a href="#" onclick="yasaishow();">野菜</a></li> 　<li id="line2" style="display: none;"><a href="yasai01.html">　トマト</a></li> <li><a href="miso.html">味噌</a></li> </ul> 【JS】 function kudamonoshow() { if (document.getElementById('line1').style.display == 'none') document.getElementById('line1').style.display='block'; else document.getElementById('line1').style.display='none'; } function yasaishow() { if (document.getElementById('line2').style.display == 'none') document.getElementById('line2').style.display='block'; else document.getElementById('line2').style.display='none'; } このソースで何が起きているかは理解しましたが、項目の増やし方が分かりません。 IDはページに一つということなので、試しにHTMLを <li><a href="#" onclick="kudamonoshow();">果物</a></li> <div id="line1" style="display: none;"> 　<li><a href="kudamono01.html">　いちご</a></li> 　<li><a href="kudamono02.html">　りんご</a></li> </div> と、隠したい部分に強引にdivを使いIDを指定したところ、FireFox（Win&Mac）およびSafari（Mac）では正常に動作しますがIE7では動作せず、常に全てのリストが表示されている状態になり、レイアウトも崩れてしまいます。 （IE6は現在手元にありません） IEでも動作させるにはどうしたらいいのでしょうか？ リストタグを使わない疑似プルダウンのソースは見つけましたが、このサイトでは他にもプログラムが色々動いているので、できれば変更は最小限にしたいと考えています。 足りない情報がありましたら追加します。よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する