実行例

横型メニュー表示
マウスカーソルが重なると大きくなるメニュー

主要な都市圏




変更前のhtml
<p>主要な都市圏</p>
<ul id="menu">
  <div class="menu">プロフィール</div>
  <div class="menu">最近のエントリー</div>
  <div class="menu">コメント</div>
  <div class="menu">投稿する</div>
  <div id="message"></div>

jQuery
$(document).ready(function() {
  $('div.menu').css('opacity',0.5)
               .hover(
      function(ev) {
         $(this).css('cursor','pointer')
                .animate( { padding:'10px', opacity : 1, fontSize:'12pt'} );
     },
      function(ev) {
         $(this).css('cursor','default')
                .animate({padding:'3px',opacity:0.5,fontSize:'10pt'} );
   } ).click(function(ev) {

     $('
').text('クリックされたのは'+$(ev.target).text() )
                 .appendTo('div#message');
   } );
} );