タグ

ナビゲーションと対応に関するmasakaz77のブックマーク (2)

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

    Simple HTML Menuは、モバイルにもピッタリなレスポンシブに対応したシンプルなメニューを実装することができます。PCでは水平メニューとして、モバイル版では垂直の開閉式メニューとして機能します。 以下、Simple HTML Menuの実際のデモページになります。 デモ デモでは画面上部の右側にメニューが水平に並んでいます(PCからの閲覧の場合)。レスポンシブにも対応しているので、ブラウザの幅を縮小していくとメニューがモバイル版に切り替わります。 モバイル版のメニューでは、ハンバーガーアイコンと「Menu」と書かれた文字のみが表示されます。ここをクリックすると、メニューが垂直にスライドダウンで開かれます。 メニューが開かれた状態になると、ハンバーガーアイコンが「×」のアイコンに変化します。再度この場所をクリックすると、今度はメニューがスライドアップで閉じられ、それと同時に「×」の

    モバイルにもピッタリなレスポンシブ対応のメニュー実装「Simple HTML Menu」 – bl6.jp
  • レスポンシブWEBデザイン用ナビゲーション&メニューのベストパターン16 | co-jin

    レスポンシブWEBデザインは当たり前の世の中になりました。 当たり前になるにつれて、レスポンシブWEBデザインに関連するさまざまなパーツが類型化・体系化されてきています。 今回ご紹介するナビゲーション&メニューについても、ある程度、メジャーなパターンというものが出来上がってきています。 そこで今回は、レスポンシブWEBデザインのナビゲーション&メニューのベストパターンをご紹介します。 多くのものはjQueryを使って簡単にだれでも実装できるものばかりです。 SlickNav ウインドウ幅が指定サイズ以下になると、メニューアイコンに変化して右上に表示されるタイプです。 多階層にも対応していていたり、アニメーションで動きもつけられます。 ie7以上に対応。 詳しい実装方法がサイトにのっているのでわかりやすいです。 SlickNav FlexNav 指定サイズ以下になると、メニューバーのみが表示

    レスポンシブWEBデザイン用ナビゲーション&メニューのベストパターン16 | co-jin
  • 1