Q&A
スクロールした時はどのような動作にしたいですか？
ヘッダはスクロールに追従するのですか？
追従しない場合は、ドロワーは縦幅いっぱいで表示されていいですか？
現在Webアプリの開発を進めています。
ページにはメニューなどもあるのですが、中央には画像表示などを行うため、
使いたい時だけ表示させられるドロワーの実装を試みています。
html
1hoge.html 2<!DOCTYPE html> 3<html> 4<head> 5<!-- drawer.css --> 6<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.1/css/drawer.min.css"> 7<link rel="stylesheet" href="css/slide.css"> 8<!-- jquery & iScroll --> 9<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 10<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script> 11<!-- drawer.js --> 12<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.1/js/drawer.min.js"></script> 13<script src="js/hogehoge.js"></script> 14<title>ツール</title> 15</head> 16<body class="drawer drawer--left"> 17 <div class="center"> 18 <div class="banner"> 19 <!-- ハンバーガーボタン --> 20 <button type="button" class="drawer-toggle drawer-hamburger"> 21 <span class="sr-only">toggle navigation</span> 22 <span class="drawer-hamburger-icon"></span> 23 </button> 24 <!-- ナビゲーションの中身 --> 25 <nav class="drawer-nav" role="navigation"> 26 <ul class="drawer-menu"> 27 <li><a class="drawer-menu-item" href="#">メニュー１</a></li> 28 <li><a class="drawer-menu-item" href="#">メニュー２</a></li> 29 <li><a class="drawer-menu-item" href="#">メニュー３</a></li> 30 <li><a class="drawer-menu-item" href="#">メニュー４</a></li> 31 </ul> 32 </nav> 33 </div> 34 <main role="main" style="margin-aligne:center;margine-left:auto;margine-right:auto;"> 35 <p><img src="images/hoge.png"></p> 36 </main> 37 </div> 38</body> 39</html>
javascript
1$(document).ready(function() { 2 $('.drawer').drawer(); 3});
CSS
1.center main { 2 text-align: center; 3} 4.center main img { 5 max-width: 100%; 6 height: auto; 7}
上記のコードでは、ドロワーはページの縦全体、画像はページ全体（画像サイズにもよりますが）で
表示されます。
質問
上記を、以下のような動きに改変したいのですが、
どこに対して変更を進めていけばよろしいでしょうか。
①ページ上部にヘッダー（タイトル表示部分）
②ドロワーのハンバーガーボタンは①ヘッダー部分へセット。
③ドロワーはヘッダーに被らないようにスライド。
※イメージは、Youtubeのようなページになります。
画面にヘッダーをつけるのも、framesetタグやスプリットレイアウト、CSSでDivサイズ調整、など色々と説明サイトが見つかるのですが、「質問に挙げた目的を果たすには？」という点で行き詰ってしまっております。
WEB製作の経験も浅く、恐縮ですが、ご教授のほど、お願い致します。
補足
PHPなら、などがあるのかもしれません。
そのほか、挙げているコードへの更新では無理。１から作り直す必要ありなどもあるかもしれません。
言語変更や作り直しなどは、要件を満たす目的上ではしょうがないものとも思っていますので、
どしどし言って頂けると幸いです。
返答が遅くなり申し訳ありません。
ヘッダはあくまで固定にして、スクロールはヘッダ以外の下部を対象にしたいと考えています。
そしてドロワーはヘッダに被らないようにしたく思っています。
・ヘッダはスクロールに追従しない
・ドロワーはスクロールに追従する（ヘッダを置いていく）
・スクロールした時、ドロワーは縦幅いっぱいで表示される
という理解で合っていますか？
以下のサイトの"DEMO"で挙げているものが近いです。
https://tech-dig.jp/hamburger-global-nav/
このドロワーを、ヘッダに被さらなくなるようにしたいです。
回答1件
0
ベストアンサー
こんな感じでしょうか。
サンプル
css
1.drawer--left.drawer-open .drawer-hamburger { 2 left: 0; 3} 4.drawer-nav { 5 top: 60px; 6}
投稿2019/06/11 11:04
総合スコア36115
ご回答ありがとうございます。
回答頂いたコードに、高さ60pxのヘッダを追加と、ハンバーガーボタンをヘッダ配置にすることで、
求めていた形になりました。
drawer-navのTOP調整でできるものなのですね。
ありがとうございました。
あなたの回答
tips
プレビュー
