[B! Path] web_designerのブックマーク

[wordpress]jQueryプラグイン「PageSlide」を使用してモバイルサイトにスライドメニューを実装してみたよ。

こんちくわ。日々ロンドン五輪に興奮しまくりの@conchikuwaです。4年に1度、毎回毎回感動を与えてくれますね。日本選手に楽しんでガンバってもらいたいです！！先週末にブログ合宿の時にモバイルサイトのカスタマイズにチャレンジしたんですが、レイアウトが崩れる箇所があったので実装はしておりませんでした。その後いろいろ調べたり試したりした結果、上手く実装できたので、そのカスタマイズのご紹介させていただきます！！今回実装したカスタマイズはjQueryプラグイン「PageSlide」を利用してモバイルサイトをFacebookやGmail等のスマホアプリのように横スライドさせてメニューを表示させるというもの。モバイルサイトではPCサイトに比べて画面が小さく表示できる情報も少ないので、1アクション入れてメニューを表示させるのは有効なカスタマイズだと思います。また実装する際に参考に（基本コピペで

web_designer 2012/12/26

リンク

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

結構良さそうだったので備忘録。レスポンシブWebデザイン向けのライブラリです。モバイルのサイズになるとグローバルナビを横スライド式に切り替える、というもの。面白いですねー。これ結構いいんじゃないでしょうか。レスポンシブWebデザインにするとどうしてもナビゲーションが縦長になりがちなのでその不満は解消できるアイデアですね。 PathやFacebookのiPhoneアプリのような横スライドメニューは使いやすいかもしれない。 Pathのようにというか、全く同じじゃないんですが、モバイルサイズになると横スライド式のメニューに変更するjQueryプラグインです。ちょっといいアイデアですね。プラグインも圧縮版は3KBと軽量です。タップすると左からメニューがスライドします。手抜きで申し訳ないんですがサンプルです。 Sample※表示確認はresponsivepxを使うと楽です実機で重いのは僕が

web_designer 2012/12/26

リンク

スマホサイトにおすすめ。jQueryプラグイン『PageSlide』を使ってFacebook風メニューを再現してみました

こちらもおすすめです！(2013.08.27)→『ヌルヌルの秘訣はCSS！Googleスマホ版で採用されている使い心地のよいスライドメニューを再現した『jSlideMenu』』こんにちは、霙（@xxmiz0rexx）です。スマートフォンサイトでのメニューの表示方法をあれこれ考えた結果、素敵なjQueryプラグインに辿り着きましたのでご紹介したいと思います。コンテンツ量が多くてもメニュー分のスペースを考えずに構成できるのでかなり気に入っています :) FacebookやPathなどで使われているあのメニュー表示の動きをjQueryで簡単に再現できるプラグインです。普段はCSSで非表示にしておいて、ボタンを押した時に┃＼( °Д°)三ｶﾞﾗｯと引き戸を開けたようにメニューが出現しますｗ＊追記＊ライセンスはMITなので商用サイトでも使用OKです！参考：PageSlide: a j

web_designer 2012/12/26

リンク

SNSを横断するソーシャル検索：Pathの新機能

web_designer 2012/12/26

SNS
Path

リンク

[CSS]拡大表示する際、CSS3でぼよよ～んとしたアニメーションを加えるチュートリアル

サムネイルを拡大表示する際など、単にズームするだけでなくCSS3を使ってバウンドのアニメーションを加えるスタイルシートのチュートリアルを紹介します。デモページ実装 HTML 中央に配置する領域をdiv要素で確保し、スライドするパネルはdiv要素で、各アイテムはリスト要素で実装します。 <div id="it em-receiver"></div> <div id="thumbnail-wrapper"> <img src="images/plus.png" id="plus" width="60"> <ul class="it em-list"> <li><img class="it em" src="images/it em/craftertees.jpg" width="70"></li> <li><img class="it em" src="images/it em/gene.jpg" w

web_designer 2012/05/30

リンク

jQuery/CSS3でPath風メニューを·Pie Menu MOONGIFT

Pie MenuはPathのメニューに似たUIをjQueryで再現したライブラリです。人気のあるiOSアプリのUIはすぐに真似したモックアップが登場します。Pathもその一つです。流れるようなUIはもちろん、赤いプラスボタンのメニューが人気です。Pie Menuはそんなメニュー表示をjQuery/CSS3で再現したライブラリです。赤いボタンを押します。アニメーションがあってメニューが表示されます。パラメータを変更して表示をカスタマイズできます。密着版。デモ動画です。デスクトップ版でPie Menuを採用したとしてもなかなか使い方が分からないかもしれませんが、PhoneGapと組み合わせると話が違ってきそうです。スマートフォン向けサイトで使ってみても面白いかもしれません。 Pie MenuはjQuery/JavaScript製のソフトウェア（ソースコードは公開されていますがライ