div全体をaタグで囲ってふんわりメニューをつくる

div全体にaタグをかぶせることでdivにボタンのような振る舞いを持たせることができる。さらにマウスが乗った時は背景色をゆっくり変えると高級感が増して良い。自分ではこれをふんわりメニューと呼んでいて、例えばこのブログでは全記事一覧ページで使っている。

用意するもの

色をフェードで変えるためにjQuery Colorを用いる。

code html

<head>でjquery.jsとjquery.color.jsをロードしておくこと。

<div class="item"><a href="#"></a>タイトル1</div>
<div class="item"><a href="#"></a>タイトル2</div>
<div class="item"><a href="#"></a>タイトル3</div>

code css

.item{
  position:relative;
  background-color:#ffffff;
  color:"#333333";
  /* この辺りはお好みで */
  border-radius:3px;
  padding: 10px 20px 10px 20px;
  margin: 0px 0px 10px 0px;
  box-shadow: 0 0 10px rgba(0,0,0,.1);
}

.item a{
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

code js

$(".item").hover(function(){
  $(this).stop().animate({backgroundColor:"#386ca5", color:"#ffffff"}, 150);
}, function(){
  $(this).stop().animate({backgroundColor:"#ffffff", color:"#333333"}, 200);
});
$(".item").click(function(){
  $(this).stop().animate({backgroundColor:"#ffffff", color:"#333333"}, 200);
});

ポイントはマウスオーバー以外にクリックした時にも色を戻す処理を書いておくことで、これがないとスマートフォンでアクセスした際に[リンクページへ移動]-->[戻る]の動作を行った際にマウスオーバーが戻らない問題が発生する。

カラーフェードにかける時間は、ハイライトは早く・戻すときは少し遅くくらいで設定するといい感じのふんわり感が出ると思う。