質問: ハンバーガーメニューを作成し、Google ChromeやAndroidでは正常に動作しますが、SafariとiPhoneで閲覧した際、ハンバーガーメニューをタップしても反応が全くありません。 恐れ入りますが、ご教示頂けますと幸いです。 HTMLとCSSで作り、コードは以下の通りとなります。 ``` サービス内容 特徴 コース紹介 料金プラン 実績紹介 資料請求/お問い合わせ ``` ``` div#ham-menu{ display: block; position: fixed; top: 0; background-color: #ffffff; /*メニュー背景色*/ box-sizing: border-box; height: 100%; padding: 10px 40px; /*メニュー内部上下左右余白*/ right: -260px; /*メニュー横幅1と合わせる*/ -webkit-transition: transform 0.3s linear 0s; transition: transform 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/ width: 260px; /*メニュー横幅1*/ z-index: 1000; } div#ham-menu::before { background-color: #ffffff; /*ボタン部分背景色*/ color: #333; /*アイコン(フォント)色*/ content: "≡"; /*メニューアイコン*/ display: block; font-size: 50px; /*アイコン(フォント)サイズ*/ height: 50px; line-height: 50px; /*縦位置中央化*/ position: absolute; right: 100%; text-align: center; top: 0px; width: 50px; } div#menu-background { background-color: #333; /*黒背景部分背景色*/ display: none; height: 100%; opacity: 0; position: fixed; right: 0; top: 0; transition: all 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/ width: 100%; z-index: -1; } div#ham-menu:hover { -webkit-transform: translate3d(-250px); transform: translate(-250px); /*メニュー横幅1と合わせる*/ } #ham-menu:hover + #menu-background { opacity: 0.5; /*黒背景部分透過度*/ z-index: 999; display: block; } div#ham-menu a{ text-decoration: none; color: #808080; } ``` ネットで色々調べ、ontouchstartをham-menuの中に入れてみましたが変わりませんでした。 何卒宜しくお願い致します。
回答: 引き続き色々と調べながら試してみましたが、HTMLとCSSではうまくいかずjQueryを使ったところ正常に動作しました。 お騒がせ致しました。閲覧して頂いた方々には、感謝いたします。 ありがとうございました。