2017年12月25日(月)
jQuery – フルスクリーン表示するレスポンシブメニュー
ウィンドウ幅が一定の幅になるとハンバーガーメニューになり、クリックするとフルスクリーンで表示するレスポンシブなメニューを作成しました。
ハンバーガーメニューのエフェクトはNx World様のコードをお借りしています。
サンプル
See the Pen レスポンシブでフルスクリーン表示するメニュー; by ponzu (@ponzu😉 on CodePen.
↓別ウィンドウで見たい方はこちら
html
htmlでは、スマホ表示になった時用のハンバーガーメニュー .nav-buttonと、PC表示、スマホ表示共通のナビゲーション用のコード .nav-wrap を記述します。
SIT...
0
0
6
26author:
Gimmick log
ponzuさんがご自身の備忘録として更新されているブログ。Web制作全般の技術的な内容が中心ですが、特にjQueryやjavascriptに関する記事は豊富で読み応え抜群。ソース等も詳細に書かれていますのでとても参考になります。
‹ PREV
Lesson２「イメージ記憶術を身に着けよう！」 – 1億総作り手時代に”子どもがクリエイターになる練習ドリル” –
NEXT ›
ニューバランスの人気定番モデルのスニーカー5選。574や996など
Ads
ponzuさんがご自身の備忘録として更新されているブログ。Web制作全般の技術的な内容が中心ですが、特にjQueryやjavascriptに関する記事は豊富で読み応え抜群。ソース等も詳細に書かれていますのでとても参考になります。Gimmick logの記事『jQuery – フルスクリーン表示するレスポンシブメニュー』についてまとめています。
この記事は特にレスポンシブ・jQuery・LINEについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のGimmick logで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとGimmick logの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
