bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScriptレスポンシブ対応で軽量なハンバーガーメニューを実装できる「elmenu」JavaScript2016.12.6レスポンシブ対応で軽量なハンバーガーメニューを実装できる「elmenu」elmenuはレスポンシブに対応した軽量のハンバーガーメニューを実装することができるjQueryを活用したメニューシステムです。圧縮版で2KBほどと非常に軽いのでページの読み込みスピードを気にする人にはピッタリですね。アイコンをクリックでナビゲーションをスライド表示elmenuの実際のデモ動作は以下からチェックできます。デモPC版ではナビゲーションが水平に並んでいます。ブラウザを縮小していくとわかると思いますが、モバイル版ではこのナビゲーションがハンバーガーメニューに変化します。ハンバーガーメニューのアイコンをクリックすると、右からメニューがスライドで表示されます。メニューを閉じる場合は再度ハンバーガーメニューをクリックすればOKです。1」の横にある下矢印をクリックすると、子メニューがスライドで表示される仕組みになっています。1.1」にも子メニューが設定されています。シンプルな操作性と見やすいデザインなので、PC・モバイルともに快適なナビゲーションを実装できるのではないでしょうか?なによりファイル容量もとっても軽量なところがうれしいポイントですね。モバイル版の場合はナビゲーションを見たいときだけハンバーガーメニューのアイコンをクリックすればいいので、スペースを有効に活用したいときには最適なナビゲーションといえそうです。いうわけで、レスポンシブ対応で軽量なハンバーガーメニューを実装したいという人は、ぜひ「elmenu」を活用してみてはいかがでしょうか?elmenuのダウンロードや詳細については、以下のページからどうぞ。jsはスクロールでビフォー・アフター画...JavaScriptテキストコンテンツをページ分割(ページネーション)できる「jPaginate」jPaginateはWebページ内のテキストコンテンツをページ分割(ペ...JavaScriptフリップ効果が特徴的なレスポンシブ対応のLightbox風jQueryプラグイン「flipLight...レスポンシブ対応のLightbox風jQueryプラグイン「flipL...JavaScript画像にモザイクをかけてマウスオーバーで解除できるjQueryプラグイン「pixelate.js」pixelate.jsというjQueryプラグインを使えば、画像にモザ...検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。TwitterFacebookInstagram最近の記事2020.02.20いつもの音楽をハイレゾ級で。ソニーの完全ワイヤレス...ソニーからハイレゾ級高音質と優れた接続性を備えた小型・軽量の完全ワイヤレスイヤホ...2020.02.19三色ボールペンの青と緑を「黒」に変えるいつも仕事で使っているジェットストリームの三色ボールペン(+シャーペン付き)。こ...2020.02.18成城石井オリジナルコーヒー豆「ブラジルイパネマ」アマゾンで買い物中に見つけた成城石井オリジナルコーヒー豆「ブラジルイパネマ」。...2020.02.17梅しば1年のどこかで無性にカリカリ梅を食べたくなる時期がある。