Team:KIT-Kyoto/Template/header

From 2012.igem.org

(Difference between revisions)
m
m
 
(50 intermediate revisions not shown)
Line 1: Line 1:
-
<html lang="ja">
+
<html>
-
<head>
+
<meta charset="UTF-8">
-
<img src="a" align="top" width="970" height="100">
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 +
<script type="text/javascript">
 +
$(function(){
 +
    $("ul.menu").hide(); // .要素を[処理時間]かけて非表示にします
 +
    $("div.category").click(function(){ // イベント用のメソッドです。要素をクリックすることでイベント処理が行われます
 +
        $("ul.menu").slideUp();// 要素を処理時間でスライドアップします
 +
        if($("+ul",this).css("display")=="none"){// ul要素（カテゴリー内のメニュー）カテゴリー内のメニューが表示されていないとき、メニューがsildeDownします
 +
            $("+ul",this).slideDown();// 要素を処理時間でスライドダウンします
 +
        }
 +
    });
 +
});
 +
</script>
<style type="text/css">
<style type="text/css">
-
<!--
+
/*色*/
-
img {border-radius: 20px;  
+
body {
-
  -moz-border-radius: 20px;
+
    font-family: Myriad, Helvetica, Arial, "Meiryo", "メイリオ", sans-serif;
-
  -webkit-border-radius: 20px;
+
    _font-family: 'ＭＳ Ｐゴシック', sans-serif;
}
}
-
--!>
+
div.category {
-
</style>
+
    margin:-top:5px;
-
 
+
     height:40px;
-
<!--めにゅー--!>
+
    line-height:40px;
-
<body>
+
    background:#fdeff2;
-
<div id="menu">
+
    cursor:pointer;
-
   <ul>
+
-
      <li><a href="https://2012.igem.org/Team:KIT-Kyoto">HOME</a>
+
-
      </li>
+
-
      <li><a href="">About Us</a>
+
-
      </li>
+
-
          <ul>
+
-
               <li><a href="https://2012.igem.org/Team:KIT-Kyoto/Team">Profile</a></li>
+
-
               <li><a href="">Photos</a></li>
+
-
              <li><a href="">Twitter</a></li>
+
-
              <li><a href="">YouTube</a></li>
+
-
          </ul>
+
-
       </li>
+
-
       <li><a href="https://2012.igem.org/Team:KIT-Kyoto/Project">Project</a>
+
-
          <ul>
+
-
               <li><a href=""></a></li>
+
-
               <li><a href=""></a></li>
+
-
               <li><a href=""></a></li>
+
-
              <li><a href=""></a></li>
+
-
          </ul>
+
-
       </li>
+
-
       <li><a href="https://2012.igem.org/Team:KIT-Kyoto/Parts">Parts</a>
+
-
            <ul>
+
-
              <li><a href=""></a></li>
+
-
              <li><a href=""></a></li>
+
-
              <li><a href=""></a></li>
+
-
            </ul>
+
-
        <li><a href="https://2012.igem.org/Team:KIT-Kyoto/Modeling">Modeling</a>
+
-
            <ul>
+
-
                <li><a href=""></a></li>
+
-
                <li><a href=""></a></li>
+
-
                <li><a href=""></a></li>
+
-
              </ul>
+
-
        <li><a href="https://2012.igem.org/Team:KIT-Kyoto/Notebook">Notebook</a>
+
-
              <ul>     
+
-
                <li><a href=""></a></li>
+
-
                <li><a href=""></a></li>
+
-
                <li><a href=""></a></li>
+
-
                </ul>
+
-
        <li><a href="https://2012.igem.org/Team:KIT-Kyoto/Safety">Safety</a>
+
-
              <ul>   
+
-
                  <li><a href=""></a></li>
+
-
                  <li><a href=""></a></li>
+
-
                  <li><a href=""></a></li>
+
-
                </ul>
+
-
        <li><a href="">Humanpractice</a>
+
-
                <ul> 
+
-
                    <li><a href=""></a></li>
+
-
                    <li><a href=""></a></li>
+
-
                    <li><a href=""></a></li>
+
-
                  </ul>
+
-
        <li><a href="https://2012.igem.org/Team:KIT-Kyoto/Attributions">Attributions</a>
+
-
              <ul>     
+
-
                  <li><a href=""></a></li>
+
-
                  <li><a href=""></a></li>
+
-
                  <li><a href=""></a></li>
+
-
                </ul>
+
-
        <li><a href="https://2012.igem.org/Team:KIT-Kyoto/Sponsors">Sponsors</a>
+
-
        </li>
+
-
    </ul>
+
-
</div>
+
-
 
+
-
<!--デザイン、あとは左から１列に並べるのと色合わせ、リンク作り。--!>
+
-
<style type="text/css">
+
-
<!--
+
-
/* メインメニュー */
+
-
#menu ul {
+
-
   display:block;
+
-
   list-style-type: none;
+
-
   margin:0;
+
-
   padding:0;
+
}
}
-
 
+
ul.navi{
-
/* サブメニュー1段目 */
+
    width: 150px;
-
#menu ul ul{
+
    margin: 0px;
-
   display:none;
+
    background:#e6cde3;
-
   position:absolute;
+
-
   top:50%;
+
-
   text-align: center;
+
}
}
-
 
+
ul.navi, ul.menu {
-
/* リスト */
+
    padding:0;
-
#menu li {
+
    margin:0;
-
   float:left;line-height:2.0em;
+
    list-style: none;
-
   text-align: center;
+
-
   background:#ddd;
+
}
}
-
 
+
ul.menu li{
-
#menu li li {
+
    padding-left:20px;
-
   clear:both;text-align: left;
+
    margin:0;
 +
    list-style: none;
}
}
-
 
+
div.category {
-
#menu li:hover {
+
    margin-top: 5px;
-
   position:relative;
+
    padding-left: 20px;
 +
    height: 40px;
 +
    line-height: 40px;
 +
    background:#f09199;
}
}
-
 
+
ul.menu a {
-
#menu li:hover > ul {
+
    display: block;
-
   display: block
+
    height: 35px;
 +
    line-height: 35px;
 +
    color:#fdeff2;
}
}
-
/* IE6用 */
 
-
* html #menu li {
 
-
  behavior: expression(
 
-
      this.onmouseover=new Function("this.className='column1'"),
 
-
      this.onmouseout=new Function("this.className=''"),
 
-
      this.style.behavior = 'none'
 
-
  );
 
-
}
 
-
 
-
* html #menu li li {
 
-
  behavior: expression(
 
-
      this.onmouseover=new Function("this.className='column2'"),
 
-
      this.onmouseout=new Function("this.className=''"),
 
-
      this.style.behavior = 'none'
 
-
  );
 
-
}
 
-
 
-
#menu .column1 {position:relative;}
 
-
#menu .column1 ul {display:block;}
 
-
#menu .column1 * ul {display:none;}
 
-
 
-
#menu .column2 {position:relative;}
 
-
#menu .column2 ul {display:block;}
 
-
#menu .column2 * ul {display:none;}
 
-
 
-
/* デザイン */
 
-
#menu li {
 
-
  line-height:1.6em;
 
-
  text-align: center;
 
-
  background:#ee827c;
 
-
  border-radius: 20px;
 
-
  -moz-border-radius: 20px;
 
-
  -webkit-border-radius: 20px;
 
-
}
 
-
 
-
#menu li li {
 
-
  text-align: left;
 
-
  border-radius: 20px;
 
-
  -moz-border-radius: 20px;
 
-
  -webkit-border-radius: 20px;
 
-
}
 
-
 
-
#menu li a{
 
-
  display: block;
 
-
  width:100px;
 
-
  text-decoration:none;
 
-
  color:#5a544b;
 
-
  padding:0 20px;
 
-
}
 
-
 
-
#menu li:hover {
 
-
  background:#e4ab9b;
 
-
  color:#5a544b;
 
-
}
 
-
 
-
#menu .column1, #menu .column2 {
 
-
  color:#5a544b;
 
-
  background:#ee827c;
 
-
}
 
-
--!>
 
</style>
</style>
 +
</head>
 +
<body>
 +
<div>
 +
    <ul class="navi">
 +
        <li>
 +
            <div class="category">Lab Note</div>
 +
            <ul class="menu">
 +
                <li><a href="#">Week1</a></li>
 +
                <li><a href="#">Week2</a></li>
 +
                <li><a href="#">Week3</a></li>
 +
                <li><a href="#">Week4</a></li>
 +
                <li><a href="#">Week5</a></li>
 +
                <li><a href="#">Week6</a></li>
 +
            </ul>
 +
        </li>
 +
        <li>
 +
            <div class="category">Protocol</div>
 +
        </li>
 +
        <li>
 +
            <div class="category">Meeting</div>
 +
            <ul class="menu">
 +
                <li><a href="#">MAY</a></li>
 +
                <li><a href="#">JUNE</a></li>
 +
                <li><a href="#">JULY</a></li>
 +
                <li><a href="#">AUGUST</a></li>
 +
        　    <li><a href="#">SEPTEMBER</a></li>
 +
            </ul>
 +
        </li>
 +
        <li>
 +
            <div class="category">Design</div>
 +
        </li>
 +
    </ul>
 +
</div>
</body>
</body>
-
</head>
+
 
</html>
</html>

Latest revision as of 14:07, 25 August 2012

Retrieved from "http://2012.igem.org/Team:KIT-Kyoto/Template/header"