ブックマーク / weboook.blog22.fc2.com (2)

  • jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー

    最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを2つくらい(サイト名は忘れてしまいました。。)見かけて、これは流行っているのではないかということで作ってみました。 メニュー自体はいたって普通のものですが、一応ソースを載せておきます。まずはHTMLです。 <nav id="menu-wrap"> <ul id="menu"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </nav> 続いてCSSです。 #menu-wrap { position: fixed; z-inde

    jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー
  • ゴーストボタンにマウスを乗せたときの動きいろいろ16個

    昨年くらいから流行っているらしいゴーストボタンというもののサンプルをいくつか作ってみました。皆さん色々作られていて、今さら感もありますがぜひご覧ください。 今回、以下のルールに沿って16個サンプルを作りました。 HTMLは全て同じ マウスを乗せる前は同じ状態 擬似要素は使っても1つだけ 擬似要素を2つ使ったり、spanなんかをはさんでやるともっと色々できると思いますが、今回はシンプルにマウスを乗せたときに動きをつけるサンプルを紹介します。 サンプルはこのページで全て載せていますが、まとめて見たいという方はこちらをどうぞ。 ということで、HTMLはこんな感じになります。 <a href="#" class="btn sample1">sample 1</a> 普通のリンクですね。btnは共通部分、sample1はサンプルごとで違ってくる部分になります。 では、共通部分のCSSです。 a.bt

    ゴーストボタンにマウスを乗せたときの動きいろいろ16個
  • 1