- ベストアンサー
プルダウンナビゲーションについて
- CSSとJavascriptの知識がない状態で、Mootoolsのプルダウンナビゲーションを使用しようと試みています。
- Mootoolsのプルダウンナビゲーションを使用するために、指示通りにファイルを作成しましたが、デモページのようにうまく表示されません。
- 質問内容は、プルダウンナビゲーションの使用方法と、横並びのメニューを縦に並べて水平に展開する方法についてです。
- yasu16yasu
- お礼率75% (6/8)
- レンタルサーバ・ASP
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
三角画像を右クリックして保存したものは、メニューのコードを記述しているHTMLと同じ所（同じフォルダ）に置いてください。 <!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" lang="en" xml:lang="en"> <head> <link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" /> <link rel="stylesheet" type="text/css" href="ddsmoothmenu-v.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript" src="ddsmoothmenu.js"> </script> <script type="text/javascript"> ddsmoothmenu.init({ mainmenuid: "smoothmenu2", //Menu DIV id orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v" classname: 'ddsmoothmenu-v', //class added to menu's outer DIV //customtheme: ["#804000", "#482400"], contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"] }) </script> </head><body> <h2 style="margin-top:20px">Example 2</h2> <div id="smoothmenu2" class="ddsmoothmenu-v"> <ul> <li><a href="http://www.dynamicdrive.com">Item 1</a></li> <li><a href="#">Folder 0</a> <ul> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> </ul> </li> <li><a href="#">Folder 1</a> <ul> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> </ul> </li> <li><a href="#">Item 3</a></li> <li><a href="#">Folder 2</a> <ul> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Folder 2.1</a> <ul> <li><a href="#">Sub Item 2.1.1</a></li> <li><a href="#">Sub Item 2.1.2</a></li> <li><a href="#">Folder 3.1.1</a> <ul> <li><a href="#">Sub Item 3.1.1.1</a></li> <li><a href="#">Sub Item 3.1.1.2</a></li> <li><a href="#">Sub Item 3.1.1.3</a></li> <li><a href="#">Sub Item 3.1.1.4</a></li> <li><a href="#">Sub Item 3.1.1.5</a></li> </ul> </li> <li><a href="#">Sub Item 2.1.4</a></li> </ul> </li> </ul> </li> <li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li> </ul> <br style="clear: left" /> </div> </body></head>
その他の回答 (3)
作りたいのは以下のページのようなメニューで良いのでしょうかね？ [参考]Dynamic Drive DHTML Scripts- Smooth Navigational Menu http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm
お礼
この度もご回答頂きましてありがとうございます。 ご参考ページにありますようなメニューで間違いないです。 教えて頂きましたメニューも練習の為に自分なりに試してみました、両方を同時に記述した際にはしっかりと両メニューとも動作できるように表示できたのですが（三角の画像は入れられておりません。）、やりたい方のddsmoothmenu-vのパターンのみを表示した際に何故かオンマウスをすると第１階層のメニューも上下に動くようなものになったり、▶（右向き三角）の画像を入れる場所がわかないなど本当に知識のなさを痛感いたします。 【script部分】 ddsmoothmenu.init({ mainmenuid: "smoothmenu1", //menu DIV id orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v" classname: 'ddsmoothmenu', //class added to menu's outer DIV //customtheme: ["#1c5a80", "#18374a"], contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"] }) を削除し 【CSS・XHTML部分ともに】 ddsmoothmenu-vの部分をコピペ致しました。 このような私に数日もお付き合い頂き本当に感謝致しております。 並びに毎度ご回答頂きましたこと＋αご質問を付け加えてしまい申し訳ございません。
#navi li ul li { position:absolute; top:0px; left:150px; } それだと表示位置が左から150pxの位置固定になるので、項目一つしか出ませんよ。 メニューの項目数分、項目の幅分ずらしながら表示する必要があります。 それぞれの項目に対し、150px、300px、450px・・・と表示位置を個別に指定する必要がありますね。（項目幅が150pxとした場合の数値です。） <ul class"navi"> <li style="left: 150px;">項目１</li> <li style="left: 300px;">項目２</li> <li style="left: 450px;">項目３</li> ： ： </ul> naviのクラス属性は生きたままで、個別にしていしたstyle属性が優先されるので、naviのクラス情報を引き継いだまま、一部分のスタイルのみ個別スタイルで指定する、という手法になります。 なので、position:absolute;等は各liに引き継がれます。
お礼
再度ご回答頂きまして本当にありがとうございます。 説明不足で申し訳ありません。 menu1にオンマウスをした際に menu1－リンク1－リンク2 と展開するのではなく menu1-リンク1 -リンク2 としたかったんです。 ですがskyfangさんに教えて頂いたように <li style="left:150px">項目1</li> <li style="left:300px">項目2</li> を適用することで横表示にできました。 このパターンで表示した際にオンマウスをしたら展開するのではなく最初から展開しておりました。 もしかしまして今回利用しているjavascriptが上下にアニメーションするだけの仕様になっているものなのでしょうか。 度々ご質問ばかりで申し訳ございません。
以下のページの「download script」をクリックしてダウンロードしたものを修正して使用しているのでしょうか？ [参考]JavaScript drop down menu using Mootools 1.2 http://www.php-help.ro/mootools-12-javascript-examples/javascript-drop-down-menu-using-mootools-12/ それとも、貴方が提示してあるURLの解説サイトに記載のコードをコピペして動かそうとしているのでしょうか？ 後者であるなら、前述の配布サイトの方から一式落としてこないと、そもそも動きませんよ。 解説サイトに記載のコードは、配布サイトで配布されているスクリプト部品がある事を前提にした、HTML部分の解説だけですから。（必要な物のうち、自分で書き換えて使うであろう部分の解説のみ。）
お礼
ご丁寧なご回答ありがとうございます。 skyfang様のおかげで <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js "></script> と最初のscriptはコピペで良い所までダウンロードしていましたmootools-yui-compressed.jsを挿入していることに気付きました。 src="http～で記載するやり方とjsファイルを挿入するやり方の違いがまだ理解できていませんが何とか動作することができました。 このような初歩的なミスをしてしまうレベルの私でも理解できるようにご丁寧にご回答して頂き本当にありがとうございます。 あともし宜しければ縦に配置して水平に展開するようにできるかもお教え頂けないでしょうか。 自分なりに試みてみたのですが #navi { position: relative; に書き換えて #navi li { float:left; をけして、縦に配置はでき、 #navi li ul li { position:absolute; top:0px; left:150px; で横に一部だけ出すことはできたのですが展開することができませんでした。 お時間があるときにで宜しいのでお教え頂ければ幸いです。 ご回答頂けた上にさらに質問をして申し訳ございませんがどうぞ宜しくお願い致します。
お礼
skyfangさん、本当にありがとうございます。 メニューのコードに画像を置く所はかなり苦戦しましたが何とかサンプルと同じように表示できるようになりました。 自分のＨＰ用に編集できるかは微妙な所ですが、教えて頂いたことが無駄にならないように勉強しながら頑張りたいと思います。 お忙しい中数日に渡りお付き合いくださり本当にありがとうございました。やりたいことをイメージ通りに表現できるようになるために少しずつCSS、Javascriptなどを理解できるように頑張ります。 重ね重ねですがこの度はこんな知識のない私にご丁寧にご回答頂きまして本当にありがとうございました。感謝致しております。