プルダウンメニューをiframeの中に入れる試行錯誤 その２
【プルダウンメニューをiframeの中に入れる試行錯誤 その１】の続き。
基本形
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>テスト</title>
<style>
<!--
*{font-size:18px;box-sizing: border-box;}
body{width:821px;}
.block_menu{height:50px;background-color:red;}
.menu{width:100%;border:none;height:300px;border:10px solid pink;}
.container{height:300px;background-color:white;}
.contents{height:100%;border:2px solid green;}
.footer{height:40px;background-color:black;}
.block_menu{}
/* .menu{position:relative;z-index:1;} */
.container{}
.contents{}
/* .text01{position:relative;z-index:2;} */
-->
</style>
</head>
<body>
<div class="block_menu">
<iframe src="http://hitorinezumi.html.xdomain.jp/template/menu.html" class="menu" title="メニュー"></iframe>
</div>
<div class="container">
<div class="contents">
<span class="text01"><a href="">１１１１</a>２２２２</span>
<span class="text01"><a href="">３３３３</a>４４４４</span>
<span class="text01"><a href="">５５５５</a>６６６６</span>
</div>
</div>
<div class="footer"></div>
</body>
</html>
"menu"の様子が分かるようにpinkの枠を付けて考察する。
プルダウンメニューを表示した状態。
この状態ではプルダウンメニューから"contents"の文字が透けて見えて、プルダウンメニューの下の方を選択しようとするとプルダウンメニューが消えてしまう。
これを改善するには"menu"を"contents"の文字よりも上にするため「.menu{position:relative;z-index:1;}」を追加すれば良いのだけど、そうすると"contents"の文字にアクセスできなくなる。そこで、"contents"の文字にアクセスしたい時に"menu"のheightを低くすることにする。"menu"のheightが常に低いとプルダウンメニューが"contents"の上に重ならなくなるので、ポインタが"menu"の上にある時だけheightを高くする。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>テスト</title>
<style>
<!--
*{font-size:18px;box-sizing: border-box;}
body{width:821px;}
.block_menu{height:50px;background-color:red;}
.menu{width:100%;border:none;height:50px;border:10px solid pink;}
.container{height:300px;background-color:white;}
.contents{height:100%;border:2px solid green;}
.footer{height:40px;background-color:black;}
.block_menu{}
.menu:hover{position:relative;z-index:1;height:300px;}
.container{}
.contents{}
/* .text01{position:relative;z-index:2;} */
-->
</style>
</head>
<body>
<div class="block_menu">
<iframe src="http://hitorinezumi.html.xdomain.jp/template/menu.html" class="menu" title="メニュー"></iframe>
</div>
<div class="container">
<div class="contents">
<span class="text01"><a href="">１１１１</a>２２２２</span>
<span class="text01"><a href="">３３３３</a>４４４４</span>
<span class="text01"><a href="">５５５５</a>６６６６</span>
</div>
</div>
<div class="footer"></div>
</body>
</html>
これで通常は"contents"の文字にアクセスできて、プルダウンメニューも消えることなく利用できる。ただし、ポインタがプルダウンメニューから離れるとプルダウンニューは消えるが、pinkの枠内に留まったままだと"menu"のheightが低くならず、"contents"の文字にアクセスできない。pinkの枠は動作確認のために設けているだけで、実際のソースでは枠は見えない。すなわち、ポインタが枠の外、すなわち"menu"ブロックの外にあるのかどうかを確認できない。まだまだ改善が必要である。
ちなみに、iframeを使わない場合は、ポインタが"menu"のメニュー項目の上にある時に、そのメニュー項目の所だけheightを高くできる。そしてメニュー項目からポインタが離れればheightが低くなって"contents"の文字にアクセスできるようにできる。それをiframeを使った場合も実現できれば問題は解決するだろうが、難しそうである。
今回はここまで。
2021/4/21 19:40頃。
続き→【プルダウンメニューをiframeの中に入れるのを諦めて、Javascriptでiframeからプルダウンメニューを取り出してdivの中に貼り付ける】
コメント
コメントを投稿