ポップアップメニューの作成方法を教えてほしい

締切済

質問者：kkokuryou
質問日時：2012/11/17 12:58
回答数：4件

いろいろなサイトを見ながらポップアップメニューを作成しています。
ポップアップメニューのマウスオーバした時に表示されるメニューを表のように枠を入れたいのですがどうしたらいいのかわかりません。
ご教授いただけると大変助かります。
作成しているHTMLは下記になります。自由に変更していいです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">

<style type="text/css">


body {padding: 30px; }

/* 全体の文字の色テキストの下線など*/
ul.menu a {
color: #ff6100;
text-decoration: none;
text-align: center;
border-color: #000000;
}

ul.menu a:link,

/* 全体の表の背景の色 */
ul.menu a:visited {
background: #ffffff
}

/* 表全体　マウスオーバー時の背景の色 */
ul.menu a:hover{
background-color: #FF6;
}

ul.menu a:active {
}

/* 診療科　セルの変更 */
ul.menu li {
float: left;
position: relative;
margin: 0 ;
width: 9em;
height: 2em;
font-weight: none;
line-height: 2em;
}

ul.menu li a {
display: block;
width: 9em;
height: 2em;
text-align: left;
border:none;
}

ul.menu li ul li {
float: none;
margin: 0;
font-weight: normal;
border:none;
}

/* 下層のメニューを不可視に */
ul.menu li ul,
ul.menu li ul li ul {
display: none;
}

/* 疑似要素 :hover で子メニューを可視、孫メニューを不可視に各科のセル　診療科*/
ul.menu li:hover ul {
display: block;
position: absolute;
top: 0;
left: 8em;
z-index: 200;
}

* html ul.menu li:hover ul {
vertical-align: bottom; /* IE6 で変な隙間が空くのでその対策 */
}

ul.menu li:hover ul li ul {
display: none;
}

/* 疑似要素 :hover で孫メニューを可視に */
ul.menu li ul li:hover ul {
display: block;
position: absolute;
top: 0;
left: 8em;
z-index: 200;
}
</style></head>

<table width="208" border="0" cellspacing="0" cellpadding="0" background="">
<tr>
<td colspan="2" bgcolor="#FFFFFF"><ul class="menu">
<li><a href="#">■診療科</a>
<ul><li style="display:inline"> <a href="program/02gairai/naika02.html" target="_parent">内科</a></li>
<li style="display:inline"> <a href="program/02gairai/sannfu02.html" target="_parent">産婦人科</a></li>
<li style="display:inline"> <a href="program/02gairai/masui02.html" target="_parent">麻酔科</a></li>
<ul>
<li style="display:inline"> <a href="program/02gairai/geka02.html" target="_parent">外科</a></li>
<li style="display:inline"> <a href="program/02gairai/hifuka02.html" target="_parent">皮膚科</a></li>
<li style="display:inline"> <a href="program/02gairai/sikakoukuu02.html" target="_parent">歯科口腔外科</a></li>
<ul><li style="display:inline"> <a href="program/02gairai/seikei02.html" target="_parent">整形外科</a></li>
<li style="display:inline"> <a href="program/02gairai/ganka02.html" target="_parent">眼科</a></li>
<li style="display:inline"> <a href="program/02gairai/sinkei02.html" target="_parent">神経内科</a></li>
<ul><li style="display:inline"> <a href="program/02gairai/nousinkei02.html" target="_parent">脳神経外科</a></li>
<li style="display:inline"> <a href="program/02gairai/jibiinkouka02.html" target="_parent">耳鼻咽喉科</a></li>
<li style="display:inline"> <a href="program/02gairai/housya02.html" target="_parent">放射線科</a></li>
<ul><li style="display:inline"> <a href="program/02gairai/syounika02.html" target="_parent">小児科</a></li>
<li style="display:inline"> <a href="program/02gairai/hinyou02.html" target="_parent">泌尿器科</a></li>
<li style="display:inline"><a href="program/02gairai.htm" target="_parent">診療部</a></li>
</ul>
</ul>
</ul>
</ul>
</ul>
</li>
</ul></td>
</tr>

長くなりましたがどうぞよろしくお願いいたします。

通報する

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

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.1

回答者： Gletscher
回答日時：2012/11/17 13:57

ソースを書く必要はないと思います。

書いてあっても見ないですけどね(^o^)

やりたいことが分かりませんが、ポップアップというのは、普通はリンク文字やリンクバナーをクリックすると、別窓を開いて表示することを言います。
「ポップアップメニューのマウスオーバした時」と言われていますが、その意味が不明です。
また、「メニューを表のように枠を入れたい」とのことですが、それとポップアップは無関係ですね？

リンクをポップアップさせるにはJavascriptでプログラムを組みます。
<BODY>の前でJavascriptを宣言してください。
function PopUpWindow(URL,Wname,Wwidth,Wheight)
{
window.open(URL,Wname,"width="+Wwidth+",height="+Wheight+",scrollbars=yes,resizable=no,toolbar=no,location=no,directories=no,status=no")
//window.open(URL,Wname,"width=Wwidth,height=Wheight,scrollbars=yes,resizable=no,toolbar=no,location=no,directories=no,status=no")
}

そして、ポップアップさせたいリンク部分で「PopUpWindow」を呼び出せば良いです。
↓こんな感じです。
<a href="JavaScript:PopUpWindow('jump.htm','photo','600','400')">ここをクリック</a>

※('jump.htm','photo','600','400')　に部分の説明
(ジャンプ先ファイル名 , オープンさせる窓の名前 , 横×オープンする窓の縦サイズ)

マウスオーバーだけでポップアップさせるには別の高等技術が必要です。

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2012/11/17 18:16

一度

ポップアップメニューを表のように表示させたい - HTML - 教えて！goo ( http://oshiete.goo.ne.jp/qa/7796388.html )
で回答しているはずですが？？？？？。
　HTMLが間違っています。<ul>内に<ul>は書けません。<ul>や<ol>内には<li>以外は書けません。HTMLが間違っているとスタイルシートを適用することはできません。
※メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。 ( http://jigsaw.w3.org/css-validator/#validate_by_ … )より

1) ポップアップはスタイルシートではできません。上記に書きました。
　　率直にjavascriptを使うほうが楽です。

折角スタイルシートを使うなら、transitionalな書き方はしないほうが良いです。
border="1"なら、ともかく　(後方互換のため書いておいても良い)
　 width="208" border="0" cellspacing="0" cellpadding="0" background=""は書かない。
　　bgcolor="#FFFFFF"も書かない。
　これらは、スタイルシートで指定しましょう。
　　target属性は、strictは無論、transitoalにもありません。

　診療科の一覧はどう見ても表にはなりませんね。
┌──────┬──────┐
│　　内科　　│　　外科　　│
├──────┼──────┤
│　一般内科　│　一般外科　│
├──────┼──────┤
│　総合内科　│総合診療外科│
├──────┼──────┤
│　総合診療科│臓器移植再建外科│
├──────┼──────┤
│総合診療内科│　　　　　　│
└──────┴──────┘
とかなら表ですが・・・ざっと見るとすべて並列な科名のようです。--旧来の診療科区分に従えば

すなわち、マークアップはtableは不要で
<div class="section" id="medicineSpecialty">
　　<h2>診療科目</h2>
　　<ul>
　　　　<li>外科</li>
　　　　<li>内科</li>
　　　　<li>産婦人科</li>
　　　　<li>麻酔科</li>
　　　　<li>外科</li>
　　　　<li>皮膚科</li>
　　　　<li>歯科口腔外科</li>
　　　　<li>整形外科</li>
　　　　<li>眼科</li>
　　　　<li>神経内科</li>
　　　　<li>脳神経外科</li>
　　　　<li>耳鼻咽喉科</li>
　　　　<li>放射線科</li>
　　　　<li>小児科</li>
　　　　<li>泌尿器科</li>
　　　　<li>診療部</li>
　　</ul>
</div>
だけのほうが文書の意味からは良いと思います。

これを:hoverで表示させるなら
★ポップアップではありません。★
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
#medicineSpecialty{width:70%;margin:0 auto;position:relative;}
#medicineSpecialty h2{margin:0;line-height:30px;}
#medicineSpecialty h2:after{font-size:0.5em;color:red;content:"ここにポインターをあわせてください。";}
#medicineSpecialty ul{display:none;margin:0;padding:0;position:absolute;top:29px;left:0;z-index:100;}
#medicineSpecialty ul li{display:block;list-style-type:none;margin:0;padding:0.5em 1em;width:7em;float:left;border:solid 1px gray;background-color:silver;}
#medicineSpecialty:hover ul{display:block;}
#medicineSpecialty:after { content: ""; display: block; clear: left; }
と簡単なものでよいでしょう。ウィンドウ幅が狭くてもtableじゃないのですべて表示されるはずです。

★HTMLは、transitinalで作成し、余分なものは書かない。
★必ずAnother HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )などでチェックしましょう。
　その上でスタイルシートを書き始めること!!HTMLがちゃんとできてなきゃデザインできません。

　スタイルシートの意味は、仕様書で確認する癖をつけましょう。そうすれば身につきます。
Property index ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

[HTML]前文★タブは全角スペースに置換してあります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
　<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
　<title>サンプル</title>
　<meta name="author" content="ORUKA1951">
　<meta http-equiv="Content-Style-Type" content="text/css">
　<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
　<link rel="START" href="../index.html">
　<style type="text/css">

　</style>
</head>
<body>
　<div class="header">
　　<h1>タイトル</h1>
　　<p>このページでは・・・・</p>
　</div>
　<div class="section" id="medicineSpecialty">
　　<h2>診療科目</h2>
　　<ul>
　　　<li>外科</li>
　　　<li>内科</li>
　　　<li>産婦人科</li>
　　　<li>麻酔科</li>
　　　<li>外科</li>
　　　<li>皮膚科</li>
　　　<li>歯科口腔外科</li>
　　　<li>整形外科</li>
　　　<li>眼科</li>
　　　<li>神経内科</li>
　　　<li>脳神経外科</li>
　　　<li>耳鼻咽喉科</li>
　　　<li>放射線科</li>
　　　<li>小児科</li>
　　　<li>泌尿器科</li>
　　　<li>診療部</li>
　　</ul>
　</div>
　<div class="footer">
　　<h2>文書情報</h2>
　</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

何度もご教授頂き有難うございます。
大変助かりました。自分が無知なことがよくわかりました。

styleにある#medicineSpecialtyはどのような意味ですか。
できれば教えて頂いたhtmlの内容を理解して利用させて頂きたいと思っています。
どうぞよろしくお願い申し上げます。

通報する

お礼日時：2012/11/17 22:32

No.3

回答者： ORUKA1951
回答日時：2012/11/17 18:29

追記

　:hover擬似クラスを認識しない古いブラウザ対象に<a href="medicineSpecialty.html">診療科目</a>のように、実際に科一覧のHTMLを用意してリンクさせておくほうが無難でしょう。

　折角スタイルシートを使うのですから、文書構造以外は、要素も属性もHTMLに書かないように、そうすればHTMLもスタイルシートもシンプルにメンテナンスしやすくなります。tableもデザインのために使わない!!!
　表はあくまで本当に表であるときだけです。

- 0
- 件

通報する

No.4

回答者： ORUKA1951
回答日時：2012/11/18 00:03

＞styleにある#medicineSpecialtyはどのような意味ですか。

　medicine Specialtyは診療科のような意味で、勝手につけました。
<div class="section" id="medicineSpecialty">
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
　ひとつのセクションであり--他にもある可能性があるのでclass---、診療科なのでそれらしき、後で自分に解るようにIDをつけておいた。
　言い換えれば<div class="section" id="medicineSpecialty">～</div>に固有名を付けた。

#medicineSpecialty h2はセレクタで、半角スペースでつなげてあるので子孫セレクタ、以下同様
:hover擬似クラス、そのうちの動的な擬似クラス
:afterは擬似要素
　詳しくは、5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )