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

    JavaScript

    jQueryのマウス操作のイベントをまとめてみる

    マウス操作に関するイベントをまとめてみました。まとめたイベントはmou…

  3. JavaScript

    カスタマイズしやすい軽量のツールチップを実装できるjQueryプラグイン「TinyTip」

    TinyTipはカスタマイズしやすいツールチップを実装することができる…

  4. Squishy

    JavaScript

    テキストをコンテナに合わせて自動でサイズ変更してくれるjQueryプラグイン「Squishy」

    SquishyというjQueryプラグインを使えばテキストをコンテナに…

  5. JavaScript

    jQueryの基本的なセレクターを適当に試してみる

    自分の勉強用としてちょっと適当に試してみました。jQueryの基本のセ…

  6. no-image

    JavaScript

    ダイナミックな自動スライドショーを実装できる「CSS + jQuery Gallery」

    CSS + jQuery Galleryはダイナミックでかっこいい自動…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP