jQuery+CSS3で丸タイプのドロワーメニュー
jQuery+CSS3で丸タイプのドロワーメニュー ドロワーメニューのバックグラウンドが丸になってるタイプのナビゲーションです。 クリックイベントにjQueryを使用してます。 投稿日2018年12月27日 更新日2018年12月27日 See the Pen Circle Drawermenu by webopixel (@webopixel) on CodePen. HTML メニューのトグルとなるボタンと、メニュー本体があります。 今回はメニューと円の部分は別々にアニメーションしたかったので、別の要素にしたほうが簡単です。 index.html <div id="nav-toggle"> <div> <span></span> <span></span> <span></span> </div> </div> <div id="nav-circle-bg"></div> <nav i
jQuery+CSS3で固定ナビゲーション→レスポンシブでハンバーガーメニューに切り替える
jQuery+CSS3で固定ナビゲーション→レスポンシブでハンバーガーメニューに切り替える jQuery+CSS3を使用してスマホではハンバーガーメニューに切り替わる、固定ナビゲーションを作成してみます。 投稿日2015年12月09日 更新日2015年12月09日 PC版のナビゲーションは基本構造は下記を使用します。 jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション HTML #mobile-head はモバイル時色を付けてバーにします。 #global-nav はモバイル時ナビゲーションを開閉するボタンです。 三本の線がspanになります。 HTML <header id="top-head"> <div class="inner"> <div id="mobile-head"> <h1 class="logo">Logo</h1> <div id="
jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション
jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション ファーストビューでは大きめのナビゲーションで、スクロールするとアニメーションしてナビゲーションの幅が狭くなって固定されるという動きのやつです。 投稿日2015年10月28日 更新日2015年10月28日 HTML HTMLの構造です。どこにでもあるシンプルなヘッダーって感じです。 今回はこのheader部分を固定します。 HTML <header id="top-head"> <div class="inner"> <h1 class="logo">Fixed Navi</h1> <nav id="global-nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">PRODUCT</a></li> <li><a href="#">WORKS</a
1文字だけの改行の拒否
日本語の文章では任意の位置で改行できるため、レスポンシブ・ウェブ・デザインでは多くの場合、望まない位置での改行が起きる。例えば最後の1文字だけ次の行になってしまうと、読みやすさや理解度に致命的な影響を与える。例えば「？」だけ次の行に送られた場合、あるとないのでは大きく印象が変わるだろう。Twitterで@Takazudoと@oosugi20の会話を見て、やはりみな似たようなことは考えるものだと感じ、このあたりのことについて書いてみたくなった。 僕はjQueryで最後の五文字では改行が起きないようにいじったりしていた(うろ覚えで書いたもので、実際にはもっと複雑にやっていたと思う)。見出しがテキストのみの場合、最後の数文字の間に非改行ゼロ幅スペース(U+FEFF)を仕込むことで、その間で改行が起こらなくなるという仕組みだ。ここでは比較のためにクラスで判定するように書いてあるが、実際にはh1から
Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8
Enhancing IE's selector engine Selectivizr adds support for 19 CSS3 pseudo-classes, 2 pseudo-elements and every attribute selector to older versions of IE. It can also fix a few of the browsers native selector implementations. JavaScript-knowledge: none Selectivizr works automatically so you don't need any JavaScript knowledge to use it — you won't even have to modify your style sheets. Just start
GitHubにあるような、あの押しやすそうなボタンを作成するサンプル＆チュートリアル:phpspot開発日誌
GitHubにあるような、あの押しやすそうなボタンを作成するサンプル＆チュートリアル 2010年06月01日- Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript GitHubにあるような、あの押しやすそうなボタンを作成するサンプル＆チュートリアルが公開されています。 次のような、マウスカーソルをあてると反転する、いい感じのボタンが実装できます。 ボタン部分のコードは次のようにシンプルで、CSSデザインなところもいいですね。 <a href="javascript:;" class="minibutton"><span>Basic Button</span></a> jQuery、mooToolsを使ってマウスイベントのエフェクトを付けているみたいで、それぞれのサンプルコードも公開されて
jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法:phpspot開発日誌
Justify elements using jQuery and CSS jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法が紹介されております。 何ができるか？というのは次の図を見て頂くのがはやいでしょう。 ビフォア ↓↓↓↓ アフター これを実現するために、CSSとマークアップによって実現するのが普通ですが、jQueryによってもっとスマートに出来るようですね。 具体的には、次のように、label の中で width がもっとも大きいもののサイズを得て、そのサイズにJavaScriptで調整しちゃうというものです。 $(document).ready(function() { var max = 0; $("label").each(function(){ if ($(this).width() > max) max = $(this).width(); });
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS, JavaScript, jQuery, WordPressなどのよく使うコードをまとめたスニペット集