スマホで使えるjQuery アコーディオンメニュー

スマートフォンで活用大のアコーディオンメニュー。

jqueryなら実装がカンタン。
dlパターン
htmlはこんな感じ

javascriptは

css

ulを使うパターン

デモ

scss でフォントサイズをremで指定するmixin

今さらながら、SCSSからCompassを使いはじめました。

今さらながら、その便利さに驚愕している日々です。

いろいろ覚えておきたいことは一杯あるのですが今日は基本となるfont-sizeの指定をカンタンにできるようにするmixinの覚え書き。

まずは、rootのフォンとサイズを10pxにするため、htmlに以下のように指定します。

そしてbodyを14pxを指定する場合、

css3のremの指定と対応していないIE対策としてpxを一緒に指定します。

これをmixinにするには

とし、18pxで表示したいところには

とするだけ!

めちゃくちゃカンタンになりました!

 

参考にさせていただきました:

SCSSで古いIEなどにもrem感覚でフォントを指定する方法

http://negimemo.net/1141

一定期間だけNew!マークを表示する

新しく更新したページに「New!」を付けて、一定期間がすぎたら自動的に消えるようにする

マークを表示したい場所に
※2014年1月31日まで表示する

テキストの場合:

画像の場合:

Google AJAX APIを使ってjqueryを読み込む

jqueryを読み込むのに、わざわざjqueryのサイトから最新ファイルをダウンロードしなくても、
Google AJAX Libraries API などを使えばカンタンです。

今はGoogle Developerにjquery だけでなくjquery ui , MooTools , prototypeなどもあります。

https://developers.google.com/speed/libraries/?hl=ja

1.x系の最新バージョンを自動的に読み込むには