Team:KIT-Kyoto/Notebook-week11

From 2010.igem.org

(Difference between revisions)
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 class="item">
-
<div style="height: auto; display: block;" class="accordion_content">
+
        <a href="#">Products</a>
-
<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 class="item">
 +
 
 +
    </div>
 +
 
 +
</div>
-
<li><a href="#">アクション</a></li>
 
-
<li><a href="#">アドベンチャー</a></li>
 
</html>
</html>

Revision as of 14:16, 6 September 2010

Products

ここにはメニューの説明文とかを入れておけばいいでしょうね。デモの為にちょっと長めにテキストを書いてみます。