【jQuery】プラグインを使わずに、簡単にサイドからスライドして現れるメニューを実装する(ほぼCSS) | UNORTHODOX WORKBOOK | Blog
UNORTHODOX WORKBOOK BLOG TOP›Web Design›【jQuery】プラグインを使わずに、簡単にサイドからスライドして現れるメニューを実装する(ほぼCSS) 最近はモーダルっぽい感じでメニューをページ全体に表示するパターンが増えてる気がするし、もう随分色々な方法やプラグインがあって、かなり今さらなネタですけど、クリックでサイドからスライドして現れるメニューの新たな知見を得たので書き残しておきたいと思います。 「新たな知見」といっても、誰でも考えつくようなことで、そんなに大したことではなく、「あぁ、なるほど」とちょっと思った程度のことですが。。。 クリックでサイドから現れるメニューとは 何て言う名前なのか良く分からないので、デモを。デモページ右上の三つの四角いボタンをクリックすると、にょきっと横からスライドして現れるやつがそうです。 jQueryを利用していますが
カスタマイズしやすい！自分で作るjQueryモーダルウィンドウ | それからデザイン スタッフブログ
いまやWEB制作に欠かせないモーダルウィンドウですが、既存のプラグインを利用すると「やりたい表現があるけど、どこをどうカスタマイズすればいいかわからない…」という状況に陥ってしまった経験がある方も多いのではないでしょうか。 今回は、カスタマイズしやすい簡単なモーダルウィンドウの作り方をご紹介します。 デモはこちら。 必要なコードは以下です。（jQueryの読み込み必須） html <!-- モーダルウィンドウを開くボタン --> <p><a href="#modal01" class="modalOpen">Open</a></p> <!-- モーダルウィンドウ --> <div class="modal" id="modal01"> <!-- モーダルウィンドウが開いている時のオーバーレイ --> <div class="overLay modalClose"></div> <!-- モ
フラットなタブを実装するjQueryコードとCSS | Magicalog
フラットなデザインのタブを実装するjQueryコードとCSSを紹介します。 例によって簡単にタブを作れるjQueryライブラリがありますので、めんどうな方はそちらを使用するとラクチンだと思います。 jQueryライブラリ jQueryUI 仮にjquery.tab.jsと名前をつけて保存 $(function(){ $('.tabbox:first').show(); $('#tab li:first').addClass('active'); $('#tab li').click(function() { $('#tab li').removeClass('active'); $(this).addClass('active'); $('.tabbox').hide(); $($(this).find('a').attr('href')).fadeIn(); return false;
ボタンを押すと特定のクラスを持った要素だけ選んでソートしてくれるjQuery
Tweet備忘録的にメモ。 商品を並べたときにボタンひとつで特定のジャンルだけ選んで表示したり、お手軽にソートできないかなと思うときがある。今回はそんなときのためのシンプルなjQueryを書いた。 コンテンツ一覧から特定のカテゴリだけ選ぶ、なんてときにも役に立つかも。 今回は、idがKeyYellowのボタンをクリックしたら、yellowというclassが振ってある要素だけが表示されるというものにした。 デモサイトも作ったので参考にしてください。 Class Sorting Demo htmlは下記の通り。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Class Sorting Demo</title> <link rel="stylesheet" href="style.css"> <scri
簡単！スクロールでふわっと表示【jQuery】 | コモノ株式会社
みなさん、こんにちは、フロントエンドエンジニアのやまもとです。 今回は昨今、色々なサイトで見かける、 「スクロールして要素が画面の中に入った時にフェードインする」 という感じのエフェクトについて書いて見ようかと思います。 この処理は簡単な処理なのですが、 やり方しだいで色々と応用が効くので、覚えておくと便利かと思います。 今回の処理は３ステップ スクロールの量を取得する（「scrollTop()」を使用） 要素のドキュメント上の位置を取得する（「offset()」を使用） 1と2の値を比較して画面に入ったかどうかを判定する 1. スクロールの量を取得する（「scrollTop()」を使用） こちらタイトルの通りの処理なのですが、jQueryで用意されている 便利���メソッドのscrollTop()を利用して、 今、どれくらいスクロールしたかを取得します。 また、スクロールごとに処理をさせ
jQueryの$(function(){...});と$(window).on(
jQueryの$(function(){...});と$(window).on("load",function(){...})の違い 本エントリーは「to-R JavaScript Advent Calendar 2015」8日目のエントリー、今回はjQueryの$(function(){...});と$(window).on("load",function(){...});の違いについて解説を行います。 共にページの読み込みが終わったタイミングでfunction(){...}内に書かれている処理を実行するための記述ですが、$(function(){...});に書かれている処理はHTMの読み込みが終了したタイミング、正確にはDOMツリーの構築が完了したタイミングで実行されます。 $(function(){ //do something }); それに対して$(window).on("lo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モーダルでYoutubeを読み込む方法