Simple HTML Menu

JavaScript

モバイルにもピッタリなレスポンシブ対応のメニュー実装「Simple HTML Menu」

Simple HTML Menuは、モバイルにもピッタリなレスポンシブに対応したシンプルなメニューを実装することができます。PCでは水平メニューとして、モバイル版では垂直の開閉式メニューとして機能します。

Simple HTML Menu

デモ

デモでは画面上部の右側にメニューが水平に並んでいます(PCからの閲覧の場合)。レスポンシブにも対応しているので、ブラウザの幅を縮小していくとメニューがモバイル版に切り替わります。

モバイル版のメニューでは、ハンバーガーアイコンと「Menu」と書かれた文字のみが表示されます。ここをクリックすると、メニューが垂直にスライドダウンで開かれます。

メニューが開かれた状態になると、ハンバーガーアイコンが「×」のアイコンに変化します。再度この場所をクリックすると、今度はメニューがスライドアップで閉じられ、それと同時に「×」のアイコンも元のハンバーガーアイコンに戻ります。

PC版のメニューのままだと、スマホからの操作の場合、メニューが小さくて選択しづらいですからね。よく見るモバイル版メニューですが、やはりスマホからだとこのようなタイプのメニューが操作しやすいと思います。

マークアップもシンプルでわかりやすく記述できるがグッドです。

というわけで、PCやスマホからでも操作しやすいレスポンシブ対応のシンプルなメニューを実装したい方は、ぜひ「Simple HTML Menu」を活用してみてはいかがでしょうか?

Simple HTML Menu

関連記事

  1. FakeLoader.js

    JavaScript

    フルスクリーンでカッコいいローディングアニメーション・FakeLoader.js

    FakeLoader.jsはフルスクリーンでカッコいいローディングアニ…

  2. jQuery-ResizableColumns

    JavaScript

    テーブルのカラムをリサイズできる「jQuery-ResizableColumns」

    jQuery-ResizableColumnsは、テーブルのカラムをリ…

  3. Flickerplate
  4. TOAST UI Chart

    JavaScript

    多彩なチャートを描画できる「TOAST UI Chart」

    TOAST UI Chartは多彩なチャートをWebページに描画できる…

  5. JavaScript

    JavaScriptの配列操作をメモがてら整理してまとめてみる

    自分用のメモです。JavaScriptの配列操作に関するメソッドなんか…

  6. Inspiration for Menu Hover Effects

最近の記事

  1. cheero Stream 10000mAh
  2. BOSE HOME SPEAKER 300
  3. RP-PC112
  4. SRS-XB402M
  5. Lite LR30

アーカイブ

PAGE TOP