• かちびと.net

    モバイルサイズになると自動でグローバルメニューをPathのような横スライド式に切り替える軽量jQueryプラグイン・PageSlide Responsiveのご紹介。なかなか素敵なユーザビリティになりそうです。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

モバイルサイズになると自動でグローバルメニューをPathのような横スライド式に切り替える軽量jQueryプラグイン・PageSlide Responsive

スポンサーリンク

結構良さそうだったので備忘録。レスポンシブWebデザイン向けのライブラリです。モバイルのサイズになるとグローバルナビを横スライド式に切り替える、というもの。面白いですねー。

これ結構いいんじゃないでしょうか。レスポンシブWebデザインにするとどうしてもナビゲーションが縦長になりがちなのでその不満は解消できるアイデアですね。

PathやFacebookのiPhoneアプリのような横スライドメニューは使いやすいかもしれない。

PageSlide Responsive


Pathのようにというか、全く同じじゃないんですが、モバイルサイズになると横スライド式のメニューに変更するjQueryプラグインです。

ちょっといいアイデアですね。プラグインも圧縮版は3KBと軽量です。


タップすると左からメニューがスライドします。

手抜きで申し訳ないんですがサンプルです。

Sample※表示確認はresponsivepxを使うと楽です

実機で重いのは僕がでかい画像使ってるからです。

コード

    <script type='text/javascript' src='http://ajax.microsoft.com/ajax/jquery/jquery-1.7.min.js'></script>
    <script src="jquery.pageslide.min.js"></script>
    <script>
        $(".open").pageslide();
    </script>

こんだけ。

        <h1><a class="open" href="#nav">Menu</a>PageSlide Responsive デモ</h1>
        <ul id="nav">
            <li><a href="">TOP</a></li>
            <li><a href="">製品</a></li>
            <li><a href="">価格</a></li>
            <li><a href="">沿革</a></li>
            <li><a href="">問い合わせ</a></li>
        </ul>

<a class=”open”>は通常は隠れています。ブレイクポイントに達すると表示され、変わりに<ul id=”nav”>が横に隠されます。<a class=”open”>をクリックすると<ul id=”nav”>がスライドインする、という仕組み。

冒頭でモバイルサイズと言ってますが、ブレイクポイントをiPadに変えればタブレットにも使えますね。これ、どっかで使いたい。素敵なユーザビリティ向上になりそうな気がします。ライセンスはMITです。

PageSlide Responsive

URL :
TRB :

Comments & Trackbacks (11)

  1. viora

    これって表示するメニューがデバイス画面の高さより長い場合ってどうするんだろう。
    fixedで固定しなければいいけど、そうなると全体がスクロールするし。
    iframeでメニュー読み込んでもiPhoneはスクロール操作がいまいち安定していないし。

    • シロ

      コンテンツ次第でいろいろ方法はあるので工夫してみてくださいー

  2. Moon

    こんにちは
    Page sideをWordpressに実装するにはheader.phpにどのように記述すればいいのでしょうか?
    ご教示お願いします。

    • シロ

      こんにちは。

      MoonさんのWebサイトで利用されているWordPressでjQueryをどのように扱っているかで回答も変わりますが、WordPressに元から内包されているjQueryをご利用でしたら$が使えませんので、セレクタの指定は

      jQuery(“.open”).pageslide();

      とする必要がありそうです。

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services