Team:HZAU-China/Notebook

From 2013.igem.org

(Difference between revisions)
Line 4: Line 4:
#background{
#background{
   background-color: #EDFFFF;
   background-color: #EDFFFF;
-
    border: 3px solid #A1FFFF;
 
     margin:0;
     margin:0;
     padding:0;
     padding:0;
Line 38: Line 37:
   <div id="sidebar">
   <div id="sidebar">
<style>
<style>
-
*{ padding:0; margin:0; }
+
*{margin:0px;padding:0px;}
-
.slider{line-height:23px; width:220px; color:#7ecef4; margin:10px auto; background:#010e16; }
+
ul.menu,
-
 
+
ul.menu ul {padding:0;margin:0;list-style:none;position:;width:200px;background:#ddd;font-family:arial, sans-serif;}
-
.slider dt{ background:#f5f5d2;cursor:pointer; overflow:hidden; background:#1b1b1b; border-
+
ul.menu {z-index:100;padding:10px;margin:0 auto;}
-
 
+
ul.menu ul {z-index:50;
-
bottom:1px solid #fff; height:30px; line-height:30px;font-size: 18px;padding-left:50px;}
+
-webkit-transition: 0.5s;
-
 
+
-moz-transition: 0.5s;
-
.slider dt.slider_open{background:##707070; color:# }
+
-ms-transition: 0.5s;
-
 
+
-o-transition: 0.5s;
-
.slider dd{ display:none; background:#f1f1ea; height: auto; background:#111; border-bottom:1px
+
transition: 0.5s;
-
 
+
}
-
dashed #fafafa; font-size: 16px;font-color:#fff}
+
ul.menu li {line-height:30px;position:relative;text-indent:10px;}
-
 
+
ul.menu > li {margin-top:2px;font-size:12px;}
-
.slider dd p{ padding:10px 20px; overflow:hidden;padding-left：40px； }
+
ul.menu > li a {font:normal 16px/29px arial, sans-serif;color:#fff;text-decoration:none;}
 +
ul.menu label.open {display:block;background:#c00  no-repeat 170px 12px;line-height:30px;position:relative;z-index:100;font:normal 12px/30px arial, sans-serif;color:#fff;border-radius:10px 10px 0 0;}
 +
ul.menu label.open b {color:#ff0;}
 +
ul.menu span {display:block;background:#c00;line-height:30px;position:relative;z-index:100;font-size: 18px;}
 +
ul.menu label img {position:absolute;left:0;top:0;width:100%;height:30px;}
 +
ul.menu ul li {margin-top:-30px;
 +
-webkit-transition: 0.5s;
 +
-moz-transition: 0.5s;
 +
-ms-transition: 0.5s;
 +
-o-transition: 0.5s;
 +
transition: 0.5s;
 +
}
 +
ul.menu ul li a {display:block;font:normal 16px/29px arial, sans-serif;color:#000;background:#ccc;}
 +
ul.menu ul li a:hover {background:#ddd;}
 +
ul.menu input {position:absolute;left:-9999px;}
 +
ul.menu li input:checked + label {background:#069;}
 +
ul.menu li input:checked ~ ul {background:#ccc;padding-bottom:10px;}
 +
ul.menu li input:checked ~ ul li {margin-top:0;}
 +
ul.menu label.close {display:block;width:200px;height:30px;background:transparent url("/jscss/demoimg/201208/u-arrow.gif") no-repeat 170px 12px;line-height:30px;position:relative;left:0;z-index:90;margin-top:-30px}  
 +
ul.menu input.tabs:checked ~ label.close {display:block;z-index:200;}
 +
ul.menu input.close:checked + label.close {display:none;}
 +
ul.menu input.close:checked ~ ul {background:#ddd;padding-bottom:0;}
 +
ul.menu input.close:checked ~ ul li {margin-top:-30px;}
</style>
</style>
-
<script>
 
-
$(function(){
 
-
//初始化变量
 
-
var flag = 0;
 
-
var $dt = $('.slider dt');
 
-
var $dd = $('.slider dd');
 
-
//初始化状态
 
-
$dd.eq(0).show();
 
-
$dt.eq(0).css('cursor','default');
 
-
//单击事件
 
-
$dt.click(function(){
 
-
if($dt.index(this) == flag) return false;
 
-
flag = $dt.index(this);
 
-
$dd.not($dd.eq(flag)).slideUp();
 
-
$dd.eq(flag).slideDown();
 
-
$dt.eq(flag).css('cursor','default').addClass('slider_open');
 
-
$dt.not($dt.eq(flag)).css('cursor','pointer').removeClass('slider_open');
 
-
  });
 
-
});
 
-
</script>
 
</head>
</head>
<body>
<body>
-
<dl class="slider">
+
<ul class="menu">
-
<dt class="slider_open">Notebook</dt>
+
<li>
-
<dd>-<a href="#">Development of our team and Summer Fun</a><br>
+
<input type="radio" name="tab1" id="tab1a" class="tabs">
-
            -<a href="#">Labnote</a><br>
+
<label for="tab1a" class="open" accesskey="2">
-
            -<a href="#">Protocol</a><br></dd>
+
<a><span>Notebook</span></a>
-
<dt>In this page</dt>
+
</label>
-
<dd>-<a href="#Week1">Week1</a><br>
+
<input type="radio" name="tab1" id="tab1ac" class="tabs close">
-
            -<a href="#Week2">Week2</a><br>
+
<label for="tab1ac" class="close" accesskey="3">
-
            -<a href="#Week3">Week3</a><br>
+
-
            -<a href="#Week4">Week4</a><br>
+
</label>
-
            -<a href="#Week5">Week5</a><br>
+
<ul>
-
            -<a href="#Week6">Week6</a><br>
+
<li><a href="#">-Development of our team and Summer Fun</a></li>
-
            -<a href="#Week7">Week7</a><br>
+
<li><a href="#">-Labnote</a></li>
-
            -<a href="#Week8">Week8</a><br>
+
<li><a href="#">-Protocol</a></li>
-
            -<a href="#Week9">Week9</a><br>
+
</ul>
-
            -<a href="#Week10">Week10</a><br>
+
</li>
-
            -<a href="#Week11">Week11</a><br>
+
-
            -<a href="#Week12">Week12</a><br>
+
-
            -<a href="#Week13">Week13</a><br>
+
-
            -<a href="#Week14">Week14</a><br>
+
-
            -<a href="#Week15">Week15</a><br>
+
-
            -<a href="#Week16">Week16</a><br>
+
-
            -<a href="#Week17">Week17</a><br></dd>
+
 +
<li>    <input type="radio" name="tab1" id="tab1b" class="tabs" checked="checked">
 +
                <label for="tab1b" class="open" accesskey="4">
 +
                <span>In this page</span></label>
 +
<input type="radio" name="tab1" id="tab1bc" class="tabs close">
 +
                <label for="tab1bc" class="close" accesskey="5"></label>
 +
<ul>
 +
      <li><a href="#1">Week1</a></li>
 +
                      <li><a href="#2">Week2</a></li>
 +
                      <li><a href="#3">Week3</a></li>
 +
                      <li><a href="#4">Week4</a></li>
 +
                      <li><a href="#5">Week5</a></li>
 +
                      <li><a href="#6">Week6</a></li>
 +
                      <li><a href="#7">Week7</a></li>
 +
                      <li><a href="#8">Week8</a></li>
 +
                      <li><a href="#9">Week9</a></li>
 +
                      <li><a href="#10">Week10</a></li>
 +
                      <li><a href="#11">Week11</a></li>
 +
                      <li><a href="#12">Week12</a></li>
 +
                      <li><a href="#13">Week13</a></li>
 +
                      <li><a href="#14">Week14</a></li>
 +
                      <li><a href="#15">Week15</a></li>
 +
                      <li><a href="#16">Week16</a></li>
 +
</ul>
 +
</li>
</dl>
</dl>
</body>
</body>
Line 114: Line 132:
</p>
</p>
-
<a name="Week1">
+
<a name="1">
<h1>Week1</h1>
<h1>Week1</h1>
</a>
</a>
<p></p>
<p></p>
-
<a name=Week2">
+
<a name=2">
<h1>Week2</h1>
<h1>Week2</h1>
</a>
</a>
<p></p>
<p></p>
-
<a name="Week3">
+
<a name="3">
<h1>Week3</h1>
<h1>Week3</h1>
</a>
</a>
<p></p>
<p></p>
-
<a name="Week4">
+
<a name="4">
<h1>Week4</h1>
<h1>Week4</h1>
</a>
</a>
<p></p>
<p></p>
-
<a name="Week5">
+
<a name="5">
<h1>Week5</h1>
<h1>Week5</h1>
</a>
</a>
<p></p>
<p></p>
-
<a name="Week6">
+
<a name="6">
<h1>Week6</h1>
<h1>Week6</h1>
</a>
</a>
<p></p>
<p></p>
-
<a name="Week7">
+
<a name="7">
<h1>Week7</h1>
<h1>Week7</h1>
</a>
</a>
<p></p>
<p></p>
-
<a name="Week8">
+
<a name="8">
<h1>Week8</h1>
<h1>Week8</h1>
</a>
</a>
<p></p>
<p></p>
-
<a name="Week9">
+
<a name="9">
<h1>Week9</h1>
<h1>Week9</h1>
</a>
</a>
<p></p>
<p></p>
-
<a name="Week10">
+
<a name="10">
<h1>Week10</h1>
<h1>Week10</h1>
</a>
</a>
<p></p>
<p></p>
-
<a name="Week11">
+
<a name="11">
<h1>Week11</h1>
<h1>Week11</h1>
</a>
</a>
<p></p>
<p></p>
-
<a name="Week12">
+
<a name="12">
<h1>Week12</h1>
<h1>Week12</h1>
</a>
</a>
<p></p>
<p></p>
-
<a name="Week13">
+
<a name="13">
<h1>Week13</h1>
<h1>Week13</h1>
</a>
</a>
<p></p>
<p></p>
-
<a name="Week14">
+
<a name="14">
<h1>Week14</h1>
<h1>Week14</h1>
</a>
</a>
<p></p>
<p></p>
-
<a name="Week15">
+
<a name="15">
<h1>Week15</h1>
<h1>Week15</h1>
</a>
</a>
<p></p>
<p></p>
-
<a name="Week16">
+
<a name="16">
<h1>Week16</h1>
<h1>Week16</h1>
</a>
</a>

Revision as of 04:54, 23 July 2013


Retrieved from "http://2013.igem.org/Team:HZAU-China/Notebook"