jQueryの練習で作ってみました。極力シンプルにしたので、コピペして動かせばすぐに理解できると思います。
|
1 2 3 4 5 6 7 8 9 |
<div class="switch_sample">Menu（クリックで開閉）</div> <ul class="box_sample"> <li>項目１</li> <li>項目２</li> <li>項目３</li> </ul> ・ ・ ・ |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.switch_sample{ cursor: pointer; width: 280px; padding: 10px; background: linear-gradient(#666,#444); color: #fff; } .box_sample{ display: none; width: 300px; margin: 0; padding: 0; background: #ddd; } .box_sample li{ padding: 10px; border-bottom: 1px solid #aaa; list-style: none; } .box_sample li:last-child{ border-bottom: none; } |
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> $(function(){ $(".switch_sample").click(function(){ $(this).next().slideToggle(); }); }); </script> |
Name : Leo
北海道在住の元気な22歳。ゲーセンでバイト中。
右手に酒、左手に煙草、目の前にPCという生活。
割とクズだけどいい人（ただし彼女はいない）。
今欲しいのはリボルトの実機。
Web制作は結構好き。
