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. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのeachメソッドのお勉強

    今回はjQueryのeachメソッドを使ってみました。なんかとても便利…

  2. Data Img

    JavaScript

    ブラウザ幅に応じて画像を切り替えれるレスポンシブ対応のjQueryプラグイン「Data Img」

    Data Imgはブラウザ幅に応じて最適なサイズの画像を切り替えて表示…

  3. Dropit

    JavaScript

    シンプルでフレキシブルなドロップダウンメニュー「Dropit」

    Dropitはシンプルでフレキシブルなドロップダウンメニューを実装でき…

  4. Changing Background Color while scrolling
  5. Vide

    JavaScript

    背景にvideoを表示できるjQueryプラグイン「Vide」

    VideというjQueryプラグインを使えば、Webサイトの背景にvi…

  6. no-image

    JavaScript

    シンプルなイメージカルーセルを実装できる「Boishakh carousel」

    Boishakh carouselはシンプルなイメージカルーセルを実装…

最近の記事

  1. Dyson Pure Cool Me
  2. ルック セレクション
  3. シルキーウインドモバイル
  4. アリエール パワージェルボール3D

アーカイブ

PAGE TOP