スマートフォンでポップアップメニュー

スマートフォンのブラウザで、所謂ポップアップメニューが出来ないか？と要望を受けたので、習作に作成してみたのですが、希望通りの動作にならず、ご相談に伺いました。

HTML
1<!doctype html>
2<html>
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
5<meta name="viewport" content="target-densitydpi=device-dpi, width=100%, initial-scale=1.0, user-scalable=no, maximum-scale=1">
6<title>スマートフォントップページ201605</title>
7<link href="css/top.css" rel="stylesheet" type="text/css">
8<script type="text/javascript" src="sclipt/top.js"></script>
9</head>
10
11<body>
12
13<!--看板-->
14
15<div class="Signboard">
16  <div  class="block">
17    <div class="SigE1"><img src="image/newsptop01.jpg" class="E1img" /></div>
18    <div class="SigE2"><img src="image/newsptop02.jpg" class="E2img" /></div>
19    <div class="SigE3"><a href="#" OnMouseOver="pupon()" OnMouseOut="pupoff()"><img src="image/newsptop03.jpg" class="E3img" /></a></div>
20  </div>
21</div>
22
23<!--ポップアップメニュー-->
24<div id="popmenu" class="popUpoff">
25  <div  class="block2">
26      <div><img src="image/popcate00.jpg"></div>
27      <div><img src="image/popcate01.jpg"></div>
28      <div><img src="image/popcate02.jpg"></div>
29      <div><img src="image/popcate03.jpg"></div>
30      <div><img src="image/popcate04.jpg"></div>
31  </div>
32</div>
33
34</body>
35</html>
36

CSS
1@charset "shift_jis";
2/* CSS Document */
3
4body {
5	margin: 0px;
6	padding: 0px;
7}
8div.Signboard {
9	margin: 0px;
10	margin-left: 0px;
11	margin-right: 0px;
12	position: fixed;
13	z-index: 100;
14	width: 100%
15}
16div.block {
17	background: #5B4A40;
18	display: table;
19	margin: 0;
20	width: 100%;
21}
22div.SigE1 {
23	display: table-cell;
24	width: 70.313%;
25	border: 0px;
26}
27div.SigE2 {
28	display: table-cell;
29	width: 14.844%;
30	border: 0px;
31}
32div.SigE3 {
33	display: table-cell;
34	width: 14.844%;
35	border: 0px;
36}
37
38img.E1img {
39	width: 100%;
40}
41img.E2img {
42	width: 100%;
43}
44img.E3img {
45	width: 100%;
46}
47div.popUpoff {
48	position: fixed;
49	z-index: 99;
50	width:1px;
51	height:1px;
52	overflow:hidden
53}
54div.popUpon {
55	position: fixed;
56	z-index: 101;
57	margin: 10px;
58	margin-left: 10px;
59	margin-right: 10px;
60}
61
62div.pageBoby {
63	background: #00FF00;
64	margin: 0;
65	margin-left: 0px;
66	margin-right: 0px;
67	width: 100px;
68	height: 1000px;
69}
70div.block2 {
71	background: #FFFFFF;
72	display: table;
73	margin: 0;
74	width: 100%;
75}
76

JavaScript
1// JavaScript Document
2
3function pupon(){
4  document.getElementById('popmenu').className = 'popUpon'; 
5}
6
7function pupoff(){
8  document.getElementById('popmenu').className = 'popUpoff'; 
9}

メニュー画面の画像３コをDIVタグで並べ、うち一番右の画像にマウスが載るとJavascriptが動作して、隠れているサブメニュー用のDIVタグのクラスを表示用に書き換えるというものです。

実は、パソコンのブラウザではほぼ希望通りなのですがAndoroido、iPhoneともに以下のようにうまくいきません。

１．指定のボタンを押してもサブメニューが表示されません。

２．Andoroidoに限り、長く触るとメニューが表示されますが、今度はどこを触ってもサブメニューが表示されっぱなしになります。

希望としては、指定の場所を触るとサブメニューが表示され、他の何処かを触ると非表示に戻るようにしたいです。

何かヒントがありましたら教えていただければ幸いです。

よろしくお願いいたします

行動規範の内容に同意します

回答1件

ベストアンサー

スマホにマウスは無いのでonmouseoverやonmouseoutは使えません。
代わりにtouchstart、touchendといったイベントがあります。

投稿2016/05/13 09:38

romiogaku

総合スコア546

ky_46

2016/05/16 03:12

ありがとうございます。 HTMLを <div id="SigE1"><img src="image/newsptop01.jpg" class="E1img" /></div> <div id="SigE2"><img src="image/newsptop02.jpg" class="E2img" /></div> <div id="SigE3"><img src="image/newsptop03.jpg" class="E3img" /></div> に書き換え、 Javascriptを window.onload = function(){ document.getElementById("SigE3").ontouchstart = function(){ document.getElementById('popmenu').className = 'popUpon'; } } に書き換えたところ、SigE3に含まれる画像、image/newsptop03.jpgをスマホ上でタッチすると、CSSがpopUponに書き換わり、メニューが出現しました。しかし、別なところをタッチすると消える　という動作には至っていないので、これは、全ての要素を指定して、それをタッチすると消えるように記述するしかないでしょうか？ ※指が離れた瞬間、メニューが消えてしまっては意味が無いですから……

行動規範の内容に同意します