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. 10のjQueryスニペット

    JavaScript

    Webデザイナーが知っておくべき10のjQueryスニペット

    すべてのWebデザイナーが知っておくべき10のjQueryスニペットが…

  2. CaptionerJs

    JavaScript

    画像に開閉できるキャプションを実装できるjQueryプラグイン「CaptionerJs」

    CaptionerJsは画像に開閉できるキャプションを実装することがで…

  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryの基本的なanimateメソッドを使って適当に遊んでみる

    jQueryのanimateメソッドを使えば自分で好きなようにアニメー…

  4. Frappe Charts

    JavaScript

    シンプルでモダンなSVGチャートを実装できる「Frappe Charts」

    Frappe Chartsは、シンプルでモダンなSVGチャート(グラフ…

  5. JavaScript

    JavaScriptのlocation.searchでクエリ情報を取得してみる

    JavaScriptで、現在のページのクエリ情報(URLの末尾にある「…

  6. JavaScript

    水面にゆらゆらと波打つ動きを与えてくれるjQueryプラグイン「lake.js」

    面白そうなプラグインだったので使ってみました。画像を指定するとその画像…

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP