スマートフォン向けのサイト作成の時に定番的に使われている開閉式のナビゲーションの作成方法です。今回は縦方向の開閉と横方向の開閉（ドロワーメニュー）の基本的な仕組みの解説です。 jQueryとCSS3を使用した作成方法です。通常jQueryのアニメーションはCPUで処理されますが、CSS3を有効活用するとGPUが使用されてより滑らかな動きを実現できます。 縦方向の開閉メニュー ハンバーガーボタンをタップするとアコーデオン状に開くナビゲーションです。 ハンバーガーボタンはタップするとX印に変わります。X印をタップするとナビゲーションを閉じることができます。 比較的多く見るタイプのものです。 HTMLのポイントはハンバーガーボタン部分とナビゲーション部分の構造です。 ハンバーガーボタンはdivとspanで作成します。 ナビゲーションはulとliでできた一般的なものです。 縦方向の開閉メニューのサ
jQueryで要素の表示・非表示を切り替える方法についてです。 要素の非表示 ( hide ) hideメソッドを使うと要素を隠すことができます。引数には非表示にする際の時間と、コールバック関数を指定できます。 <body> <button>click</button> <p>表示されてるメッセージ</p> </body> $(function() { $('button').click(function(){ $('p').hide(); }); }); .hide()はcss('display', 'none')と同じ意味です。 $(function() { $('button').click(function(){ $('p').css('display', 'none'); }); }); .hide() | jQuery 1.9 日本語リファレンス | js STUDIO サンプ
アコーディオンって音いいですよね。 この前結構近い距離でライブ見たんですが、音が良すぎて、違う世界にいきそうでした。 音圧が全然違いました。あとあの独特の波感。 今回はWeb制作におけるアコーディオンメニューについてです。 メニューの実装の際に、割とよく使用すると思います。 アコーディオンメニューが開いたときと閉じたときにそれぞれのテキストを変更させる ボタンに画像を使用しているとCSSスプライトが使えますが、テキストにしている場合はもちろん使えないので、jQueryを使用して動的に変えちゃいましょう。スマートフォンで使用するのが多いかもしれません。 HTMLは下記です。 「btn」を押すと「contents」がスライドするようにします。 それに加えてアコーディオンメニューが開いたときに「btn」内のテキストを「CLOSE」にしたいと思います。 HTML <a href="" class=
ハンバーガアイコンアニメーションの実装 HTMLは今回spanを3つで構成しました。 これで色々ご紹介していこうと思います( ˇωˇ)☝ <div class="icon-animation type-1"> <span class="top"></span> <span class="middle"></span> <span class="bottom"></span> </div> お次にアニメーションの実装をご紹介します。 CSSは全てSassの構造で書いております( ˇωˇ ) 1. よくみかける動き 動き出す前の傾きとバーの位置をtransformで調整をします。 こちら、以前ご紹介した「スマホに特化したアコーディオンメニューを作ってみた」のアイコンも同じような実装をしております( ˇωˇ)☝ 押す前 .type-1 { span { transition: all 0.3s;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
