【ハンバーガーメニューの実装にあたり利用したプラグイン】
drawer
http://git.blivesta.com/drawer/
【実現したいこと】
画面左上のハンバーガーメニューの表示を下記の画像のように変更したい。
###変更前
(メニューを閉じてる時)
(メニューを開いてる時)
###変更後
(メニューを閉じてる時)
変更なし
(メニューを開いてる時)
ヘッダーの高さ分だけ下にずらしたい
つまり、閉じてる時のハンバーガーメニューの位置はそのまま変更せずに、
メニューを開いたときにヘッダーの高さ分だけ下にすらしたいです。
html
1<div class="header"> 2 <header role="banner"> 3 <button type="button" id="edit-drawer-hamburger" class="drawer-toggle drawer-hamburger"> 4 <span class="sr-only">toggle navigation</span> 5 <span id="edit-icon" class="drawer-hamburger-icon"></span> 6 </button> 7 <nav class="drawer-nav" role="navigation"> 8 <ul class="drawer-menu" style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);"> 9 <li><a class="drawer-brand" href="#" data-slimstat="5">TOPへ</a></li> 10 <li><a class="drawer-brand" href="#" data-slimstat="5">UpToUとは</a></li> 11 <li><h3 class="drawer-brand">▼テーマ一覧</h3></li> 12 <li><a class="drawer-menu-item" href="#" data-slimstat="5">テクノロジー</a></li> 13 <li><a class="drawer-menu-item" href="#" data-slimstat="5">ファイナンス</a></li> 14 </ul> 15 </nav> 16 </header> 17</div>
cssはCDNが提供されていたのでこちらを利用しています。
http://git.blivesta.com/drawer/
他にもこうした情報が欲しいなどあればおっしゃってください。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー