推しミネラルウォーターはありますか？

プルダウンナビゲーションについて

解決済

  • 質問者：yasu16yasu
  • 質問日時：
  • 回答数：4件

CSSをはじめJavascriptの知識がなく勉強しているところなんですが、”CSS Lectureさん”の『Mootools プルダウンナビゲーション』を使用したくまず新規のファイルを作って解説通りにコピー＆ペーストをしたのですがデモページのようにうまくできません。

ＵＲＬ：http://www.css-lecture.com/log/javascript/043.html

scriptは<head>～</head>の間に入れ、XHTMLのタグは<body>～</body>に入れ、CSSは<head>～</head>の間に<style type="text/css">～</style>として入れました。※外部CSSでも試しました。

まだまだ知識不足で上記の記載自体が間違っていましたらすいません。

申し訳ございませんがどなた詳しい方お教え頂けないでしょうか。

また最終的には横並びのメニューを縦に並べて水平に展開するにできればと思っております。参考のコードを書き換えることで縦並びにすることも可能かも合わせてお教え頂ければ幸いです。

複数の質問をし勝手ではございますがどうぞ宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

三角画像を右クリックして保存したものは、メニューのコードを記述しているHTMLと同じ所（同じフォルダ）に置いてください。




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<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. …
<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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

skyfangさん、本当にありがとうございます。

メニューのコードに画像を置く所はかなり苦戦しましたが何とかサンプルと同じように表示できるようになりました。

自分のＨＰ用に編集できるかは微妙な所ですが、教えて頂いたことが無駄にならないように勉強しながら頑張りたいと思います。

お忙しい中数日に渡りお付き合いくださり本当にありがとうございました。やりたいことをイメージ通りに表現できるようになるために少しずつCSS、Javascriptなどを理解できるように頑張ります。

重ね重ねですがこの度はこんな知識のない私にご丁寧にご回答頂きまして本当にありがとうございました。感謝致しております。

通報する
お礼日時：2009/12/22 17:43

No.3

作りたいのは以下のページのようなメニューで良いのでしょうかね？



[参考]Dynamic Drive DHTML Scripts- Smooth Navigational Menu
http://www.dynamicdrive.com/dynamicindex1/ddsmoo …
    • good
    • 0
    • 件
通報する
この回答へのお礼

この度もご回答頂きましてありがとうございます。

ご参考ページにありますようなメニューで間違いないです。

教えて頂きましたメニューも練習の為に自分なりに試してみました、両方を同時に記述した際にはしっかりと両メニューとも動作できるように表示できたのですが（三角の画像は入れられておりません。）、やりたい方の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の部分をコピペ致しました。

このような私に数日もお付き合い頂き本当に感謝致しております。
並びに毎度ご回答頂きましたこと＋αご質問を付け加えてしまい申し訳ございません。

通報する
お礼日時：2009/12/21 06:40

No.2

#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に引き継がれます。
    • good
    • 0
    • 件
通報する
この回答へのお礼

再度ご回答頂きまして本当にありがとうございます。

説明不足で申し訳ありません。

menu1にオンマウスをした際に

menu1－リンク1－リンク2

と展開するのではなく

menu1-リンク1
-リンク2

としたかったんです。

ですがskyfangさんに教えて頂いたように

<li style="left:150px">項目1</li>
<li style="left:300px">項目2</li>

を適用することで横表示にできました。

このパターンで表示した際にオンマウスをしたら展開するのではなく最初から展開しておりました。

もしかしまして今回利用しているjavascriptが上下にアニメーションするだけの仕様になっているものなのでしょうか。

度々ご質問ばかりで申し訳ございません。

通報する
お礼日時：2009/12/20 03:52

No.1

以下のページの「download script」をクリックしてダウンロードしたものを修正して使用しているのでしょうか？



[参考]JavaScript drop down menu using Mootools 1.2
http://www.php-help.ro/mootools-12-javascript-ex …

それとも、貴方が提示してあるURLの解説サイトに記載のコードをコピペして動かそうとしているのでしょうか？
後者であるなら、前述の配布サイトの方から一式落としてこないと、そもそも動きませんよ。

解説サイトに記載のコードは、配布サイトで配布されているスクリプト部品がある事を前提にした、HTML部分の解説だけですから。（必要な物のうち、自分で書き換えて使うであろう部分の解説のみ。）
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご丁寧なご回答ありがとうございます。

skyfang様のおかげで

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1. … "></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;

で横に一部だけ出すことはできたのですが展開することができませんでした。

お時間があるときにで宜しいのでお教え頂ければ幸いです。

ご回答頂けた上にさらに質問をして申し訳ございませんがどうぞ宜しくお願い致します。

通報する
お礼日時：2009/12/19 05:35

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

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

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

おすすめ情報