Simple HTML Menu

JavaScript

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

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

Simple HTML Menu

デモ

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

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

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

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

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

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

Simple HTML Menu

jQuery Tabs with Content Overlaysスタイリッシュなタブコンテンツを実装できる「jQuery Tabs with Content Overlays」前のページ

コンテンツエリアがダイナミックに開かれる「Expanding Bar Navigation Concept」次のページExpanding Bar Navigation Concept

関連記事

  1. jquery.adaptive-backgrounds.js
  2. Liquid Slider

    JavaScript

    タブパネル式のレスポンシブなjQueryスライダー「Liquid Slider」

    ちょっと珍しそうなスライダーを見つけたのでご紹介します。タブパネルにも…

  3. no-image

    JavaScript

    シンプルでエレガントなモーダルボックスを実装できる「Fallr.js」

    Fallr.jsはシンプルでエレガントなモーダルボックスを実装できるj…

  4. Cavendish.js

    JavaScript

    CSS transitionsを活用したシンプルなスライドショーを実装できるjQueryプラグイン「…

    CSS transitionsを活用したシンプルなスライドショーを実装…

最近の記事

  1. ダミアン・ハースト 桜
  2. パッキングエリア
  3. あらびきソーセージパイ
  4. REACH フロス
PAGE TOP