Demo #1 (Normal) | Demo #2 (Vertical thumnbails) | Demo #3 (Horizontal thumbnails) | Demo #4 (Dynamic height) | Demo #5 (Hundred percent) | Demo #6 (Viewline)
主にスマホサイトで用いられているアコーディオンメニュー。ゲーム系サイトであればゲーム内メニューの表示に。会員系サイトであれば会員メニューの表示に。EC系サイトであればカテゴリーメニューの表示に…などなど。 表示領域が限られているスマホサイトならではの便利な機能だと思います。今回はプラグインなしのアコーディオンメニュー制作のメモ。 アコーディオンメニューの中でも、特に汎用性の高い2つを備忘録的にメモ。 アコーディオンメニュー(ul、liを使用) ulとliを使用してのアコーディオン。 アコーディオンの開閉と同時に矢印の切り替えを実装。 複数の項目を同時に開くことが可能。同じ部分をクリックすることによって非表示になります。 jQuery $('.accordion_ul ul').hide(); $('.accordion_ul h1').click(function(e){ $(this).
スマートフォンにも使える、クリックで開くアコーディオンメニューjQuery スマートフォン等、限られたスペースで複数のコンテンツを設置できるアコーディオンメニュー。 シンプルなコードで動作しますので、実装してみてはいかがでしょうか。 デモページ DEMO 説明 今回は2種類のアコーディオンを紹介します。 1つは「ul」で組むリスト、もう1つは「dl」で組むリストです。 なお、「ul」リストは複数開くことができ、「dl」リストは別のタブが閉まるようになっていますので使い分けて見て下さい。 JS $(function(){ $(".accordion p").click(function(){ $(this).next("ul").slideToggle(); $(this).children("span").toggleClass("open"); }); $(".accordion dt"
Result jQuery//最初以外を隠す $('#faq .answer').not(':first').hide(); //クリックイベント $('#faq .question').click(function() { //スライドの処理 if($(this).next('.answer').is(':visible')) { $(this).next('.answer').slideUp(300); } else { $(this).next('.answer').slideDown(300).siblings('.answer').slideUp(300); } });css.question { padding:5px; font-weight:bold; font-family:Arial; font-size:14px; border:1px solid #ddd; ba
右はマウスオーバーでメニューがスライドします。 左はクリックするとコンテンツがスライドし、もう一度クリックすると閉じます。 吾輩(わがはい)は猫である。名前はまだ無い。 どこで生れたかとんと見当(けんとう)がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪(どうあく)な種族であったそうだ。この書生というのは時々我々を捕(つかま)えて煮(に)て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌(てのひら)に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始(みはじめ)であろう。この時妙なものだと思った感じが今でも残っている。第一毛を
.list-box { overflow: hidden; *zoom: 1; max-width: 320px; } .list-box ul { margin: 0 -10px 0 0; //ネガティブマージン } .list-box li { float: left; width: 100px; height: 100px; margin: 0 10px 0 0; list-style: none; background: #f39c12; } %値の横並び例横幅のサイズが違うのは、ウインドウの拡大・縮小でちゃんとリキッドレイアウトになっているか確認できるようにした為です(320pxだと小さくて確認できなかったので・・) .list-liquid-box { overflow: hidden; *zoom: 1; max-width: 500px; } .list-liquid-bo
Warning: Declaration of description_walker::start_el(&$output, $item, $depth, $args) should be compatible with Walker_Nav_Menu::start_el(&$output, $item, $depth = 0, $args = NULL, $id = 0) in /home/yudeayako/www/fumufumu/wp-content/themes/fumufumu/functions.php on line 0 Googleマップが新しくなってて、旧マップに戻しても昨日(3/6)にはあったのに本日(3/7)旧マップから機能がなくなってることに気づいてガクセンとしているゆでです(´・ω・`)<なぜだ・・。 画像に画像リンク貼った場合(リンク先:メディアファイル)に、
Latest Version: 1.3 Latest Release Date: December 3, 2011 Original Release Date: March 30, 2011 Compressed: 1.47kb Uncompressed: 4.84kb View GitHub Repository About The Plugin jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It's great to use as a hover effect or a way to direct attention to an element. 2016-11-04 Update This project is no longer being
画像やボックス要素にマウスホバーすると 別のボックス要素をフェードエフェクトや スライドアニメーションで表示させる事が 出来るjQueryプラグインです。昔は色々と これ系を見かけましたけど最近は全然無い ですね。 これくらいなら自作する、という方も多いのか、以前はかなり見かけたホバーエフェクトのjQueryプラグインは全然見かけなくなりましたが、プラグインの方が楽な場合も多々あると思いますのでこういうのも覚えておくと工数を減らせるかもしれません。 ボックス要素が画像の上にオーバーレイ込みで表示されます。マウスを乗せたらRead more、みたいなのも容易に出来ますね。 divの上にdiv的な事も出来ます。 IEでも問題ないです。 簡単に実装出来ました。 コード <script type='text/javascript' src='http://ajax.googleapis.com/a
さて次に、HTMLだけを使って自動移動させる方法をご紹介いたします。自動移動するまでの時間(秒数)を指定できるため、「移転案内」を表示してから指定秒数後に、自動的に新サイトへ移動するようなページが作れます。 方法はとても簡単で、HTMLのhead要素内(<head>~</head>の内側)に、以下のようなmeta要素(タグ)を記述することで実現できます。 <meta http-equiv="refresh" content="秒 ; URL=移動先"> 上記のたった1行を書くだけです。content属性の値として、「移動までの待ち時間(秒数)」と「移動先URL」を、半角セミコロン記号「;」で区切って記述します。具体的には、例えば以下のように記述します。 <meta http-equiv="refresh" content="3;URL=http://allabout.co.jp/"> 上記
まえがき 皆さん、いきなりですがスマホサイトってどうやって作りますか? KoToRiは「viewport」をこんな感じで指定して <meta name="viewport" content="width=device-width, initial-scale=0.5,minimum-scale=0.5, maximum-scale=0.5, user-scalable=yes"> 横幅640pxで作成されたデザインデータを用意してそのままコーディングします! 「viewport」に「initial-scale=0.5」を指定することで横幅640pxでコーディングしたものを50%の大きさで表示することができます。 つまり横幅320px!ちょうどiPhoneのディスプレイの幅のサイズで表示されるわけですね。 この手法だと画像もボケないし楽だし結構ベーシックなやり方だと思います。 ただ、この「v
WordPress 度々書いているバッドノウハウっぽい内容ですが、今回も表示はできたので記録として記事にします。 万が一にも同じ状況の方がいた時のためのヒント的なものなればいいなと。 前提 対象は、WordPressでレスポンシブの設定があるサイト。フレキシブルレイアウトで、600pxあたりを境にMedia Queriesの設定でサイドが下に落ちるという感じです。この600pxが曲者で、600以上のタブレットデバイスでは横が切れてしまいます。 実現したいのは、 「スマートフォンはサイドを落とす」 で、 「タブレットはサイドを落とさずぴったりフィット」 でした。 なお、固定幅だけのサイトであればviewportのwidthを以下のように設定すれば画面にフィットします。 <meta name="viewport" content="width=1000px" /> <!--固定幅1000pxの
以前、紹介した「Page Scroller」のバージョンアップ版「Page Scroller ver.3」の紹介です。 追記: 2013年10月26日 ver.3.0.9をリリース jQueryの旧版によるXSSに対応しました。 2011年5月4日 デモおよびダウンロードファイルをjQuery1.6に変更しました。 2011年1月31日 ver.3.0.8をリリース 機能を追加しました。 2010年11月19日 ver.3.0.7をリリース ライセンスを変更しました。 2010年11月17日 デモおよびダウンロードファイルをjQuery1.4.4に変更しました。 2010年9月19日 デモおよびダウンロードファイルをjQuery1.4.2に変更しました。 2009年7月6日 対応ブラウザ(IE8, Fx2.5, Chrome2)を更新しました。 2009年2月23日 ver.3.0.6をリ
jQuery書く コードは以下です。 $(function(){ var hide = $('h1,#contents'); //隠すhtmlタグを指定 var title = $('h1'); //タイトルのタグを指定 var cont = $('#contents'); //コンテンツのタグを指定 hide.addClass('none'); //変数hideにcssのclass"none"を指定 title.fadeIn(1000, function(){ //変数titleをフェードインさせ、その後上から移動させる $(this).animate({top : 0}, 500); }); cont.fadeIn(1000, function(){ //変数contをフェードインさせ、その後#footerを表示と移動 $('#footer').animate({width: 700,
最近更新ペースが遅くなっています。最近仕事の関係でサイトを作っているのですが、そこで使った方法を紹介します。スクロールしてコンテンツが現れたときにアニメーションが開始します。jQueryを使っています。 言葉ではイメージしにくいかもしれません。百聞は一見にしかず、ということでサンプルをご覧ください。画像が画面内に表示されると右にアニメーションします。 プラグインもありそうですが、安易にプラグインを使うのではなく自分で作った方が勉強になります。また、プラグインによっては色んな機能があるために無駄に容量が大きくなってしまうこともあります。そんな場合は、必要な機能だけ自分で書く方が読み込み速度的にも効果的なのかなと思います。 jQuery全体はこんな感じになります。 $(function(){ $('.effect').css("opacity",".3"); $(window).scroll(
更新履歴 2011-09-29 Ver 0.1.3 に更新 垂直方向へのスクロール状態でのメニュー表示位置ずれ不具合を修正しました。 2010-12-01 Ver 0.1.2 に更新 ドロップダウンメニューの保持を示すマーカー(»)の表示位置の調整処理を補正しました。 2010-11-17 Ver 0.1.1 に更新 メニューが画面の端で展開された際に、ウィンドウの表示枠からはみ出て隠れてしまわないように、表示位置を補正をするようにしました。Demo 先日、イントラの WEB ページで 10 年以上使用してる Java アプレット製のドロップダウンメニューを JavaScript でリニューアルしたいという相談を受けました。jQuery のプラグイン使えば簡単かなと思い安請け合いしたのですが、なかなかしっくりくるプラグインを見つけることができませんでした。具体的には水平/垂直の両方向に対応
2012/10/18:画像に一部誤りがありましたので、修正致しました。 こんにちは。 スマートフォンサイト制作案件が増えて楽しいKanaです。 スマートフォンサイトのコーディングは、古いブラウザ (ie6とかie6とかie6とか!)のことを考えるとできなかったCSSの指定ができるので、とても楽しいですね! スマートフォンサイトの制作はリキッドレイアウト。 ナビゲーションの数が奇数!…均等にするにはwidth指定面倒だな〜画像とテキストを横に並べなきゃ…縦方向の揃え位置を指定できたらいいのに…。と思ったことはありませんか? そんな時の強い味方がdisplay:tableと、display:table-cellです。 スマートフォンサイトのコーディングを頻繁にされている方は、既にご存知かもしれませんが、これからスマートフォンサイト作るよ!という方には、とても便利だと思います! display:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く