ということで、連日同じエントリーですが。
もう少し作り込んで、今回は別ページでサンプルをアップしてみました。
変更点としては、前回の物に比べ、色などのスタイルを修正。
加えて、下に階層が含まれているメニューについては、右端に▲のマークを
自動で追加するようにしてみました。
動作テストは「WinIE6、Firefx1.5、2.0」です。
※干し梅さんより指摘を頂き、サンプルを修正しました。
XHTMLがValidになるように修正しました。
>>サンプルページ
>>サンプルダウンロード
※サンプルダウンロードには、htmlファイル、cssファイル、jsファイルと、中で使われている画像ファイルが含まれています。
まだまだ改変の余地ありなので、改変や使用は完全フリーです。（というか、ダウンロードしてくれる人がいるんだろうか？ｗ）
ただ、できればコメントとかくれるとさらにやる気がでるのでうれしいですｗ
（なんか変なとことかあったら言って下さい…）
コメント
1 - A さん
はじめまして。
ビルダーを持ってる初心者です。
正にこんなふうにリンクを表示させたいのですけど、
ソースを見ても、どこに貼り付けたらいいかわかりません。
よろしければ具体的に教えてください。
2007年3月11日 22:16
2 - えど さん
>>Aさん
どもども。書き込みありがとうです(*'-')
えと、CSSは理解されてますか？ ある程度CSSの知識がない設置はと少しむずかしいかもです・・。（といっても幅の指定などをAさんの環境に合わせる程度ですが）
サンプルか、もしくはどういうふうに使うのか（項目数など）がわかれば、それに対して詳しくお伝えできると思います。
ちなみに、メニュー部分はの間を貼り付けてもらえれば、サンプルのようにメニューが表示されます。（ダウンロードされたjsファイルとCSSファイルは同じ階層構造を維持してサーバにアップしてください）
2007年3月11日 22:26
3 - A さん
とっても早い回答ありがとうございます！！感激です！！
全く、今から始めるというかんじで。。
項目も、後から変更があるかもしれないのですけど、（後から変えるって可能でしょうか？）
作りたいと思っているのは（予定）、
TOP NEWS SCHEDULE PROFILE DISCOGRAPHY LINK
この、PROFILEのところに、
メンバー５人分の名前リストをプルダウンみたいに表示して、
それぞれリンクさせたいんです。
そして、他の、TOPとかSCHEDULEとかは、そこから直接リンクにしたくて、、
CSSのこともさっぱりわからないので、
初心者の私には難しいでしょうか；；
ちなみに、ビルダーの最初から用意されてるhtmlコード（？）は、下記のようになってます。
ここに書き加えたらできますか？
突然聞いてしまって、面倒かもしれないので、
もし可能だったら、教えてください。
大変だったら、またどこかで調べるので、無理はしないでくださいね。
スミマセン；；よろしくお願いします。。
2007年3月11日 23:11
4 - A さん
あれ？htmlコード、書いても表示されないみたいですね（汗汗）
2007年3月11日 23:13
5 - えど さん
なるほど。では、サンプルのcssフォルダの中のmenu.cssを開くと、以下の箇所があるのでそれを修正してみてください。
dl#menu dtの下にあるwidthという項目が、ひとつの項目の幅になるので、それを自身のサイトのメニューのひとつに設定したい幅に修正してみてください。
2007年3月11日 23:31
6 - A さん
CSSのサンプルのを貼るといいのでしょうか？
どこに貼ったらいいかがわかりません。
んー、、やっぱり、私には難しいかもしれませんね（汗汗）
スミマセン。思いっきり初心者で（汗汗）
もうちょっと勉強してみます。
ありがとうございます☆
2007年3月11日 23:36
7 - A さん
度々スミマセン；
何にもないところに貼ったら
そのリンクバーが出来るっていう丸ごとのコードって載せていただくことは難しいですか？？
部品ごとに分散されてると、どこに貼ったらいいのかわからなくて（汗）
内容は後で書き換えられるので、
文字は何でも構いません。
可能だったらいいので（当たり前ですが）、、
無理を言ってスミマセン；；
2007年3月12日 00:30
8 - えど さん
えーと、説明不足でしたね；
まず、HTML部分にはサンプルの
<dl id="menu">から</dl>までを貼り付けてください。
（ソースは長いので割愛(^^;）
また、幅などのデザイン部分をCSSで定義しているので
自身のサイトの上のほうにある<head>と</head>の間に
<link rel="stylesheet" href="css/menu.css" type="text/css" />
を貼り付けてください。これがCSSファイルを読み込む指定になります。
また、メニューのプルダウンなどをJavascriptで制御しているので、
そのJavascriptファイルも読み込む必要があります。
上のCSSと同じように、<head>と</head>の間に
<script type="text/javascript" src="js/menu.js">
を貼り付けてください。
これで、自身のサイトにCSSファイルとjsファイルが読み込まれます。
（jsフォルダとCSSフォルダは、今Aさんが作られているHTMLファイルと同じ階層においてください。
そうしないと適切にファイルが読み込まれないため、正常に動作しません）
これで動くと思います。
なにか不具合などあったらまた連絡くれればお答えしますよー。
2007年3月12日 00:42
9 - A さん
ご親切に本当にありがとうございます！！(><)
今日帰ったらやってみます。
またご報告の書き込みさせていただきます☆
2007年3月12日 07:36
10 - えど さん
いえいえ、参考にしてもらっただけでありがたいですｗ
ちなみに、若干説明に漏れがあったので追加しますね。
<script type="text/javascript" src="js/menu.js">
を追加、と書きましたが
<script type="text/javascript" src="js/menu.js"></script>
が正しいです。
2007年3月12日 09:39
11 - A さん
あの、、ダウンロードしたのですけど、
jsの方の、menuファイルが開けないみたいでした。
きっと、私のPCの問題ですよねぇ。。
（CSSの方は、コードみたいなのが並んだのが開けます。）
やっぱり、分割しないと、
そのまま貼り付ければできるっていうのはないのですよねぇ。。
これだけ丁寧に説明してもらってるのにできないなんて、
初心者過ぎだから、
HPビルダー用の本でも買ってみた方が良いのかもしれませんねぇ（汗汗）
2007年3月12日 20:16
12 - A さん
何度も書いてしまってゴメンナサイ；；
えーと、、そのまま書くと表示されないみたいなので、
カッコの形を変えて書きますけど、
[html]のあとに、[dl]〜[/dl]
[head]のあとに、[script･･･ と[link rel･･･
を貼ったら、プレビューに、ボタンの画像が出ました！
ただ、並び方が真横でないのと、
それと一緒に、
Menu1-2>>
Menu1-2-1
Menu1-2-2 ･･･
っていう文字も出てしまいます。
あと何を直せば良いか、もしわかるようでしたら教えてください。スミマセン；
2007年3月12日 21:03
13 - えど さん
なるほど。
Aさんが作られているサイトはサーバにアップされていますか？
もしアップされているなら、URLを送ってもらえれば状況を見ますよ。
※コメントが長くなってきたので、以後のコメントは、eblog_m@mail.goo.ne.jpのアドレスまでメールをくれれば返信しますよー(*'-')
2007年3月12日 22:21
14 - A さん
まだアップしてなくて
これから作るぞってところなんです。
もうちょっとがんばってみます。
本当に、ありがとうございます。
いっぱい書いちゃってすみませんでした〜；
2007年3月12日 22:31
15 - えど さん
なるほど。もし現状のものでアップできるのであれば、それをアップしてもらってもいいですよー。
2007年3月12日 22:36
16 - A さん
いえいえ〜＞＜
本当にこれからで、まだ、ビルダーの一番最初にもともと入ってる
[!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"]
[HTML]
[HEAD]
・
・
[/HEAD]
[BODY][/BODY]
[/HTML]
だけなんです;
画像や文字はビルダーの機能でわかるんですけど、
そのリンクボタンだけ、わからなくて、タグ（？）でなんとかできないかなって思ったんですけど、
どこに何を入れたら良いかわからなくて。。
2007年3月12日 23:03
17 - えど さん
なるほど。
一番上の部分を
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
にしてもだめですか？
2007年3月12日 23:10
18 - A さん
それでもやっぱり、プレビューでボタンの画像は出るのですけど、
オンマウスにしたときに出てほしい文字が、一緒に並んでしまいます。
コードを入れる場所を間違ってるのでしょうか･･･；
また明日がんばってみます。。
いろいろスミマセン； ホントにありがとうございます。
2007年3月12日 23:39
19 - A さん
諦めきれず、
サンプルページのソースをそのまま全部貼り付けてみたけど、
やっぱり同じように、文字まで並んでしまいます。
PCのせいかなぁ。。。わかりません＞＜
すみません。今日のところはおやすみなさいです。。；
2007年3月12日 23:57
20 - えど さん
うーん、サンプル自体はちゃんと表示されてますか？
あと、ちと確認がもれていましたが使われているブラウザはなにを使ってますか？ InternetExplorerですか？ あとVerなんかも教えてもらえると解決の糸口が見えるかもしれません。
2007年3月12日 23:59
21 - A さん
すごく長くなっちゃってますね･･･本当にスミマセン；
Internet Explorerです。バージョン情報に、6.0･･･て書いてあるけど、それのことですか？
私には無理そうな場合、間にページを作って、そこからそれぞれリンクさせようかな〜、、
なんて、諦め策も考え始めてます。。
2007年3月13日 00:12
22 - えど さん
ふむ。
ちと見ないと分からんですね；
多分、なんかしらの設定が間違ってるんだろうとは思いますが・・。
さっき書いたメールアドレスあてに、今作ってるファイルをすべて（構造も維持したまま）圧縮して送ってもらってもいいですか？
それをこちらの環境で見てみて、そうすれば問題箇所が分かると思うので。
2007年3月13日 00:14
23 - A さん
あ、さっき答えてませんでした；
サンプルのソースそのまま貼ったときも、画像はちゃんと表示されて、
なぜかそれと一緒にリンクの文字も表示されちゃうんです；
･･･！ 返信くださってますね！
あまり迷惑かけてしまうと申し訳ないので、
本屋にでも行ってみます･･･それかプルダウンは諦めかなぁ、、（＞＜）
いっぱい書いてしまって本当にすみませんでした；
本当に丁寧に教えてくださって、ありがとうございます〜☆
2007年3月13日 00:25
24 - えど さん
メールとかは無理そですか？
それで実際のファイルを見てみれば解決できると思うのですが…。
さすがに見て見ないとこれ以上はちときびしそうです(^^;
2007年3月14日 09:49
25 - A さん
間があいてしまいました、、；
やっぱり、ダウンロードさせていただいた中の「ｊｓファイル」、menuっていうアイコンが開けないみたいです。こちらのPCが原因でしょうかねぇ・・・＾＾；
（それがないとできないですか？？）
それから、自分で作ったGIFのボタンを使おうと思っていて、サンプルのソースをそのまま使えない（別のボタンができてしまう）ので、もし説明がややこしそうでなければ、
どこにGIFのURLが入るとか、書き換える部分を教えていただけませんか？
いろいろ聞いてしまってスミマセン；(o_ _)o))
2007年3月19日 19:13
26 - A さん
ちょっと別の方法ですけど、
似たようなことができそうなかんじですッ、
もうちょっとがんばってみます！
本当に何度もゴメンナサイです。。
理解してできるようになるまで、
道のりが長そうです、、(o_ _)o))
2007年3月19日 21:41
27 - A さん
・・・やっぱ難しいです。
できないかもです；；；
2007年3月19日 22:27
28 - えど さん
どもです。
そうですねぇ。やはり作られている元を見ないとむずかしいかもしれません…。
メニュー項目の幅は決まってますか？
項目数と、も少し詳細を教えてくれれば時間を見てちょっと作り直してみますよ。
（ちなみにメールはむずかしいんですよね？）
2007年3月20日 09:06
29 - A さん
かなり久々に書きます。。；
あれから、少しずつ、作っていってます。
それにつれて、ソースについても、ちょっとずつわかってきましたけど、
プルダウンのがわかるまでにはなってません＾＾；
諦めて、間にワンクッション置いて、
プルダウンの代わりのページ（リンク先の一覧みたいなの）を
作ってみてます。
発注者さんがそれでOKって行ってくれたら、それになりそうです＾＾；
いつか、このプルダウンがわかれば、HPを新しく作り直すときにでも、
それが使えたらなぁっていう目標にします！
本当にご親切に、ありがとうございました☆
2007年3月26日 20:58
30 - みゅう さん
管理人様
はじめまして、みゅうと申します。いつも参考にさせていただいております。
今回プルダウンメニューサイトに組み込むことになり、こちらのソースをそのままコピペして作成してみたのですが、
Win IE6.0でどうしても表示がうまくいきません。
具体的におかしい箇所というのは、
プルダウンメニューの下に空白ができてしまうのです。
色々な原因を探ってみたのですが、何が理由なのか全く検討がつかず、
もしアドバイスいただければと思いコメントさせていただきました。
お忙しいところ大変お手数お懸けしますが、よろしくお願いいたします。
具体的にソースを掲載しますと、
ヘッダの右側にプルダウンメニューを設置したいので、
フロートで設置して、#langを右側に置いてます。
Select Language
Japanese
English
その下に、メインのコンテンツとなる#containerと#mainが続きます。
以下省略---
CSS（該当箇所のidだけ抜粋）
#iBox {
margin-right: auto;
margin-left: auto;
display: block;
width: 780px;
height: 100%;
}
#header {
float: left;
padding-top: 18px;
width: 650px;
padding-bottom: 18px;
height: 31px;
}
#lang {
float: right;
width: 120px;
height: 32px;
padding-top: 35px;
}
#container {
display: block;
background-color: #FFFFFF;
height: 100%;
padding: 15px 15px 30px;
}
.clear {
clear:both;
}
#main {
float: right;
clear: right;
width: 515px;
margin-top: 2px;
}
こちらの情報だけで原因が特定できるでしょうか。
ちなみに、プルダウンメニューの所のスタイルはカスタマイズしました。
これがいけないのかもしれません。。
/*------------------------------------
#menu スタイル
-------------------------------------- */
dl#menu {
width: 120px;
height: 32px;
margin: 0;
padding: 0;
}
dl#menu ul, dl#menu li {
list-style: none;
}
dl#menu dt {
text-align: center;
position: relative;
width: 130px;
color: #FFFFFF;
height: 32px;
}
dl#menu dt a {
display: block;
color: #FFFFFF;
text-decoration: none;
line-height: 32px;
width: 130px;
height: 32px;
font-weight: bold;
text-indent: 2px;
}
dl#menu dt ul {
/*プルダウンメニューの背景、スタイル*/
background-color: #cacdd6;
border-left: 1px solid #494835;
border-top: 1px solid #494835;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
display: none;
position: absolute;
top: 32px;
left: 0;
z-index: 0;
width: 130px;
text-align: left;
}
dl#menu dt ul a {
/*リンクがある時のプルダウンメニューの色*/
color: #3a3a3a;
height: auto;
line-height: 130%;
text-align: left;
padding: 5px;
width: 130px;
}
dl#menu dt ul li.rollOver {
/*プルダウンメニュー、マウスオーバー時のスタイル。*/
background-color: #4d4d45;
}
dl#menu dt ul li.rollOver a.rollOverA {
/*プルダウンメニュー、マウスオーバー時のテキストの色。*/
color: #FFFFFF;
}
dl#menu dt ul li {
position: relative;
text-indent: 2px;
}
長くなって申し訳ありません。
アドバイスいただけると助かります。
どうぞよろしくお願いいたします。
2007年3月29日 20:25
31 - えど さん
みゅうさん、はじめまして。
参考にしていただいてありがとうございます。
ソースを拝見しただけですとちょっとわかりづらいので、もし可能ならアップ先のURLを教えてもらえますか？
（もしくはメールで該当のファイルを送ってもらえるとうれしいです。アドレスはeblog_m@mail.goo.ne.jpです）
2007年3月30日 00:00
32 - みゅう さん
管理人様
先ほどメールでソースを送りました。お手数おかけ致しますが、どうぞよろしくお願い致します。
2007年3月30日 11:34
33 - sagy さん
こちらのソースを参考にプルダウンメニューを設置しました。
http://xrea254.s254.xrea.com/menux_test/
IE,FF,Safari,Operaなどのブラウザでは問題なく動作するのですが、NNのみonMouseOutでも孫階層が非表示とならず重なって表示されてしまいます。
解決のヒントなどがありましたら、教えていただけないでしょうか。よろしくお願いします。
2007年4月29日 17:50
34 - えど さん
>>sagyさん
ありがとうございます。
えぇと、NNはもともと対象外だったので動作確認はしておりません・・。
ちなみに、NNのVerはいくつで確認されていますか？
2007年4月29日 18:33
35 - sagy さん
>ちなみに、NNのVerはいくつで確認されていますか？
win/macともに7.1です。6のときはDHTML上問題が多かったので対策が色々拾えるのですが、7以降の情報が少なくちょっと手こずっています。
2007年5月 1日 10:49
36 - タカユキ さん
こんにちは。
このプルダウンメニューについてわからないことがありましたので、質問させていただきます。
対象URLは http://www.mastermake.com/test/test.html
このグローバルナビにある「初めてのお客様」部分にロールオーバーを適用しています。
メニュー項目にはテキストではなくそれぞれにクラスを指定し、画像を適用しています。
（↑そもそもロールオーバーメニューは画像適用は無理でしょうか？？イメージメニューにするとたんに急に難しくなります。しかも、どのサイトをみてもテキストでの例しか見られませんorz）
現状の問題点：一応サブメニューの画像は表示されますが、マウスオンすると消えてしまいます。どうしたらいいのか。。。。まったくお手上げ状態になってしまいました。
ロールオーバー用のスタイルシートは「http://www.mastermake.com/test/style/rollmenu.css」にあります。
おそらくjsでコントロールする「.rollOver」がだめなのではないかと思っています。
「.rollOverA」はテキストの文字に対するものみたいなので削除しています。
お手数ですが、お時間のあるときにでもアドバイス、修正ポイントのご指摘をいただけませんでしょうか。
よろしくお願いいたします。
2007年10月31日 15:40
37 - えど さん
>>タカユキさん
参考にしていただいたようで、ありがとうございます。
サイト、背景させていただきました。
サンプルの場合、下位階層が存在するときに右側に矢印の背景を表示する設定をしていました。
背景は、a要素にclassを付与することで実現してしたので、マウスオーバー後メニューが消える際にa要素のclassをなくす処理を行っています。
おそらくその処理が、背景を指定しているclassごと消去してしまうため、背景がなくなるものと思いました。
ダウンロードしたjs内の「function hiddenMenu()」の部分の「menuA.className = ""」の部分を削除すれば大丈夫かと思います。
手元にファイルがないので憶測でしか分かりませんが、なにかまだ問題があるようならコメントお願いします(;´д｀)
2007年10月31日 17:51
38 - 干し梅 さん
はじめまして。
自社サイトの更新をしているものです。
サンプルを使用させていただき、WinIE7で完璧に表示されて、
喜んでいたんですが、以下のW3Cでバリデート？すると、1件エラーになります。
http://validator.w3.org/
エラーメッセージは、以下の内容です。
Line 30, Column 8: document type does not allow element "ul" here; missing one of "object", "ins", "del", "map", "button" start-tag.
✉
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "" or "") inside an inline element (such as "", "", or "").
記述ミスのようですが、どう記述しなおしたら
「Congratulations」になるのか全くわかりません。。。
できれば、お力をお貸しいただければと思います。
サイトは、XHTML 1.0 Strictで製作しております。
ダウンロードした、index.htmlのままのタグで、アップロードしておりますので、
記述は変更しておりません。
お手数をおかけいたしますが、アドバイスをお願い申し上げます。
2008年1月17日 19:26
39 - えど さん
>>干し梅さん
サンプルを利用していただきありがとうございます。
コメント頂いた件ですが、これはおそらくdt要素内にはul要素（およびブロック要素）を入れられないために出ているエラーだと思います。
（dtの部分をddに変更したところこのエラーは解消されました）
ただ、単純にdtをddにしてしまうと、onload時に読み込まれている
置換用のスクリプトがうまく動作しなくなってしまうので、
それについて修正したいと思います・・。
わざわざご連絡ありがとうございました。
修正でき次第、エントリーを修正させて頂きます。
2008年1月18日 09:44
40 - えど さん
>>干し梅さん
ご指摘ありがとうございました。
Validになるよう修正したものを再アップしました。
お手数ですが、再ダウンロードしていただけますでしょうか？
（修正内容としては単純で、サンプルのdt部分をddに変更し、
それに付随するCSSおよびJavascriptを修正しました）
2008年1月18日 11:09
41 - 干し梅 さん
ありがとうございます。
なんかこちらこそすみませんm(__)m
またよろしくお願いいたします。
ありがとうございました(^_^)
2008年1月22日 09:36
42 - Ryo さん
はじめまして。
現在サイトを新たに大きく改装しようと思い作成に取り掛かっているRyoといいます。
ホームページビルダーを使っていて・・・はっきりいってサイト作成やパソコンの知識的なものはほとんどないといった状況です。
一番初めに作るとき相談したサイトの掲示板でjavascriptはあまりよくないと言われていらいデザイン的に懲りたいものの抵抗があって手が出せませんでした。
ですが,来てくださる客層も限られてきましたので色々と憧れを試してみたいのも本心です。
しかし出来るところはCSSで設定したく探していたところ,ここへたどり着いたのですが,ダウンロードがなんだか上手くできなくて(保存後からの表示が出来ません)・・・。
何度もダウンロードも他のページのものも挑戦したのですがよくわからなくて・・・
内容をメールで送ってもらえないだろうかという思いにたどり着きました。
それでご迷惑かとは思ったのですが相談のコメントをさせていただきました。
このブログで勉強させてもらっているのですがCSSについては大変詳しいご様子・・・。
もしよかったら指南していただけないでしょうか？
私の理想はそもそもほとんどCSSのみの表記で現実的に出来るのか,javascriptについても別の考え方があるのか等教えていただきたいです。
お忙しいところ申し訳ありません。
コメント返信でも大変ありがたいのですが,もしよろしければメールください。
よろしくお願いします。
2008年5月10日 21:54
43 - えど
さん
42 - Ryoさん
コメントありがとうございます！
ちょっと状況が分かりかねるので、やはりメールで詳細をもらえると助かります。
メールアドレスは「css.eblog@gmail.com」になりますので、こちらへメールいただけますか？
2008年5月11日 09:29