jQueryを利用したものしか作ったことがなくて、今後、使いそうな機運があったので、今さら感は半端ないですけどCSSだけで実装するドロップダウンメニューを作ってみました。 こういうのは使い回しすることが多いので、自分用にHTMLとCSSのコードを載せておきます。使いたい方がいらっしゃいましたら、ご自由にお使いください。 作ったのは、普通のドロップダウンメニュー(シングル)、多階層、メガドロップダウンメニューの3種類で、1つのグローバルナビに全てを詰め込んでいます。1種類だけ使いたいという場合もあると思うので、コード自体は種類によって個別に記載しています。そのために、非常に冗長となっていますがご了承ください。 デモと共通の部分 このドロップダウンメニューのデモは以下のリンクから見れます。 DEMO ドロップダウンメニュー自体は、ul要素でマークアップしています。 各種(シングル・多階層・メガ

よくメニューとかグローバルナビで使われているやつで、マウスホバーすると、それにあわせて付いてくる線(バー)をCSSだけで実装する方法。 JavaScriptでやることが多いと思いますけど、CSSだけでできるんじゃないかと思ってやってみた結果です。CSSの間接セレクタを利用することで、大変簡単にできました。 追従してくるバーのデモ マウスをのせると黒いバーがアニメーションしながらついてきます。古いIEには対応していませんので、Chrome等のモダンブラウザでご覧ください。 マウスが離れると定位置へ戻るという、まぁ、よく見るやつですね。以下でやり方を説明しています。HTMLとCSSだけです。 実装方法 HTML <nav class="global-nav"> <p><a href="#">Menu name</a></p> <p><a href="#">Menu name</a></p> <

ソーシャルメディアのアイコンやロゴを使用する際、Font Awesomeとかのwebフォントを利用させてもらっていたんですが、日本のSNSだったりすると用意されていなかったり、色とか柔軟に扱えなかったりしてちょっと不便を感じていました。 SVGであれば、色を柔軟に扱えるしサイズで困ることもないので「SVGのアイコン使いたい」ってなったんですが、探してもあんまりないんですよね。 ないなら自分で作ればいいじゃんとうことで、よく使うものをSVGで作ってみました。 SVGコードとダウンロード 以下、主要6メディア分のSVGアイコン(ロゴ)になります。コードをのせておきますので、コピペしてどうぞご自由にお使いください。下に全てまとめてダウンロードできるファイルも用意してありますので、そちらもどうぞ。 高さを300pxでそろえてあり、幅はまちまちです。スタイルをdefs要素で囲んで指定していますので、

Javascriptを使わずに、HTMLとCSSだけでアニメーションしながら展開するドロワーメニュー(スライドメニュー)を実装する方法です。 クリックでドロワーメニューを展開させる場合、jQuery等でちょっとしたプログラムを組むのが一般的だと思いますが、以下の方法では、スクリプトを一切使わずにドロワーメニューを出したり隠したりしています。 タイトルで「アニメーションしながら」とありますけど、これについてはおまけみたいなもので、あくまでも「ドロワーが出現するきっかけをCSSでやる」がメインになります。なので、アニメーションについてはあまり触れていませんがご了承ください。一応、アニメーションも全てCSSだけでやっていまして、こちらのエントリーで紹介しているものを使用しています。 JSを利用しないドロワーメニュー まずは以下のデモをご覧ください。 JSを使用しないドロワーメニューのデモ デモ右

最近よく見かけるやつなんですけど、ちょうど今作っているサイトで使ってみたくて、色々やってみた結果なかなか良かったのでブログに残しておきます。 斜めのストライプとかじゃなくて、ブロックごと全体的に斜めにして背景を傾かせる方法です。プラグインは使わずに、CSSのみで実装してます。 デモ つまりはこんな感じのやつです↓ DEMO PAGE 大胆に背景全体を傾斜させているので、単調なフラットデザインに、ちょっとしたスパイスを加えることができますね。 実装方法 色々とやり方はあるかと思いますが、ここではCSSのbefore擬似要素とtransform:rotateを使って表現しています。 HTML <section class="contents"> <div class="contents_inner"> <!-- ここはコンテンツ --> </div> </section> ※HTMLは該当部分