質問失礼します。
現在勉強でスマホサイトを制作しています。
メニューにはドロワーメニューを使用しており、ドロワーメニューを展開した際はメインページが少し見えている状態で画面をスクロールさせず固定したいです。
下記サイトを参考にやってみました。
https://blog.mismithportfolio.com/web/20150529scrollfixed
コードとしては下のものになります。
【html】
<body> <!-- サイドオープン時メインコンテンツを覆う --> <div class="overlay" id="js__overlay"></div> <!-- サイドメニュー --> <div class="side-menu" > <ul> <li><a href="#">HOME</a></li> <li class="menubtn1"><p>メニュー1</p> <ul class="submenu1"> <li><a class="innermenubtn" href="#">サブメニュー</a></li> <li><a class="innermenubtn" href="#">サブメニュー</a></li> <li><a class="innermenubtn" href="#">サブメニュー</a></li> <li><a class="innermenubtn" href="#">サブメニュー</a></li> <li><a class="innermenubtn" href="#">サブメニュー</a></li> </ul> </li> <li class="menubtn2"><p>開発機器メニュー2</p> <ul class="submenu2"> <li><a class="innermenubtn" href="#">サブメニュー</a></li> <li><a class="innermenubtn" href="#">サブメニュー</a></li> <li><a class="innermenubtn" href="#">サブメニュー</a></li> </ul> </li> <li class="menubtn3"><p>メニュー3</p> <ul class="submenu3"> <li><a class="innermenubtn" href="#">サブメニュー</a></li> <li><a class="innermenubtn" href="#">サブメニュー</a></li> <li><a class="innermenubtn" href="#">飲食システム</a></li> <li><a class="innermenubtn" href="#">サブメニュー</a></li> <li><a class="innermenubtn" href="#">サブメニュー</a></li> <li><a class="innermenubtn" href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">Contact</a></li> </ul> </div> <!-- 開閉用ボタン --> <div class="side-menu-btn" id="js__sideMenuBtn"><div class="btn_text">MENU</div></div> <!-- メインコンテンツ --> <div class="wrapper"> <header class="header"> <div id="header_logo"><a href="logo.png"></a></div> </header> <main class="contents"> <div id="HA"> <img src="header-sp.jpg"> </div> </main> <footer class="footer"> <p>フッター</p> </footer> </div><!-- wrapper --> </body>
【css】
body { font-family: 'Segoe UI', /* Windowsの欧文 */ Meiryo, /* メイリオ */ sans-serif; width: 750px; } a { text-decoration: none; } a:link { color: #000; } table { border-collapse: collapse; border-spacing: 0; } /* ヘッダー */ .header { position: fixed; width: 100%; padding: 28px 0 34px; background: #fff; border-bottom: solid 4px #008de5; } #header_logo img { width: 380px; height: auto; } /* ヘッダーメニュー */ /* サイドオープン時にメインコンテンツを覆う部分 */ .overlay { visibility: hidden; position: fixed; top: 0; left: 0; display: block; width: 100%; height: 100%; -webkit-transition: all .5s ease; transition: all .5s ease; z-index: 3; } /* メインコンテンツ */ .wrapper { position: relative; width: 100%; height: 100%; text-align: center; font-size: 24px; -webkit-transition: all .5s ease; transition: all .5s ease; z-index: 2; } /* サイドメニュー */ .side-menu { position: fixed; top: 0; right: 0; width: 600px; height: calc(100% - 150px); padding-top: 150px; text-align: center; font-size: 26px; background: #008de5; z-index: 1; visibility: hidden; overflow-y: scroll; } /* 開閉用ボタン */ .side-menu-btn { position: fixed; top: 20px; right: 20px; width: 124px; height: 36px; padding: 20px 0; text-align: center; background: #464646; border: solid 2px #000; border-radius: 10px; cursor: pointer; z-index: 4; } .btn_text { font-size: 30px; color: #fff; } /* サイドメニューオープン */ .side-open { position: fixed; width: 750px; height: 100%; } .side-open .overlay { visibility: visible; cursor: pointer; background: rgba(0,0,0,.7); } .side-open .wrapper, .side-open .overlay { -webkit-transform: translate3d(-600px, 0, 0); transform: translate3d(-600px, 0, 0); } .side-open .side-menu { visibility: visible; } /* ナビメニュー */ .side-menu li a, .menubtn1 p, .menubtn2 p, .menubtn3 p, .submenu1 a, .submenu2 a, .submenu3 a { display: block; font-size: 40px; padding: 26px 0; color: #fff; border-bottom: solid 2px #002254; } .side-menu li a:visited, a .innermenubtn:visited { color: #fff; } .submenu1, .submenu2, .submenu3 { display: none; } .submenu1 a, .submenu2 a, .submenu3 a { background: #41b6f0; } .contents { width: 100%; height: 2000px; padding: 124px 0 0; }
【js】
$(function(){ var state = false; var scrollpos; $('#js__sideMenuBtn').on('click', function(){ if(state == false) { scrollpos = $(window).scrollTop(); $('body').addClass('side-open').css({'top': -scrollpos}); state = true; } else { $('body').removeClass('side-open').css({'top': 0}); window.scrollTo( 0 , scrollpos ); state = false; } var txt = $('.btn_text').text() == 'CLOSE' ? 'MENU' : 'CLOSE'; $('.btn_text').text(txt); }); $('.menubtn1').on('click', function(){ $('.submenu1').slideToggle(400); }); $('.menubtn2').on('click', function(){ $('.submenu2').slideToggle(400); }); $('.menubtn3').on('click', function(){ $('.submenu3').slideToggle(400); }); });
上記コードで実行するとドロワーメニューを開いた際にサイトの表示が全体的に拡大されてしまいます。
またドロワーメニューを閉じるとメインページまで拡大された状態になってしまいます。
viewportも何か関係しているのかと思いいろいろ試しましたが特に効果はありませんでした。
viewportは下記のように記述しています。
<meta name="viewport" content="width=device-width">
何か解決方法をご存知の方がいらっしゃいましたらご教授いただけますと幸いです。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー