safariやiphoneでスマホメニューが表示されない。

お世話になります。
上部に固定したスマホメニューを作成したいと思っています。

ですが、safariやiphoneでは、メニューが表示されず困っております。
画面からはみでても、スクロールしてみれるようにしたいと思っております。

お分かりでしたらアドバイスいただければ、幸いです。
宜しくお願いいたします。

js
1	<script>
2// ACCORDION
3$( function() {
4    function accordion() {
5        $( this ).toggleClass( 'active' ).next().slideToggle( 300 );
6    }
7		$(".accordionbox dt").on("click", function() {
8		$(this).next().slideToggle();	
9		// activeが存在する場合
10		if ($(this).children(".accordion_icon").hasClass('active')) {			
11			// activeを削除
12			$(this).children(".accordion_icon").removeClass('active');				
13		}
14		else {
15			// activeを追加
16			$(this).children(".accordion_icon").addClass('active');			
17		}			
18	});
19	
20    $( '.accordion .toggle' ).click( accordion );
21    $( '.accordionbox dd' ).click( function() {
22    $( '.accordion .toggle' ).click();
23    } );
24} );
25</script>
26

html
1<header>
2<div class="accordion">
3  <ul>
4    <li>
5		<h1 class="rogo"><a href="<?php bloginfo('url'); ?>/"><img src="<?php echo get_template_directory_uri(); ?>/images/top/top_logo.png" alt="coffee" ></a></h1>
6		
7<a class="toggle"><span class="fa fa-navicon">MENU</span></a>
8<ul>
9<p></p>
10<li><a href="<?php bloginfo('url'); ?>/">HOME</a></li>	
11<li>
12<div id="accordion" class="accordionbox">
13 <dl class="accordionlist">
14 <dt class="clearfix">
15  <div class="title">
16<p>本店メニュー</p>
17</div>
18            <p class="accordion_icon"><span></span><span></span></p>
19        </dt>
20        <dd><li><a href="<?php bloginfo('url'); ?>/kawanishi_menu/#001">季節限定メニュー</a></li>
21					<li><a href="<?php bloginfo('url'); ?>/menu/#002">ドリンクメニュー</a></li>
22					<li><a href="<?php bloginfo('url'); ?>/menu/#003">スイーツメニュー</a></li>
23					<li><a href="<?php bloginfo('url'); ?>/menu/#004">グランドメニュー</a></li>
24					<li><a href="<?php bloginfo('url'); ?>/menu/#005">お得なメニュー</a></li></dd>
25
26        <dt class="clearfix">
27            <div class="title">
28                <p>支店メニュー</p>
29            </div>
30            <p class="accordion_icon"><span></span><span></span></p>
31        </dt>
32   <dd><li><a href="<?php bloginfo('url'); ?>/itami_menu/#001">季節限定メニュー</a></li>
33<li><a href="<?php bloginfo('url'); ?>/menu/#002">ドリンクメニュー</a></li>
34<li><a href="<?php bloginfo('url'); ?>/menu/#003">お得なメニュー</a></li><li><a href="<?php bloginfo('url'); ?>/menu/#004">デザート</a></li>
35		</dd>
36					
37			
38    </dl>
39</div>
40</li>
41				
42					<li><a href="<?php bloginfo('url'); ?>/news">ニュース</a></li>
43					<li><a href="<?php bloginfo('url'); ?>/news-cat/coupon">クーポン情報</a></li>
44					<li><a href="<?php bloginfo('url'); ?>/store">店舗情報</a></li>
45				</ul>
46			
47    </li>
48  </ul>
49</div>
50		</header>
51

css
1
2body header {
3    position: fixed;
4    width: 100%;
5    z-index: 100;
6    overflow: hidden;
7    position: absolute;
8}
9body header div.accordion {
10    background-image: url(./images/top/top_bg.png);
11    background-position: top center;
12    background-repeat: repeat;
13    background-size: auto 85px;
14    overflow: hidden;
15    width: 100%;
16    display: block;
17}
18body header div.accordion h1 {
19    margin: 0.2em 0 0 0.2em;
20    float: left;
21}
22body header div.accordion > ul > li > a {
23    display: inline-block;
24    color: #fff;
25    font-size: 16px;
26    text-decoration: none;
27    cursor: pointer;
28    position: relative;
29    float: right;
30    z-index: 999999;
31    border: solid 2px black;
32    margin: 1em;
33    background-color: #342d27;
34    padding: 0.5em;
35}
36header div.accordion > ul > li > ul {
37    z-index: -999;
38    position: fixed;
39    top: 0;
40    left: 0;
41    width: 100%;
42    height: 100%;
43    overflow: scroll;
44    clear: both;
45}
46header div.accordion > ul > li > ul > p {
47    height: 84px;
48}
49header div.accordion > ul > li > ul > li {
50    overflow: auto;
51    -webkit-overflow-scrolling: touch;
52}
53body header div.accordion > ul > li > ul > li > a {
54    display: block;
55    color: #342d27;
56    background-color: #f7f7f7;
57    border-bottom: 1px solid #d2d2d2;
58    padding: 1em;
59    position: relative;
60}
61.accordionlist dt {
62    cursor: pointer;
63    display: block;
64    color: #342d27;
65    background-color: #f7f7f7;
66    padding: 1em;
67    border-bottom: 1px solid #d2d2d2;
68}
69.clearfix:before, .clearfix:after {
70    display: table;
71    line-height: 0;
72    content: "";
73}
74.accordion_icon {
75    position: relative;
76    width: 30px;
77    /* height: 30px; */
78    float: right;
79    top: 5px;
80    bottom: 0;
81}
82.accordion_icon, .accordion_icon span {
83    display: inline-block;
84    transition: all 0.4s;
85    box-sizing: border-box;
86}
87.accordionlist dd > li {
88    background-color: #4e3923;
89    border-bottom: 1px solid #d2d2d2;
90}
91.accordionlist dd > li a {
92    color: white;
93    display: block;
94    padding: 1em;
95}
96

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

回答1件

ベストアンサー

あまりイメージが付かないのですが、

まず <header> の position 指定が重複しているので fixed に修正します。また先頭に配置するため top 指定を入れます。

css
1body header {
2    position: fixed;
3    position: absolute;
4}
5
6↓
7
8body header {
9    position: fixed;
10    top: 0;
11}

あとメニュー自体は固定された <header> にそのまま置けばいいので、fixed 配置は要らない気がします。

css
1header div.accordion > ul > li > ul {
2    position: fixed;
3}
4
5↓
6
7header div.accordion > ul > li > ul {
8}

最後にメニューバーにメインコンテンツが隠れないよう、上部に余白を空けます

css
1body {
2    margin-top: 5rem;
3}

こんなイメージでしょうか？

正直、現代ならBootstrap 使うのが楽で確実な気がしますが。

投稿2017/06/29 14:11

miyahan

総合スコア3095

cues

2017/06/30 00:43

ご回答いただきありがとうございます＾＾試したところ思ったような動作には至らなかったのですが、教えていただきました、サイトを拝見させていただきます。ありがとうございます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

safariやiphoneでスマホメニューが表示されない。

関連した質問