Team:KIT-Kyoto/Notebook-week11

From 2010.igem.org

(Difference between revisions)
Line 4: Line 4:
<head>
<head>
-
<script type="text/javascript" src="mootools.js"></script>  
+
<script type="text/javascript" src="jquery.js"></script>
-
<script type="text/javascript">  
+
<script type="text/javascript" src="ddaccordion.js">
-
var accordion;
+
/***********************************************
-
var accordionTogglers;
+
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
-
var accordionContents;
+
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
 +
* This notice must stay intact for legal use
 +
***********************************************/
 +
</script>
 +
<script type="text/javascript" src="wrapscroll.js"></script>
 +
 
 +
<script type="text/javascript"><!--
 +
ddaccordion.init({
 +
  headerclass: "expandable",
 +
  contentclass: "categoryitems",
 +
  collapseprev: true,
 +
  defaultexpanded: [0],
 +
  animatedefault: false,
 +
  persiststate: true,
 +
  toggleclass: ["", "openheader"],
 +
  togglehtml: ["suffix", "<img src='image/plus.gif' class='statusicon' />", "<img src='image/minus.gif' class='statusicon' />"],
 +
  animatespeed: "normal"
 +
})
 +
// wrapScroll
 +
var mov = new wrapScroll('accordion_menu','container','header');
 +
mov.marginTop = 5; //上からのマージンを指定(px)
 +
//--></script>
 +
 
 +
 
   
   
-
window.onload = function() {
 
-
accordionTogglers = document.getElementsByClassName('accToggler');
 
-
 
-
accordionTogglers.each(function(toggler){
 
-
//remember the original color
 
-
toggler.origColor = toggler.getStyle('background-color');
 
-
//set the effect
 
-
toggler.fx = new Fx.Color(toggler, 'background-color');
 
-
});
 
-
 
-
accordionContents = document.getElementsByClassName('accContent');
 
-
 
-
accordion = new Fx.Accordion(accordionTogglers, accordionContents,{
 
-
//when an element is opened change the background color to blue
 
-
onActive: function(toggler){
 
-
toggler.fx.toColor('#6899CE');
 
-
},
 
-
onBackground: function(toggler){
 
-
//change the background color to the original (green)
 
-
//color when another toggler is pressed
 
-
toggler.setStyle('background-color', toggler.origColor);
 
-
}
 
-
});
 
-
}
 
-
</script>
 
   
   
<style type="text/css">  
<style type="text/css">  
-
*{padding:0px; margin:0px;}
+
/* ▼　アコーディオンメニュー　▼ */
-
body{font-size:11px; font-family:"Lucida Grande", Arial, sans-serif; color:#6d6d6d;}
+
#accordion_menu{
-
.accToggler{
+
  width: 180px; /*width of accordion menu*/
-
margin: 3px auto;
+
  background-color:#fff;
-
padding: 3px;
+
  letter-spacing:1px;
-
width: 400px;
+
  margin:5px 10px;
-
background: #acc95f;
+
-
color: #f4f4f4;
+
-
border: 1px solid #fff;
+
-
cursor: pointer;
+
}
}
-
.accContent{
+
/* アコーディオンのカテゴリの指定 */
-
margin: 0px auto;
+
#accordion_menu .menuheader{
-
width: 400px;
+
  background-image: url(image/bg_menu.jpg);
 +
  background-repeat: no-repeat;
 +
  height:32px;
 +
  margin-bottom: 3px;
 +
  text-decoration: none;
 +
  line-height: 32px;
 +
  font-size: 16px;
 +
  font-weight:bold;
 +
  text-indent: 1.4em;
 +
  color: #000;
 +
  cursor: hand;
 +
  cursor: pointer;
 +
  /* ステータスアイコンを使用する場合 以下の2行が必要です。使用しない場合は削除しても構いません。 */
 +
  display: block;
 +
  position: relative;  
}
}
-
a, a:visited{
+
#accordion_menu .menuheader:hover{
-
font-family:"Lucida Grande", Arial, sans-serif; color:#6d6d6d;
+
  color: #FF0;
}
}
 +
/* openheader はカテゴリが開いている状態のCSS */
 +
#accordion_menu .openheader{
 +
  background-image: url(image/bg_menu.jpg);
 +
  background-position: 0 -32px;
 +
  background-repeat: no-repeat;
 +
  color: #FFFFFF;
 +
}
 +
/* 子メニューの指定 */
 +
#accordion_menu div.categoryitems ul{
 +
  list-style-type: none;
 +
  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>  
</head>
</head>
<body>  
<body>  
-
<h1 style="text-align:center">Accordion with color transition example - solutoire.com</h1>  
+
<<div id="accordion_menu">
-
<p style="width: 400px; margin:10px auto">  
+
<a href="http://sawa-s.com/"><div class="menuheader">HOME</div></a>
-
See the 'Javascript used in this example' tab for the options used in this example.
+
<div class="menuheader expandable">カテゴリ 1</div>
-
</p>  
+
<div class="categoryitems">
-
<p class="accToggler">Click me!</p>  
+
  <ul>
-
<p class="accContent">  
+
  <li><a href="#">MENU 1-1</a></li>
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In eu elit. Sed consequat neque et sapien. In hac habitasse platea dictumst. In hac habitasse platea
+
  <li><a href="#">MENU 1-2</a></li>
-
dictumst. Donec justo dui, aliquam ac, feugiat nec, malesuada ac, enim. Etiam consequat nulla eget metus malesuada tincidunt. Ut ultrices nonummy metus.
+
  <li><a href="#">MENU 1-3</a></li>
-
Pellentesque pharetra neque eu urna. In nec ligula. Curabitur purus ligula, consectetuer id, auctor et, gravida pretium, est. Aenean vitae neque. Integer dolor
+
  <li><a href="#">MENU 1-4</a></li>
-
enim, ultricies semper, ullamcorper at, mollis at, mauris.
+
  <li><a href="#">MENU 1-5</a></li>
-
</p>  
+
  <li><a href="#">MENU 1-6</a></li>
-
<p class="accToggler">Click me!</p>  
+
  </ul>
-
<p class="accContent">  
+
</div>
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In eu elit. Sed consequat neque et sapien. In hac habitasse platea dictumst. In hac habitasse platea
+
<div class="menuheader expandable">カテゴリ 2</div>
-
dictumst. Donec justo dui, aliquam ac, feugiat nec, malesuada ac, enim. Etiam consequat nulla eget metus malesuada tincidunt. Ut ultrices nonummy metus.
+
<div class="categoryitems">
-
Pellentesque pharetra neque eu urna. In nec ligula. Curabitur purus ligula, consectetuer id, auctor et, gravida pretium, est. Aenean vitae neque. Integer dolor
+
  <ul>
-
enim, ultricies semper, ullamcorper at, mollis at, mauris.
+
  <li><a href="#">MENU 2-1</a></li>
-
</p>  
+
  <li><a href="#">MENU 2-2</a></li>
-
+
  <li><a href="#">MENU 2-3</a></li>
-
<p class="accToggler">Javascript used in this example</p>  
+
  <li><a href="#">MENU 2-4</a></li>
-
<p class="accContent">  
+
  <li><a href="#">MENU 2-5</a></li>
-
<code>  
+
  <li><a href="#">MENU 2-6</a></li>
-
var accordion;<br />  
+
  <li><a href="#">MENU 2-7</a></li>
-
var accordionTogglers;<br />  
+
  </ul>
-
var accordionContents;<br /><br />  
+
</div>
-
+
 
-
window.onload = function() {<br /><br />  
+
<div class="menuheader expandable">カテゴリ 3</div>
-
accordionTogglers = document.getElementsByClassName('accToggler');<br /><br />  
+
<div class="categoryitems">
-
+
  <ul>
-
accordionTogglers.each(function(toggler){<br />  
+
  <li><a href="#">MENU 3-1</a></li>
-
//remember the original color<br />  
+
  <li><a href="#">MENU 3-2</a></li>
-
toggler.origColor = toggler.getStyle('background-color');<br />  
+
  <li><a href="#">MENU 3-3</a></li>
-
//set the effect<br />  
+
  <li><a href="#">MENU 3-4</a></li>
-
toggler.fx = new Fx.Color(toggler, 'background-color');<br />  
+
  </ul>
-
});<br /><br />  
+
  <div style="text-align:center;padding:5px;"><img src="image/akafuji.jpg" width="150" /></div>
-
+
  <div style="padding:5px;font-size:11px;">メニュー内に写真を表示する事も可能です。</div>
-
accordionContents = document.getElementsByClassName('accContent');<br /><br />  
+
</div>
-
accordion = new Fx.Accordion(accordionTogglers, <br />  
+
 
-
accordionContents,{<br />  
+
<div class="menuheader expandable">サンプル</div>
-
//when an element is opened change the<br />  
+
<div class="categoryitems">
-
//background color to blue<br />  
+
  <ul>
-
onActive: function(toggler){<br />  
+
  <li><a href="collapseprev.html">複数のカテゴリを開く</a></li>
-
toggler.fx.toColor('#6899CE');<br />  
+
  <li><a href="defaultexpanded.html">開くカテゴリを固定</a></li>
-
},<br />  
+
  <li><a href="animatedefault.html">ロード後にアニメーションで開く</a></li>
-
onBackground: function(toggler){<br />  
+
  </ul>
-
//change the background color to the original (green)<br />  
+
</div>
-
//color when another toggler is pressed<br />  
+
 
-
toggler.setStyle('background-color', toggler.origColor);<br />  
+
<div class="menuheader" style="cursor: default">Always Displays</div>
-
}<br />  
+
<div style="padding:5px;font-size:11px;">
-
});<br />
+
常に表示しておきたいテキスト・メールアドレス・カウンターなどをここに書く事が出来ます。<br />画像の挿入、リンクの設定、スタイルの指定も可能です。
-
}
+
</div>
-
</code>  
+
 
-
</p>  
+
<!-- / #accordion_menu --></div>
-
<p class="accToggler">CSS used in this example</p>  
+
-
<p class="accContent">  
+
-
<code>  
+
-
.accToggler{<br />  
+
-
margin: 3px auto;<br />  
+
-
padding: 3px;<br />
+
-
width: 400px;<br />  
+
-
background: #acc95f;<br />  
+
-
color: #f4f4f4;<br />  
+
-
border: 1px solid #fff;<br />  
+
-
cursor: pointer;<br />  
+
-
}<br /><br />  
+
-
.accContent{<br />  
+
-
margin: 0px auto;<br />  
+
-
width: 400px;<br />  
+
-
}<code>  
+
-
</p>  
+
-
<p style="width: 400px; margin:10px auto;text-align:center">  
+
-
&copy;2006 <b><a href="http://www.solutoire.com">solutoire.com</a></b>  
+
-
</p>  
+
</body>  
</body>  
</html>
</html>

Revision as of 14:07, 6 September 2010

<

<div class="menuheader">HOME</div>
メニュー内に写真を表示する事も可能です。
Always Displays
常に表示しておきたいテキスト・メールアドレス・カウンターなどをここに書く事が出来ます。
画像の挿入、リンクの設定、スタイルの指定も可能です。

Retrieved from "http://2010.igem.org/Team:KIT-Kyoto/Notebook-week11"