ボタンをクリックしてからスライドパネルが表示される仕組みになります。
いつも通りjQueryの読み込み。
1 2 3 4 5 | <script>google.load("jquery", "1.3.2");google.load("jqueryui", "1.7.1");</script> |
まずはCSS側のソースはこちら。
1 2 3 4 5 6 7 8 9 | <style type="text/css">.button{// ここはお好みのデザインを記述}#open{// ここはお好みのデザインを記述display:none;}</style> |
そしてjQuery側のソースはこちら。
1 2 3 4 5 6 7 | <script language="javascript">$(function(){$(".button").click(function(){$("#open").slideToggle("slow");});});</script> |
HTML側のソースはこちら。
1 2 3 4 | <p class="button">クリック</p><div id="open">商品の説明補足などなど。スライド箇所にて表示される空間になります。</div> |
これを使えば多少動きのあるページが作成できそうですね。
