ロールオーバーとプルダウンメニューを同時に使う方法

[統計] HTMLからXHTMLへの移行を進めていますか？

0   名前： 困り人☆ ： 2007/02/22（木） 22:54  ID:dejrGvAr sub-9g
【何をしたいのか】
メニューバーを、ロールオーバー（画像使用）で作成し、プルダウンメニューも付けたい。

【現在の状況】
ロールオーバーメニューは作成できたが、プルダウンをどのように組み込めばいいのかわからない。

【何をしてみたのか】
それぞれの作成方法をWebや本で探したが、両方同時に使う方法が見つからなかった。

【備考】
急いでいます。分かる方、教えてください。
1   名前： 匿名 ： 2007/02/22（木） 22:54  ID:66F/E.j5 sub-Ds
両方出来ていて、１つにしたいなら、id か class を同じにすればいいのでは？
ココで質問って事は、両方スタイルシートなんですよね。

急いでいるなら、両方のソースを急いで出してください。
架空の話では、答えられません。
2   名前： 困り人☆ ： 2007/02/22（木） 22:54  ID:dejrGvAr sub-9g
専門的な知識がないため、見当違いの質問でしたら、
ご容赦ねがいます。
とにかく下記してみます。


ロールオーバーのCSSは↓です。

/*--------▼ヘッダナビゲーション---------*/
#h_navi {
float: left;
width: 800px;
}

#h_navi ul {
margin: 0 0 0 18px;
padding: 0;
list-style-type: none;
}

#h_navi li,#h_navi a{
float: left;
display: block;
width: 78px;
height: 20px;
background-image: url(menu.gif);
text-indent: -9999px;
}

#h_navi02 a { background-position: -78px 0 }
#h_navi03 a { background-position: -156px 0 }
#h_navi04 a { background-position: -234px 0 }
#h_navi05 a { background-position: -312px 0 }
#h_navi06 a { background-position: -390px 0 }
#h_navi07 a { background-position: -468px 0 }
#h_navi08 a { background-position: -546px 0 }
#h_navi09 a { background-position: -624px 0 }
#h_navi10 a { background-position: -702px 0 }

#h_navi01 a:hover { background-position: 0 -20px }
#h_navi02 a:hover { background-position: -78px -20px }
#h_navi03 a:hover { background-position: -156px -20px }
#h_navi04 a:hover { background-position: -234px -20px }
#h_navi05 a:hover { background-position: -312px -20px }
#h_navi06 a:hover { background-position: -390px -20px }
#h_navi07 a:hover { background-position: -468px -20px }
#h_navi08 a:hover { background-position: -546px -20px }
#h_navi09 a:hover { background-position: -624px -20px }
#h_navi10 a:hover { background-position: -702px -20px }

/*--------▲ヘッダナビゲーション---------*/

プルダウンメニューのCSSは↓です。

ul.main{font-size:12px;}
ul.main{text-align:center;/*メインメニューの文字揃え*/}
ol.sub{text-align:left;/*サブメニューの文字揃え*/}
ul.sub-2{text-align:left;/*サブメニューの文字揃え*/}
ul.main{font-family:"ＭＳ Ｐゴシック"；}
.main a{text-decoration:none;}
.main{background-color:;}
.main li{background-color:#1E90FF;}
.main a:hover{background-color:#FFFFFF;}
.main li.on{background-color:#FFFFFF;}
.main li.on{color:#1E90FF;}
.sub{background-color:#1E90FF;}
.sub li{background-color:#1E90FF;}
.sub a:hover{background-color:#FFFFFF;}
.sub li.on2{background-color:#FFFFFF;}
.sub-2{background-color:#1E90FF;}
.sub-2 li{background-color:#1E90FF;}
.sub-2 a:hover{background-color:#FFFFFF;}
.main a:link{color:#FFFFFF}
.main a:visited{color:#FFFFFF;}
.main a:hover{color:#1735B0;}
.sub a:link{color:#FFFFFF}
.sub a:visited{color:#FFFFFF;}
.sub a:hover{color:#1735B0;}
.sub-2 a:link{color:#FFFFFF}
.sub-2 a:visited{color:#FFFFFF;}
.sub-2 a:hover{color:#1735B0;}
ul.main{width:870px;}
.main li.off{
height:20px;
width:87px;
}
.main li.on{
width:87px;
}
.main a{padding:3px;}
.main li.off{
border-top: 1px solid #1735B0;
border-left: 1px solid #1735B0;
border-right: 1px solid #1735B0;
}
.main li.on{
border-top: 1px solid #1735B0;
border-left: 1px solid #1735B0;
border-right: 1px solid #1735B0;
}
.main a{
border-bottom:6px solid #1735B0;
}

ol.sub{
left:0;
top:0;
width:87px;
}

ol.sub li.off2{
width:87px;
height:20px;
}
ol.sub li.on2{
width:87px;
height:20px;
}
.sub li.off2,.sub li.on2{
border-bottom:1px solid #1735B0;
}

.sub a{
padding:1px;
width:85px;
height:20px;
}

ul.sub-2{
left:100%;
top:-20px;
width:87px;
}

ul.sub-2{
border:1px solid #1735B0;
border-bottom:1px;
}
.sub-2 a{
border-bottom:1px solid #1735B0;
}

.sub-2 a{
padding:1px;
}

DIV#menu{
top:;
left:;
width:100%;
position:absolute;
z-index:100;
}
.main *{margin:0px;padding:0px;list-style:none;display:block;}
ul.main{position:relative;}
ul.main li.off{position:relative;float:left;overflow:hidden;}
ul.main li.on{float:left;overflow:hidden;}
ul.main>li.on{overflow:visible;/*×*/}
ol.sub{position:relative;}
ol.sub li.off2{position:relative;overflow:hidden;}
ol.sub li.on2{overflow:hidden;}
ol.sub>li.on2{overflow:visible;}
ul.sub-2{position:relative;}
3   名前： 匿名 ： 2007/02/22（木） 22:54  ID:66F/E.j5 sub-Ds
ｈｔｍｌは？

4   名前： 困り人☆ ： 2007/02/22（木） 22:54  ID:dejrGvAr sub-9g
すみません。

ロールオーバーHTML↓

<html>
<head>
<title>テスト版</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<link REL="stylesheet" type="text/css" HREF="top.css">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div id="h_navi">
<ul>
<li id="h_navi01"><a href="">あああああ</a></li>
<li id="h_navi02"><a href="">かかかかか</a></li>
<li id="h_navi03"><a href="">さささささ</a></li>
<li id="h_navi04"><a href="">たたたたた</a></li>
<li id="h_navi05"><a href="">ななななな</a></li>
<li id="h_navi06"><a href="">ははははは</a></li>
<li id="h_navi07"><a href="">ままままま</a></li>
<li id="h_navi08"><a href="">ややややや</a></li>
<li id="h_navi09"><a href="">ららららら</a></li>
<li id="h_navi10"><a href="">わわわわわ</a></li>
</ul>
</div>
</body>
</html>


プルダウンHTML↓

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<link REL="stylesheet" type="text/css" HREF="./pull.css">
<title></title>
</head>
<body>
<DIV id="menu">
<ul class="main">
<li class="off"onmouseover="this.className='on'" onmouseout="this.className='off'">
<A href="">ああああああ</A>
<ol class="sub">
<li class="off2" onmouseover="this.className='on2'" onmouseout="this.className='off2'">
<A href="">いいい</A>
</li>
<li class="off2" onmouseover="this.className='on2'" onmouseout="this.className='off2'">
<A href="">ううう</A>
</li>
</ol>
</li>
<li class="off"onmouseover="this.className='on' "onmouseout="this.className='off'">
<A href="">かかかかか</A>
<ol class="sub">
<li class="off2" onmouseover="this.className='on2'" onmouseout="this.className='off2'">
<A href="">ききき</A>
<ul class="sub-2">
<li><a href="#">サンプル１</a></li>
<li><a href="#">サンプル２</a></li>
<li><a href="#">サンプル３</a></li>
</ul>
</li>
<li class="off2" onmouseover="this.className='on2'" onmouseout="this.className='off2'">
<A href=""><span>くくく</span></A>
<ul class="sub-2">
<li><a href="#">サンプル４</a></li>
<li><a href="#">サンプル５</a></li>
<li><a href="#">サンプル６</a></li>
</ul>
</li>
<li class="off2" onmouseover="this.className='on2'" onmouseout="this.className='off2'">
<A href="">けけけ</A>
<ul class="sub-2">
<li><a href="#">サンプル７</a></li>
<li><a href="#">サンプル８</a></li>
<li><a href="#">サンプル９</a></li>
</ul>
</li>
</ol>
</li>
<li class="off"onmouseover="this.className='on' "onmouseout="this.className='off'">
<A href="">さささささ</A>
<ol class="sub">
<li class="off2" onmouseover="this.className='on2'" onmouseout="this.className='off2'">
<A href="">ししし</A>
<ul class="sub-2">
<li><a href="#">サンプル１</a></li>
<li><a href="#">サンプル２</a></li>
<li><a href="#">サンプル３</a></li>
</ul>
</li>

<li class="off2" onmouseover="this.className='on2'" onmouseout="this.className='off2'">
<A href=""><span>すすす</span></A>
</li>

</ol>
</li>
</ul>
</DIV>
</body>
</html>

です。

5   名前： 匿名 ： 2007/02/22（木） 22:54  ID:C76F9ZXE sub-Ds
上のロールオーバーは完全に無視でいいです。

これはｃｓｓで動くプルダウンメニューではありません。スクリプト今夕ですから、offだとメニューにならないですよ。

ロールオーバーはプルダウンのメニューでも、白と水色ですでに出来ています。
つまり、白と水色の部分に画像をはめればいいだけです。

http://www.tagindex.com/stylesheet/link/link_color.html
疑似クラスにバックグラウンドカラーでなく、バックグラウンドイメージをはめればＯＫ順番間違えると戻らなくなったりするから注意。それと、もう少しまとめないと、わけわかんなくなるよ。
6   名前： 困り人☆ ： 2007/02/22（木） 22:54  ID:x0X.De9s sub-t1
丁寧なご説明、ありがとうございます。
煩雑な質問で失礼いたしました。
試してみます。取り急ぎお礼まで。
一覧へ戻る