<div class="menuWrapper"> <a href="#menu" id="menuButton"><span>MENU</span></a> </div> .menuWrapper { position: relative; z-index: 0; border: 1px solid #ccc; width: 50px; height: 50px; } #menuButton { overflow: hidden; display: block; position: relative; z-index: 0; width: 50px; height: 50px; cursor: pointer; } #menuButton span, #menuButton::before, #menuButton::after { display: block; position: a

どうも、ジャングルオーシャンのミケです。 今日はjQueryで実装するアコーディオンメニューのご紹介だよ。 簡単すぎてあっという間に実装できてしまうので 「HTMLとCSSはわかるけどjQueryってなんだかとっつきにくいな～」「jQueryってなに？JavaScriptのらいぶらり？は？」 と思ってるそこのあなた！ぜひ見ていってね！ ではいってみよう！ アコーディオンメニューとは アコーディオンメニューってなんだよって人の為に説明するね。 クリックやタップをするとうにょ〜んと中身が出てきて もう一度クリックやタップをするとしゅ〜んと中身が閉じていく機能のことだよ。 Webサイトでよく見かけるアニメーションだよね。 要素が多くてごちゃごちゃしがちなデザインを収納するのによく使われるよね。 アコーディオンメニューのメリット・デメリットはこちらの記事を参考にしてみてね。 具体的なイメージは用意

可変デザインで固定フッター要素分コンテンツにした余白をつける レスポンシブサイト構築で、フッターを固定(fix）させて表示している場合、 可変なのでフッター要素の高さが変わりますが、高さを自動で取得しその高さ分、コンテンツにパディング（余白）をもたせた時のメモ。 (function($){ $(document).ready(function () { hsize = $('footer').height();//フッターの高さを取得 $("#wrapper").css("padding-bottom", hsize + "px");//取得したフッターの高さ分#wrapperにpadding-bottomをpxで指定 }); })(jQuery);

Colorboxの使い方：jQueryで簡単モーダルウインドウjQueryでモーダルウインドウUIを簡単に作れるColorboxの使い方を解説。ウェブページ全面を暗転し、中央に重ねたボックスをモーダルウインドウ風に見せるUIは、Lightbox系jQueryプラグイン「Colorbox」を使えば、ほんの3行程度のJavaScriptを書くだけで作れます。モーダルウインドウ内には、装飾された文章でも画像でも「別HTMLの中身」でも何でも表示できて便利です。 モーダルウインドウとは モーダルウインドウとは、何らかの操作をするまで元の画面には戻さないサブウインドウのことです。モーダルウインドウが表示されている間は元の画面にあるUI(ユーザ・インターフェイス)を操作できないので、絶対に何らかの反応(選択や回答など)をしてもらいたい場合や、読み飛ばされると困る情報を表示する際などに使われます。 例え

ホームページにダイナミックな動きや便利な機能を実装する時に役立つのが、jQueryプラグインです。 jQueryプラグインは、数行のコードを差し込むだけでいいほど実装が簡単で、HTMLやCSSだけではできないような複雑な動きを表現することができます。 しかし、そんなjQueryプラグインも、たくさんあってどれがいいかわかりません。 そこで今回は、2017年最初にチェックしたいjQueryプラグインを紹介していきます。 言葉だけで説明するのは難しいので、デモサイトへのリンクもご用意しました。 ぜひデモも合わせてご覧ください。 2017年最初にチェックしたいjQueryプラグイン9選 1. DateBox ダウンロード / デモ DateBoxは、ブラウザやデバイスにかかわらず、テキストボックスに同じように表示することができるカレンダーや時間のプルダウンを実装することができるjQueryプラグ

以前、iPhone5sのプロダクトページがリリースした頃に『簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して1ページをフルスクリーン表示にして、画面全体をスクロールさせることで、1ページ分（1コンテンツ分）を画面遷移させるUIを実装できるjQueryプラグインを紹介しましたが、自分なりにもっと使いやすい形で実現できないかやってみた実験をご紹介してみます。 【2014/08/05 追記】 各ブロック内での横スライド機能を追加しました。 まずは動作サンプルから。 下記のサンプル画面でマウスホイールスクロールもしくは画面右側のナビゲーションボタン等を使って画面（ページ）を切り替えてみてください。 「jQueryで1ページごとにスクロールして画面遷移させるU

1枚の画像に複数のリンクを付けるイメージマップですが、htmlとcssだけではレスポンシブに対応できないので「jQuery RWD Image Maps」というプラグインを使用します。 jQuery RWD Image Maps https://github.com/stowball/jQuery-rwdImageMaps 実装サンプル

非レスポンシブのサイトをiPadで見ようとするとiPadが適切なサイズで表示してくれます。例えば、横幅が1200pxあるサイトでもiPadを縦にしたときの横幅768pxに合わせて縮小してくれるのです。 ところが、タブレットサイズに対応していないレスポンシブ対応のデザインだと実寸のまま表示されてしまいます。往々にして横が画面に収まりきらず、横スクロールが発生しちゃうんですよねー。 レスポンシブ対応をするにあたり、iPadなどのタブレット端末はPCと同じ表示でという希望がけっこうあります。 そんなときは、vierportを切り替えてデバイスに合わせて表示する方が楽に対応できると思います。 というわけで、ユーザーエージェントで判別してタブレットとスマホでviewportを切替える方法のメモです。 jQueryに頼りたいと思います。 // スマホとタブレットでviewportを切替え $(func

スマートフォンにも使える、クリックで開くアコーディオンメニュー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"

毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。 かゆい所に手が届くような、ニッチなjsをどんどん作っていきたいと思います。 「今回はウィンドウサイズに合わせてメイン画像のサイズを変えるjs」を作ります。 ファーストビューは維持したいんだけどメイン画像はウィンドウサイズに合わせて大きく取りたいと要望があった時には最適です。ウィンドウをリサイズした時の処理も入れて行きます。スマホにもちょっとだけ配慮します。 仕組みとしては、全体のウインドウのheightを取得して、上記のheaderと要素Aの高さを引き算した高さをメインビジュアル部にCSSとして適用すればOKです。 headerと要素Aの高さは指定しなくても動作はしますですが、しておいた方が安心です。 デモはこちら ZIPでダウンロード

【jQuery】レスポンシヴ対応の高機能・高品質スライダー［slick］の使い方。Ver.1.8.1対応 高機能・高品質なjQueryスライダー［slick］の使い方を紹介します。 このjQueryスライダーは「FlexSlider」「BxSlider」「flickity」「Swiper」など、他の優良jQueryプラグインと並んで紹介されることも多く、公式サイトでは「the last carousel you’ll ever need.（訳：あなたが必要とする最後のカルーセル）」と謳われており、実際、オプションの豊富さや安定した挙動が評価され、多くの制作者様がオススメし、また実際のウェブサイトでもよく使われています。 公式サイトは以下。 公式サイト：slick 「get it now」というリンクを押した後、「Download Now」をクリックすると配布されているファイル一式をダウンロ

ライブラリのダウンロードと設置 「ライブラリのダウンロード」をクリックしてダウンロードしてください。 ライブラリのダウンロード ダウンロードしたjquery.dropdown.jsを任意の場所へ置き読み込みます。 （jQueryの設置および読み込みは、完了もしくは同時作業を行っているものとします。） <script type="text/javascript" src="jquery.dropdown.js"></script> 【JavaScript】 セレクターを指定し実行します。 $(document).ready(function() { $('#navi').dropdown(); }); 【HTML】 <ul id="navi"> <li><a href="">menu 1</a></li> <li><a href="">menu 2</a> <ul> <li><a href=

stripjs.com is coming soon This domain is managed at

作成：2014/12/8 Web制作 > 比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそうなものをチョイスしました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビュー １．スライドを立体的に切り替え ２．クリックで滑らかにページ遷移させる ３．背景にスライド、フルスクリーンで固定させる ４．横に移動するフルスクリーンスライド ５．キューブ系のスライドを表示 ６．下方向へドラッグするとページを再読み込みする ７．要素を上下にフワフワ動かす ８．外部要素をクリックで表示 ９．タイピングエフェクト 動作 １０．サーチボックスを画面全体にオーバーレイさせる １１．デイトピッカー １２．ドラッグ＆ドロップ 画像をアップロードする

Posted: 2014.07.11 / Category: javascript / Tag: jQuery 「jquery.morphing.js」は画像などを丸くしてマウスポインターの動きに追従してぐにょぐにょ（？）することができるjQueryプラグインです。 使い方 リンク先はデモも用意されていたり日本語だったりなので、そちらを見てもらった方が確実だと思いますが。。 html <div class="js-morphing"> <img src="img/01.jpg" alt=""> </div> JavaScript <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="../jquery.morphing.js"></script

twitter facebook hatena google pocket 一度開いたダイアログボックスを閉じるまで、他の操作をできなくするモーダルを簡単に取り入れるJavaScriptReveal: jQuery Modal Plugin from ZURBを紹介します。 sponsors 使用方法 Reveal: jQuery Modal Plugin from ZURBからファイル一式をダウンロード。 <link rel="stylesheet" href="reveal.css" /> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.reveal.js"></script> <script type="text/