参照:Easy Display Switch with CSS and jQuery
▼ボタンをクリックすると、リスト要素のスタイルを切り替えます。
アボカドたっぷしのってますが、れっきとしたデザートです。ハニートーストの上にバニラアイスが乗っていて、その上にアボガドがぱらぱらと。アボカドっぽくなくて、どちらかといえば栗のような味がしました!
@アボガドダイニング Platinum Lounge
またまたリピしちゃいました、白レバー!今回は3人で行ったので3本。お刺身でもいけるくらい新鮮で美味しいレバーなので、レアめな感じの焼き加減に、濃厚な味噌ソースがたっぷり!コレは絶品です!
@高庵TOKYO
昆布の上に白子をのせて、かるーく火を通ったところで、お醤油をちょびっとたらしていただききました。白子って生でポン酢で食べることが多いけど、焼いてもトロットしてて美味しいんですねー!
@高庵TOKYO
焼きラーメンってなんだろー??と思って頼んでみました。普通の焼きそばと違って、麺がやわらかめでソースが下にたまるくらいかかっていました!呑んでると、濃い目の味付けがほしくなるんですよね。そんなときにぴったりの〆メニューです!
@高庵TOKYO
黒いのはしいたけじゃありませんwさつま揚げです。箸で切らずに、そのまま揚げたてをぱくぱくいただくのが流儀のようです。味がしっかりついているので、このままいけます!
@高庵TOKYO
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type="text/javascript"> $(function () { $("a.switch_thumb").toggle( function(){ $(this).addClass("swap"); $("ul.display").fadeOut("fast", function() { $(this).fadeIn("fast").addClass("thumb_view"); }); }, function(){ $(this).removeClass("swap"); $("ul.display").fadeOut("fast", function() { $(this).fadeIn("fast").removeClass("thumb_view"); }); } ); }); </script> <!-- CSS --> <style type="text/css"> .container { width:810px; margin:0; padding:10px; overflow:hidden; background-color:#000; } h2 a { font-size:13px; font-weight:bold; } ul.display { float:left; width:808px; margin:0; padding:0; list-style:none; border-top:1px solid #333; border-right:1px solid #333; background:#222; } ul.display li { float:left; width:806px; margin:0; padding:10px 0; border-top:1px solid #111; border-right:1px solid #111; border-bottom:1px solid #333; border-left:1px solid #333; } ul.display li a { color:#e7ff61; text-decoration:none; } ul.display li .content_block { padding:0 10px; } ul.display li .content_block h2 { margin:0; padding:5px; font-weight:normal; } ul.display li .content_block p { margin:0; padding:5px 5px 5px 260px; color:#fff; } ul.display li .content_block a img{ margin:0 15px 0 0; padding:5px; border:2px solid #ccc; background:#fff; float:left; } ul.thumb_view li{ width:265px; } ul.thumb_view li h2 { display:inline; } ul.thumb_view li p{ display:none; } ul.thumb_view li .content_block a img { margin:0 0 10px; } a.switch_thumb { width:122px; height:26px; line-height:26px; margin:0 0 10px 0; padding:0; display:block; background:url("/content/img/ajax/switch.gif") no-repeat; outline:none; text-indent:-9999px; } a:hover.switch_thumb { filter:alpha(opacity=75); opacity:.75; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; } a.swap { background-position:left bottom; } </style> <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head> <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1> <h2 class='h'>設置サンプル</h2> <h3 class='h'>実行結果</h3> <div id="wrap"> <h1>設置サンプル</h1> <p>参照:<a href='http://www.sohtanaka.com/web-design/examples/display-switch/'>Easy Display Switch with CSS and jQuery</a></p> <p>▼ボタンをクリックすると、リスト要素のスタイルを切り替えます。</p> <!-- CODE --> <div class="container"> <a href="#" class="switch_thumb">Switch Thumb</a> <ul class="display"> <li> <div class="content_block"> <a href="#"><img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_m.jpg" alt="" /></a> <h2><a href="#">アボカド シーザーサラダ</a></h2> <p>よくわからないけどちゃんとアボガド入りです!クリーミーなシーザードレッシングとアボガドの相性がとってもよかったです。</p> <p>@アボガドダイニング Platinum Lounge</p> </div> </li> <li> <div class="content_block"> <a href="#"><img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_m.jpg" alt="" /></a> <h2><a href="#">アボカド刺</a></h2> <p>アボガドにお醤油がかかってるせいか、わさびをちょっとのせて食べると、マグロ入ってないのに、マグロの味がしましたw</p> <p>@アボガドダイニング Platinum Lounge</p> </div> </li> <li> <div class="content_block"> <a href="#"><img src="http://farm4.static.flickr.com/3316/3273696493_570fdd0ee5_m.jpg" alt="" /></a> <h2><a href="#">ハニートースト</a></h2> <p>アボカドたっぷしのってますが、れっきとしたデザートです。ハニートーストの上にバニラアイスが乗っていて、その上にアボガドがぱらぱらと。アボカドっぽくなくて、どちらかといえば栗のような味がしました!</p> <p>@アボガドダイニング Platinum Lounge</p> </div> </li> <li> <div class="content_block"> <a href="#"><img src="http://farm4.static.flickr.com/3427/3273696469_aa2aaf5e89_m.jpg" alt="" /></a> <h2><a href="#">ベーコンとアボカドのピザ</a></h2> <p>めちゃくちゃおいしかったアボカドのピザ!ピザ生地はクリスピータイプでさくさく!</p> <p>@アボガドダイニング Platinum Lounge</p> </div> </li> <li> <div class="content_block"> <a href="#"><img src="http://farm4.static.flickr.com/3396/3274514302_10521a0a98_m.jpg" alt="" /></a> <h2><a href="#">アボカドディップ</a></h2> <p>アボカドディップはとってもクリーミー!ポテトじゃなくてもなんにでも合いそう♪</p> <p>@アボガドダイニング Platinum Lounge</p> </div> </li> <li> <div class="content_block"> <a href="#"><img src="http://farm4.static.flickr.com/3215/3141100545_e21269fb11_m.jpg" alt="" /></a> <h2><a href="#">白レバー串みそ焼き</a></h2> <p>またまたリピしちゃいました、白レバー!今回は3人で行ったので3本。お刺身でもいけるくらい新鮮で美味しいレバーなので、レアめな感じの焼き加減に、濃厚な味噌ソースがたっぷり!コレは絶品です!</p> <p>@高庵TOKYO</p> </div> </li> <li> <div class="content_block"> <a href="#"><img src="http://farm4.static.flickr.com/3284/3141927120_d66a9a0304_m.jpg" alt="" /></a> <h2><a href="#">ササミ焼わさびマヨネーズ</a></h2> <p>ジューシーなササミに、ちょっぴりわさびのきいたマヨネーズがたっぷりのってまっす!和とイタリアンの融合って感じw彩りもきれいですよね♪</p> <p>@高庵TOKYO</p> </div> </li> <li> <div class="content_block"> <a href="#"><img src="http://farm4.static.flickr.com/3197/3141927210_be00d22544_m.jpg" alt="" /></a> <h2><a href="#">白子の昆布焼き</a></h2> <p>昆布の上に白子をのせて、かるーく火を通ったところで、お醤油をちょびっとたらしていただききました。白子って生でポン酢で食べることが多いけど、焼いてもトロットしてて美味しいんですねー!</p> <p>@高庵TOKYO</p> </div> </li> <li> <div class="content_block"> <a href="#"><img src="http://farm4.static.flickr.com/3247/3141926720_08ebc48824_m.jpg" alt="" /></a> <h2><a href="#">屋台風羽根つき焼きラーメン</a></h2> <p>焼きラーメンってなんだろー??と思って頼んでみました。普通の焼きそばと違って、麺がやわらかめでソースが下にたまるくらいかかっていました!呑んでると、濃い目の味付けがほしくなるんですよね。そんなときにぴったりの〆メニューです!</p> <p>@高庵TOKYO</p> </div> </li> <li> <div class="content_block"> <a href="#"><img src="http://farm4.static.flickr.com/3015/3104684027_a215663229_m.jpg" alt="" /></a> <h2><a href="#">白子の雲丹のせ炙り</a></h2> <p>白子にウニがたっぷりのってます★箸でつかむのがむずかしいくらい、お豆腐みたいにとろとろ!口に入れるとじゅわーっとうまみが広がります。あー幸せ!</p> <p>@高庵TOKYO</p> </div> </li> <li> <div class="content_block"> <a href="#"><img src="http://farm4.static.flickr.com/3033/3104683957_a8b91f3235_m.jpg" alt="" /></a> <h2><a href="#">自家製さつま揚げ二種</a></h2> <p>黒いのはしいたけじゃありませんwさつま揚げです。箸で切らずに、そのまま揚げたてをぱくぱくいただくのが流儀のようです。味がしっかりついているので、このままいけます!</p> <p>@高庵TOKYO</p> </div> </li> <li> <div class="content_block"> <a href="#"><img src="http://farm4.static.flickr.com/3203/3105515562_b203eee85a_m.jpg" alt="" /></a> <h2><a href="#">白レバー串みそ焼き</a></h2> <p>白レバーは、ほぼレア状態で口にいれるとふわっととろけます♪味噌ダレととっても合ってます。5本くらいはぺろりといけそうwフォアグラステーキより美味しいかも!?</p> <p>@高庵TOKYO</p> </div> </li> </ul> </div><!-- .dcontainer --> <!-- / CODE --> </div> </body> </html>