【WEBサイト】ハンバーガーメニューを作る

blog


スマホなどの、画面が小さいときにメニューを表示する方法として

通称「ハンバーガーメニュー」があります。

画面の上にある、横三本線のアレです。


バンズ

バンズ

と、ハンバーガーのように見える事が名前の由来との事です。



ユーザーインターフェースとして、

ハンバーガーメニューは使いにくいとか、

わかりにくいから使うなとか、

批判的なクリエイターもいるようですが、個人的には好きなので、よくメニュー部分に採用しています。




ハンバーガーメニューの作り方を紹介している記事は多くあるのですが、

その通りに設置しても....

とりあえずは動くのですが、理想の動作をしません。



求めている物は、

・画面全体を覆う物ではなく、左もしくは右から半分位で、ぬる~とメニュー部分がスライドする

・メニュー項目が多い場合に、メニュー部分が縦スクロールする

・メニュー部分が縦スクロールしても、コンテンツ部分はスクロールしない
※これができていない物が多いです。

・閉じるボタンのクリックでも、コンテンツ部分のクリックでも、メニューをクリックでも、メニューが閉じる事

・コンテンツを縦にスクロールした状態(ページの途中)で、メニューを開いても位置が変わらない事
※ページのトップに移動してしまう物が多いです。

・Chrome,Firefox,Edge,IE,Andoroid,iPhone,iPadの各種デバイスで動作する事
※Edge,IEは斬捨でもいいか...



そんな小さなこだわりで作ったサンプルはこちら
https://www.cs3.jp/hamburgermenu_sample.html


良かったら参考にしてください。

cssもjsも、まるごと記載しています。
GitHubからダウンロードとかめんどくさい事も言いません。
ソースコードを開いてコピペして、自分のサイトに貼るだけで動きます。

動作に満足したら、お好きなように改変してください。


残念ながら、Edge,IEでの動作は少しおかしいかもです。

その他も含めて、改善して育てていく予定です。



===============================


風俗向けCTI顧客管理システム


CS3 ALiCE (シーエススリー アリス)

=================================