|
|
| Line 3: |
Line 3: |
| | | | |
| | <head> | | <head> |
| - | <script type="text/javascript" src="index3_files/prototype.js"></script>
| |
| - | <script type="text/javascript" src="index3_files/effects.js"></script>
| |
| - | <script type="text/javascript" src="index3_files/accordion.js"></script>
| |
| | | | |
| - | <script type="text/javascript"> | + | |
| - | Event.observe(window, 'load', function(){
| + | <style type="text/css"> |
| - | var acc = new accordion("accordion");
| + | #accordion .item { |
| - | acc.activate($$("#accordion .accordion_toggle")[0]);
| + | |
| - | }, false);
| + | |
| - | </script>
| + | |
| | | | |
| | + | width: 400px; |
| | + | height: 30px; /* height = total height of A child element */ |
| | + | overflow: hidden; |
| | | | |
| | + | transition: height ease-in-out 500ms; /* css3 transition */ |
| | + | -o-transition: height ease-in-out 500ms; |
| | + | -moz-transition: height ease-in-out 500ms; |
| | + | |
| | + | -webkit-transition: height ease-in-out 500ms; |
| | + | |
| | | | |
| - | <style type="text/css">
| + | |
| - | /* ▼ アコーディオンメニュー ▼ */
| + | border: 1px solid #ccc; |
| - | #accordion_menu{ | + | |
| - | width: 180px; /*width of accordion menu*/
| + | border-radius: 5px; |
| - | background-color:#fff;
| + | |
| - | letter-spacing:1px;
| + | -moz-border-radius: 5px; |
| - | margin:5px 10px;
| + | -webkit-border-radius: 5px; |
| | + | margin-bottom: 2px; |
| | } | | } |
| - | /* アコーディオンのカテゴリの指定 */
| + | #accordion a { |
| - | #accordion_menu .menuheader{ | + | display: block; |
| - | background-image: url(image/bg_menu.jpg);
| + | height: 20px; |
| - | background-repeat: no-repeat;
| + | line-height: 20px; |
| - | height:32px;
| + | background: #6CF; |
| - | margin-bottom: 3px;
| + | padding: 5px; |
| - | text-decoration: none;
| + | color: #1e1e1e; |
| - | line-height: 32px;
| + | text-decoration: none; |
| - | font-size: 16px;
| + | |
| - | font-weight:bold;
| + | |
| - | text-indent: 1.4em;
| + | |
| - | color: #000;
| + | |
| - | cursor: hand;
| + | |
| - | cursor: pointer;
| + | |
| - | /* ステータスアイコンを使用する場合 以下の2行が必要です。使用しない場合は削除しても構いません。 */
| + | |
| - | display: block;
| + | |
| - | position: relative;
| + | |
| | } | | } |
| - | #accordion_menu .menuheader:hover{ | + | #accordion p { |
| - | color: #FF0;
| + | height: 150px; |
| | + | padding: 5px; |
| | + | text-align: left; |
| | } | | } |
| - | /* openheader はカテゴリが開いている状態のCSS */
| + | #accordion div:hover { |
| - | #accordion_menu .openheader{ | + | height: 180px; /* height = total height of A and P child elements */ |
| - | background-image: url(image/bg_menu.jpg);
| + | |
| - | background-position: 0 -32px;
| + | |
| - | background-repeat: no-repeat;
| + | |
| - | color: #FFFFFF;
| + | |
| | } | | } |
| - | /* 子メニューの指定 */
| + | #accordion div:hover a { |
| - | #accordion_menu div.categoryitems ul{ | + | border-bottom: 1px solid #ccc; |
| - | list-style-type: none;
| + | font-weight: bold; |
| - | margin: 0;
| + | |
| - | padding: 0;
| + | |
| - | margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
| + | |
| | } | | } |
| - | /*ステータスアイコンのCSS*/
| + | |
| - | #accordion_menu div.menuheader .statusicon{
| + | |
| - | position: absolute;
| + | |
| - | top: 10px;
| + | |
| - | left: 5px;
| + | |
| - | border: none;
| + | |
| - | }
| + | |
| - | #accordion_menu div.categoryitems ul li{
| + | |
| - | padding-bottom: 2px;
| + | |
| - | }
| + | |
| - | #accordion_menu div.categoryitems ul li a{
| + | |
| - | color: #A70303;
| + | |
| - | background: url(image/arrow.png) no-repeat 2px 5px;
| + | |
| - | display: block;
| + | |
| - | padding: 2px 0;
| + | |
| - | padding-left: 19px;
| + | |
| - | text-decoration: none;
| + | |
| - | border-bottom: 1px solid #dadada;
| + | |
| - | font-size: 14px;
| + | |
| - | font-weight: bold;
| + | |
| - | }
| + | |
| - | #accordion_menu div.categoryitems ul li a:visited{
| + | |
| - | color: #A70303;
| + | |
| - | }
| + | |
| - | #accordion_menu div.categoryitems ul li a:hover{
| + | |
| - | color: #A70303;
| + | |
| - | background-color: #eee;
| + | |
| - | }
| + | |
| - | /* ▲ アコーディオンメニュー ▲ ここまで */
| + | |
| | </style> | | </style> |
| - |
| |
| | | | |
| | <div id="accordion"> | | <div id="accordion"> |
| - | <div class=" accordion_toggle" ><p class="genre-name">PS3</p></div> | + | |
| - | <div style="height: auto; display: block;" class="accordion_content">
| + | |
| - | <ul>
| + | <p>ここにはメニューの説明文とかを入れておけばいいでしょうね。デモの為にちょっと長めにテキストを書いてみます。</p> |
| - | <li><a href="#"> アクション</a ></li> | + | </div> |
| - | <li><a href="#">アドベンチャー</a></li>
| + | <div class="item"> |
| - | <li><a href="#">シューティング</a></li>
| + | </div> |
| - | ・・中略・・
| + | |
| - | </ul>
| + | <div class="item"> |
| - | </div>
| + | |
| - | <div class=" accordion_toggle"> <p class="genre-name">PS2</p></div> | + | </div> |
| - | <div style="height: 0px; display: none;" class="accordion_content"> | + | |
| - | <ul>
| + | |
| | + | |
| | + | </div> |
| | + | |
| | + | </div> |
| | | | |
| - | <li><a href="#">アクション</a></li>
| |
| - | <li><a href="#">アドベンチャー</a></li>
| |
| | </html> | | </html> |
"
