:hoverは「マウスポインタがその要素の上に乗っているとき」の動作を意味します。
スマホやタブレットの場合「マウスポインタを動かす」という動作がPCのようにはできないので、
クリック(タップ)でコントロールする方が動作が安定するかと思います。
少し遠回しな提案になりますが、iphoneの際には:hoverではなく
チェックボックスを活用したメニューにしてはいかがでしょうか?
チェックボックスを活用することで
「最初のクリック(チェックする)で開く」→「次のクリック(チェックが外れる)で閉じる」→「さらに次のクリック(チェックする)で開く」
というようにクリックで開閉させることが可能になります。
↓下記のサイトがとても親切ですので、よろしければご参考ください。
動くcssのためのメモ 画面の端からニュッと出るメニュー
https://lopan.jp/css-animation/
上記のサイトよりメニュー部分のソースを抜粋
動くサンプル:https://jsfiddle.net/yqxzoser/5/
html
1<div id="wrapper">
2<input type="checkbox" id="navTgl">
3<label for="navTgl" class="open">≡</label>
4<label for="navTgl" class="close"></label>
5<nav class="menu">
6<h2>menu</h2>
7<ul>
8<li><a href="#article1">なつかしくってあったかい、きりぎりす。</a></li>
9<li><a href="#article2">透明ノイズと紙テクスチャ。</a></li>
10<li><a href="#article3">Webサイトの作り方のまとめ!ブラウザチェック。</a></li>
11<li><a href="#article4">Photoshopのシェイプでできること。</a></li>
12<li><a href="#article5">CSSだけでスライドショーはつくれるよ。</a></li>
13</ul>
14</nav>
15</div>
css
1/* :::::: contents :::::: */
2
3#navTgl:checked ~ .contents {
4-webkit-transform: translateX(250px);
5transform: translateX(250px);
6}
7/* :::::: toggle button :::::: */
8#navTgl {
9display: none;
10overflow: hidden;
11}
12label {
13cursor: pointer;
14position: fixed;
15top: 0;
16left: 0;
17}
18.open {
19z-index: 2;
20width: 50px;
21height: 50px;
22color: white;
23background-color: lightSeaGreen;
24font-size: 2em;
25line-height: 50px;
26text-align: center;
27-webkit-transition: background-color .6s, -webkit-transform .6s;
28transition: background-color .6s, transform .6s;
29}
30#navTgl:checked + .open {
31background-color: indianRed;
32-webkit-transform: translateX(250px);
33transform: translateX(250px);
34}
35.close {
36pointer-events: none;
37z-index: 1;
38width: 100%;
39height: 100%;
40transition: background-color .6s;
41}
42#navTgl:checked ~ .close {
43pointer-events: auto;
44background-color: rgba(0,0,0,.3);
45}
46/* :::::: drawer menu :::::: */
47.menu {
48z-index: 1;
49position: fixed;
50overflow: auto;
51top: 0;
52left: 0;
53width: 250px;
54height: 100%;
55padding: 10px;
56background-color: rgba(0,0,0,.6);
57-webkit-transform: translateX(-100%);
58transform: translateX(-100%);
59-webkit-transition: -webkit-transform .6s;
60transition: transform .6s;
61}
62#navTgl:checked ~ .menu {
63-webkit-transform: translateX(0);
64transform: translateX(0);
65}
66.menu h2,
67.menu li a {
68color: white;
69}
70.menu h2 {
71text-align: center;
72}
73.menu ul,
74header nav ul {
75padding: 0;
76}
77.menu li {
78border-bottom: 1px solid rgba(255,255,255,.6);
79font-size: .8em;
80line-height: 1.4;
81}
82.menu li:first-child {
83border-top: 1px solid rgba(255,255,255,.6);
84}
85.menu li a,
86header nav li a {
87display: block;
88padding: 1em 2em;
89text-decoration: none;
90transition: background-color .6s;
91}
92.menu li a:hover {
93background-color: black;
94}
95
96/* :::::: header, footer :::::: */
97header,
98footer,
99.menu {
100box-sizing: border-box;
101}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/14 04:28
2017/08/17 17:13
2017/08/29 06:29