div#sysWrap { } top: -150px; left: 8%; #btnBoxKey { font-size: 2vmin; } } position: absolute; #change-responsive-ecsite #sysMain #LPchageall p.wantbox { } left: 10%; max-width: 95%; display: none; right: 3%; ハンバーガーメニュー・ドロワーメニューの作り方2 - Duration: 11:53. .cp_mainvisual .aws{ .cp_mainvisual .aws { padding-top: 5px; z-index: 107 !important; bottom: 10px; } bottom: 90px !important; background:url(https://aiship.jp/img/dotimg/plus.png) no-repeat right center; 【css】ハンバーガーメニューの作り方【レスポンシブデザイン】 HTMLとCSSを用いたハンバーガーメニューの作り方をご存知ですか？ ハンバーガーメニューのデザインからアニメーションの実装まで詳し … .drawer-hamburger { bottom: -3%; top: 3%; line-height: 2; bottom:10px; ということで、レスポンシブにデザインする際に使えそうな横メニューの作り方を解説しました。 今回は8個のメニューということで、3パターンに変形するようにしました。これが7つになると2列にはしにくいので、今回のようにはいかないと思います。 #change-responsive-ecsite #sysMain #LPchageall p.wantbox { margin-bottom: 4%; .cp_mainvisual .aws{ 公開：2016-01-24 / ユーザビリティ / スマホ, ux/ui, メニュー, ナビゲーション, ハンバーガー, 画面設計, エリア定義, レスポンシブ 更新：2017-02-12 今回はスマートフォンやタブレット向けのWebサイトで採用されることの多いナビゲーションUI「ハンバーガーメニュー」の作り方をまとめました。, 最近はボトムナビゲーションも増えてきて、ハンバーガーメニュー不要論など見かけること増えてきましたが、まだまだ採用されているところも多く現役なUIかと思います。, 今回はなるべく簡単なパターンで実装できる方法を僕なりにまとめましたので勉強中の方は是非ご覧ください！, ※2020年12月更新（フォーカスが当たっていることが分かるようにoutline:0のリセットは削除しました）, また、バーガーボタンだけ抜粋したサンプル集も作っているのでこちらもよかったらご覧ください。, リセットCSSはデフォルトのスタイリングをほぼ無くすことができる「destyle.css」から一部を抜粋してます。, メニューは表示範囲内のリストが縦並びに配置されるように、flex-direction: columnを指定しています。, あとはリストの中身を整えます。liタグ一つずつに幅・高さ100％を指定してます。また、Flexboxで「メニューn」のテキストをliタグ内中央に配置します。, あとはメニューエリアを表示させないようにpositionで画面外に配置する記述を追加します。（メニューエリア幅以上のマイナス指定が必要です）, ボタンをdivやinputで作るやり方を見ることがありますが、デメリットとしてPCのタブキー操作でフォーカスが当たらないという点があります。, ※今回使用するdestyle.cssはbuttonタグのフォーカスも消してしまうので、必要に応じていじる必要があります。, また、バーガーの線をspanタグを三つ並べるパターンも見ることがありますが、HTMLから余計な記述を除外するために今回はCSSの擬似要素で対応する方法をとります。, 一番下のbackground-colorはあとで消します。今回はボタンを右上に配置するのでpositionで指定します。, 次に肝心のバーガー線ですが、spanタグに指定したクラスに幅と高さを持たせて色をつけます。, あとは上下の線の基準にしたいのでposition: relativeを指定します。, 線自体の大きさは今回btnクラスで指定している（図だと赤色の領域）に対して幅100％としています。, beforeが上、afterが下の線です。当然ですが幅・高さの指定も必要ですが、元要素と同じにしたい時は上記のように100％で指定します。, 上下の線の位置指定はpositionだと崩れやすいのでtransform: translateYで指定しています。（このあたりで.btnのbackground-color: redは消しておいてもいいです。）, コメントの通りですが、js-btnクラスをクリックすると、toggleClassメソッドでメニューとバーガーの線、二つのクラスに対してopenクラスをつけ外しさせます。, まずはpositionで画面外に配置していた.menuクラスにopenクラスを付与させて、位置を0に戻します。今回で言うと -70％ → 0 と移動させることになります。, transparentは色の値で透明にさせることができます。真ん中の線を透明にさせます。, 上下の線はtransform: rotateで傾けます。上は(45deg)、下は(-45deg)にしました。, 上記は本題と関係無かったので説明は割愛していますが下のコード内には反映させてます。あと背景画像の消してます。, 一応補足しておくと、PC時のスタイル指定はラスト16行の記述だけです。btnクラスを消したのと、menuクラスをcolumnからrowにして横並びにしただけです。, コードをコピペして、画像や値を変えながら自分なりに変化を見てみると理解も深まると思います。, ハンバーガーメニューはバーガーボタンの動かし方と、メニュー表示のさせ方で工夫ができます。, また、今回扱ったようなjQueryについてもっと体系的に知っておきたいという勉強熱心な方は下の書籍を読むのがオススメです。, 異業種で仕事をしながら、副業でWeb制作をしているアラサーリーマンです。
z-index: 108 !important; } jQuery、CSS初心者のためのレスポンシブな「ハンバーガーメニュー」を実装する方法を解説していきます。イラストと実際のソースコードを掲載しながら解説していますので、初心者の方でも簡単に理解で …