タッチデバイスにもCSSの:hoverを機能させる | Be Clue
タッチデバイス向けのサイトを作っていると、どうしてもぶつかる一つの壁、それが:hoverの挙動。以前に僕もその問題に直面し、改善したことがあったので、その経験をメモ。 Ads タッチデバイスの:hoverの挙動がおかしい マウスカーソルを乗せたときのスタイルを設定できるのが:hoverです。 PC向けのサイトだと実に多種多様なホバーアニメーションが実装されており、それらで遊んでいるだけで一日を過ごせる程にそのバリエーションは豊かです。 しかし、この:hover、タッチデバイスにも同じように適用すると少々挙動がおかしいです。指が離れてから:hoverで指定したスタイルが適用され、そのまま元のスタイルに戻りません。 特に問題なのはリンク要素（aタグ）に:hoverを指定した時です。リンク要素をタップしてもリンク先に推移せず、もう一度タップしないといけない場合が見受けられました。 これではユーザ
jQueryで上から降りてくるトグルメニューを作る５つのステップ
WEBサイトを作っていると、 レスポンシブ表示時のグローバルメニューをボタンクリックで表示・非表示を切り替えたい Q&Aなどのページで、ボタンクリックで一部のテキストの表示・非表示を切り替えたい テキストや画像ブロックをクリックで表示・非表示を切り替えたい といった、クリックで要素の表示・非表示の切り替えを行いたい機会が多々訪れます。 このような、クリックによる表示・非表示切り替え機能のことを「トグル（toggle）」と呼びます。 トグルには、 一瞬で表示が切り替わるもの フェードイン・フェードアウトで表示が切り替わるもの スライドイン・スライドアウトで表示が切り替わるもの といった複数の種類があります。 ここでは、トグルを実現するための全ての手順を紹介していきます。 【STEP1】jQueryライブラリの読み込み トグルメニューを実現するためには、jQueryを利用します。 まずは、jQ
スマホのハンバーガーメニューでpositionにfixedを入れてスクロールできなくなる問題を解決 | SHINGO IRIE
スマホでハンバーガーメニューを実装していたのですが、positionにfixedを入れていると位置が固定されてしまい、スクロールできなくなります。メニューの数が多くなるとスクロールできないため、メニューとして機能しなくなるという問題の解決法について。 下のようになっているような場合に発生します。 <nav> <ul> <li>メニュー</li> （中略） </ul> </nav> nav { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } こういう場合、navの下のulにoverflowを入れれば解決します。 nav ul{ height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; } -webkit-overflow-scrolling:
最近見かけるCSS3アニメーションを使ったトグルのメニューボタンを再現してみた | スターフィールド株式会社
最近、↓こちらのサイトのように、 Leen Heyne 47株式会社 | もっと暮らしやすくなるための日本づくり CSS3のアニメーションで３本線のアイコンから×のアイコンに切り替わるメニュボタンを見かけることがありました。 これまで私はメニューボタンの切り替えのとき、それぞれのアイコン画像を用意して切り替える方法をとっていたのですが、 CSS3を使った方法だと画像を用意する必要もなく、アニメーションも面白いと思ったので、 今後そちらを使えるようにしたいと思って、再現してみることにしました。 ↓こちらが作ってみたもの DEMO 方法 いくつか種類があるようですが、一番シンプルな「Leen Heyne」さんのものを今回は再現してみました。 方法は、CSS3のtransitionとtransformを使ってアニメーションさせます。 HTML
jQueryは使わない！ネイティブJavaScriptで実装してみた10選
よしだです。 最近夢占いに凝っています。夢占いとは見た夢によって自らの運気や精神状態、暗示を占うといったものです。 驚いたことに怖い夢や悪い夢は意外にもプラスな暗示を示していることが多いようです。ちなみに私が最近見た夢はトラの赤ちゃん×2と戯れる夢でした。 ところで、昨今JavaScript標準APIが充実してきたことやjQueryを不要とするJavaScriptフレームワークの登場により脱jQueryの兆候が見受けられます。 本記事ではJavaScriptの標準APIを使用してタブメニューや画像スライダー等Webサイトでよく実装されているものをサンプル付きで10種ご紹介します。 目次 タブメニュー アコーディオンパネル スムーズスクロール 画像ロールオーバー ハンバーガーメニュー モーダルウィンドウ 画像スライダー フェードイン・アウト パララックスアニメーション ローディングアイコン
スマホでフルスクリーンになるレスポンシブメニュー - yuri memo
今回は以下のようなレスポンシブメニューを実装しました。 ・モバイル時に、メニューをフルスクリーンで表示 ・メニュー開閉アニメーションはフェードイン／フェードアウト ・jQueryのfadeToggleなどは使わずに、classの付け外しをjQueryで行う デモはこちらです。 yuri memo - レスポンシブメニュー DEMO デモは、以下のような構成になっています。 HTML [ fade_menu.html ] CSS [ css/style.css ] jQuery [ js/jquery-2.0.0.min.js ] [ js/script.js ] HTML 順番にコードを載せていきます。 <body> <header> <h1 class="logo">yuri memo</h1> <!-- ハンバーガーメニュー部分 --> <div id="toggle"> <div c
[jQuery] スマホサイトによくあるクリックで展開するメニューを実装する | rakuishi.com
こんな感じのスマホサイトによくあるクリックで展開するメニューを実装してみました。左に俗にいうハンバーガーボタン、右に検索ボタンを設置したものを想定しました。 実装 html タグマークアップはこんな感じです。次の記事の方法を使って、左右にアイコンを配置しています。この方法だとシンプルに実装できます。→ 「次に進む/前に戻る」で CSS の記述量が減るテクニック · rakuishi.com <div class="container"> <header> <div class="menu"><img src="images/menu.png" width="20" height="20" /></div> <div class="search"> <img src="images/search.png" width="20" height="20" /> </div> </header>
![[jQuery] スマホサイトによくあるクリックで展開するメニューを実装する | rakuishi.com](https://cdn-ak-scissors.b.st-hatena.com/image/square/927c0c4b1e66fd219c5b0b8b2ec5dd63300e8740/height=288;version=1;width=512/https%3A%2F%2Frakuishi.com%2Fassets%2Fimages%2Fog.jpg)
CSSで実装するオーバーレイ表示時のエフェクトサンプル 10 - NxWorld
初期表示では非表示になっているナビ表示時やモーダル表示時の背景などで利用されるオーバーレイを表示する際のエフェクトサンプルを自分用にほしくて作ったのでシェアします。 すべてCSSを使って実装しているので、カラーや透過率などのデザイン的な部分はもちろん、表示されるスピードやタイミングについてもCSSで調整可能です。 また、全体的にシンプルで使いやすいもの中心なのでそのまま利用するだけでなく、いずれかをベースにさらに手を加えてユニークなエフェクトにしたりもできると思います。 紹介しているのは基本的にオーバーレイ要素として下記HTMLのようなdiv要素をひとつ用意し、それに対してCSSでエフェクトを付けたものになります。 複数の疑似要素を組み合わせているものは無理だと思いますが、簡易的なエフェクトによっては例えばbody要素の疑似要素をdiv要素の代用にした形に書き換えれば実装できると思います。
スマホでメニューを開いた時に後ろはスクロールしないようにする : 森のコーディング
2月3 スマホでメニューを開いた時に後ろはスクロールしないようにする カテゴリ:jQueryiphone/ipadサイト Tweet 地味にはまってしまった。 スマホサイトのメニューって大体ハンバーガーメニューだよね。最近は。 (ハンバーガーメニューというやつ) これをタップすると、ズルーっとグローバルメニューがかぶさるようにおりてくる、というのが一般的。 さて、そのメニュー内をスワイプしていると、後ろ側の ページが動いてしまうという現象に悩まされた。 タップでスクロールを禁止させるというのも見つけたが、 メニュー内はスクロールできるようにしたいため、背景だけスクロールを不可にしたい。 んで、しらべてみたら、htmlとbodyに対して、height:100%とoverflow:hiddenを割り当てればよいということがわかった。 実際に書くとこんな感じ。 閉じるときは解除も忘れずに。 $(
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
無料でクールな印象を与えるブログ・SNS・ウェブサイトっぽいデザインの壁紙を作成できる「Cool Backgrounds」
ウェブサイトやSNSで使う壁紙は見る人に自分のサイトを印象づけたりインパクトを与えたりする重要な要素になります。5つのパターンのクールな壁紙を作成できるサービスをまとめているのが「Cool Backgrounds」で、静止画だけでなく、動的な壁紙が作れるサービスもあり、ウェブで活動している人にとってお役立ちアイテムとなっています。 Cool Backgrounds https://coolbackgrounds.io/ ウェブサイトにアクセスすると、まずは5色を使ったポリゴンっぽい幾何学な背景が表示されていました。画面右下のカラーツールをクリックしてみます。 すると、こんな感じで色の組み合わせが選択肢としていくつか表示されます。 青ベースの5色を選択してみるとこんな感じ。真ん中の1色がメインになるようです。 カラーツールの右側にあるボタンをクリックすると作成した背景の1192×600のPN
CSSで実装する矢印アイコン付きボタンのアニメーションエフェクト - NxWorld
フラットやゴーストといったようにシンプルで一見ボタンと認識しずらい感じのボタンデザインを使う場合、それが少しでもボタンだと分かるように矢印等のアイコンを付けることが多いと思います。 今回はそんな矢印付きボタンを実装する際、ホバー時に矢印にちょっとしたアニメーションエフェクトを実装したサンプルで、いずれも実装にはCSSのみを使用しています。 サンプルの記述内容について CSSで記述している内容はこのサンプルの見た目に関する記述も多いので、矢印の動きのみ抜き出したい場合はボタンとなる要素にposition: relative;を追記し、::before, ::afterで記述している内容や:hoverで記述している部分を使ってもらえれば同じ動きを再現できるかと思います。 また、紹介しているボタンに付いている矢印アイコンは、いずれもCSSのborderを使って実装をしています。 サイトによっては
[CSS]チェックしておきたい、最近のスタイルシートのテクニックのまとめ -2014年秋
次のプロジェクトでちょっと使ってみたくなる実用的なものから実験的なものまで、CodePenで多くのユーザーをうならせたスタイルシートのテクニックを紹介します。 まずはアニメーションが楽しいデモから。 ※上から10個くらいはアニメーションgifです。
![[CSS]チェックしておきたい、最近のスタイルシートのテクニックのまとめ -2014年秋](https://cdn-ak-scissors.b.st-hatena.com/image/square/d68594e0182d8d63cfb96eda05e4f18be75583c9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014091401-04.gif)
簡単にコンテンツスライダーを実装できるjQueryプラグイン「bxSlider」の実装サンプル - NxWorld
スライダーやカルーセルを実装できるjQueryプラグインは多数ありますが、それらの中でも豊富なオプションと実装の手軽さで見かけたことや実際に使用した人も多いと思う「bxSlider」の実装サンプルです。 もっと高機能なプラグインも探せばいくらでも出てきますし、bxSliderにこだわる必要はもちろんないんですが、個人的に手軽に使えるという理由で今でも使わせてもらう機会が割と多いので、公式には載っていない実装サンプルをいくつか紹介しようと思います。 bxSliderについて 今回使用する「bxSlider」はコンテンツスライダーやカルーセルといった動きを実装することができるjQueryプラグインで、手軽に実装できることに加え、オプションも豊富に用意されているのが特徴のプラグインです。 また、レスポンシブやスワイプといった機能も実装されているので、スマートフォンやタブレットといったデバイスが対
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
-webkit-overflow-scrollingを指定するときについでにやっておいた方がいいこと - Qiita
【レスポンシブ化】ハンバーガーとアコーディオンのコラボ | MaruMari Labo
https://blog.mismithportfolio.com/web/20150529scrollfixed
「レスポンシブ オーバーレイ メニュー」の検索結果 - Yahoo!検索
「レスポンシブナビ おすすめ」の検索結果 - Yahoo!検索
【Javascript】bxSliderのよく使っているカスタマイズ5選 | Wood-Roots:blog
