Team:HZAU-China/Notebook
From 2013.igem.org
(Difference between revisions)
Line 11: | Line 11: | ||
} | } | ||
#sidebar { | #sidebar { | ||
- | + | background-color:transportate; | |
- | background-color: | + | |
clear: both; | clear: both; | ||
float: left; | float: left; | ||
height: auto; | height: auto; | ||
- | width: | + | width: 220px; |
margin-bottom: 5px; | margin-bottom: 5px; | ||
- | padding- | + | padding-bottom: 10px; |
+ | padding-left: 10px; | ||
} | } | ||
#paragraphs { | #paragraphs { | ||
Line 34: | Line 34: | ||
<body> | <body> | ||
<div id="background"> | <div id="background"> | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
<div id="sidebar"> | <div id="sidebar"> | ||
<style> | <style> | ||
*{margin:0px;padding:0px;} | *{margin:0px;padding:0px;} | ||
+ | ul.menu_scroll{width:100%;z-index:100;top:30px;position:fixed;} | ||
+ | ul.menu:after{content:"";display:block;height:0;clear:both;visibility:hidden;} | ||
ul.menu, | ul.menu, | ||
ul.menu ul {padding:0;margin:0;list-style:none;position:;width:200px;background:#ddd;font-family:arial, sans-serif;} | ul.menu ul {padding:0;margin:0;list-style:none;position:;width:200px;background:#ddd;font-family:arial, sans-serif;} | ||
- | ul.menu {z-index:100;padding:10px;margin:0 auto;} | + | ul.menu {z-index:100;padding:10px;margin:0 auto;padding-bottom: 5px;} |
ul.menu ul {z-index:50; | ul.menu ul {z-index:50; | ||
-webkit-transition: 0.5s; | -webkit-transition: 0.5s; | ||
Line 54: | Line 53: | ||
ul.menu > li {margin-top:2px;font-size:12px;} | ul.menu > li {margin-top:2px;font-size:12px;} | ||
ul.menu > li a {font:normal 16px/29px arial, sans-serif;color:#fff;text-decoration:none;} | 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 {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 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 span {display:block;background:#c00;line-height:30px;position:relative;z-index:100;font-size: 18px;} | ||
Line 71: | Line 72: | ||
ul.menu li input:checked ~ ul {background:#ccc;padding-bottom:10px;} | ul.menu li input:checked ~ ul {background:#ccc;padding-bottom:10px;} | ||
ul.menu li input:checked ~ ul li {margin-top:0;} | 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 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.tabs:checked ~ label.close {display:block;z-index:200;} | ||
ul.menu input.close:checked + label.close {display:none;} | ul.menu input.close:checked + label.close {display:none;} | ||
Line 77: | Line 80: | ||
ul.menu input.close:checked ~ ul li {margin-top:-30px;} | ul.menu input.close:checked ~ ul li {margin-top:-30px;} | ||
</style> | </style> | ||
- | </ | + | <script type="text/javascript"> |
+ | $(document).ready(function(){ | ||
+ | var topMain=$("#sidebar").height()-300//是头部的高度加头部与nav导航之间的距离 | ||
+ | var menu=$(".menu"); | ||
+ | $(window).scroll(function(){ | ||
+ | if ($(window).scrollTop()>topMain){//如果滚动条顶部的距离大于topMain则就nav导航就添加类.nav_scroll,否则就移 | ||
+ | |||
+ | 除 | ||
+ | menu.addClass("menu_scroll"); | ||
+ | }else{ | ||
+ | menu.removeClass("menu_scroll"); | ||
+ | } | ||
+ | }); | ||
+ | }) | ||
+ | </script> | ||
+ | |||
<body> | <body> | ||
<ul class="menu"> | <ul class="menu"> | ||
- | + | <li> | |
<input type="radio" name="tab1" id="tab1a" class="tabs"> | <input type="radio" name="tab1" id="tab1a" class="tabs"> | ||
<label for="tab1a" class="open" accesskey="2"> | <label for="tab1a" class="open" accesskey="2"> | ||
- | <a><span> | + | <a><span>Notebook</span></a> |
</label> | </label> | ||
<input type="radio" name="tab1" id="tab1ac" class="tabs close"> | <input type="radio" name="tab1" id="tab1ac" class="tabs close"> | ||
Line 90: | Line 108: | ||
</label> | </label> | ||
<ul> | <ul> | ||
- | <li><a href="#">- | + | <li><a href="#">-Development of our team</a></li> |
- | <li><a href="#">- | + | <li><a href="#">-Protocol</a></li> |
- | + | ||
</ul> | </ul> | ||
- | </li> | + | </li> |
+ | |||
<li> <input type="radio" name="tab1" id="tab1b" class="tabs" checked="checked"> | <li> <input type="radio" name="tab1" id="tab1b" class="tabs" checked="checked"> | ||
<label for="tab1b" class="open" accesskey="4"> | <label for="tab1b" class="open" accesskey="4"> | ||
- | <span> | + | <span>In this page</span></label> |
<input type="radio" name="tab1" id="tab1bc" class="tabs close"> | <input type="radio" name="tab1" id="tab1bc" class="tabs close"> | ||
<label for="tab1bc" class="close" accesskey="5"></label> | <label for="tab1bc" class="close" accesskey="5"></label> | ||
<ul> | <ul> | ||
- | <li><a href="#1"> | + | <li><a href="#1">Week1</a></li> |
- | <li><a href="#2"> | + | <li><a href="#2">Week2</a></li> |
- | <li><a href="#3"> | + | <li><a href="#3">Week3</a></li> |
- | <li><a href="#4"> | + | <li><a href="#4">Week4</a></li> |
- | <li><a href="#5"> | + | <li><a href="#5">Week5</a></li> |
- | <li><a href="#6"> | + | <li><a href="#6">Week6</a></li> |
- | <li><a href="#7"> | + | <li><a href="#7">Week7</a></li> |
- | <li><a href="#8"> | + | <li><a href="#8">Week8</a></li> |
- | <li><a href="#9"> | + | <li><a href="#9">Week9</a></li> |
- | <li><a href="#10"> | + | <li><a href="#10">Week10</a></li> |
- | <li><a href="#11"> | + | <li><a href="#11">Week11</a></li> |
- | <li><a href="#12"> | + | <li><a href="#12">Week12</a></li> |
- | <li><a href="#13"> | + | <li><a href="#13">Week13</a></li> |
- | <li><a href="#14"> | + | <li><a href="#14">Week14</a></li> |
- | <li><a href="#15"> | + | <li><a href="#15">Week15</a></li> |
- | <li><a href="#16"> | + | <li><a href="#16">Week16</a></li> |
</ul> | </ul> | ||
</li> | </li> | ||
- | + | <li><a href="#"><span>Home</span></a></li> | |
- | + | </dl> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | </ | + | |
</body> | </body> | ||
Line 139: | Line 148: | ||
</p> | </p> | ||
<center> | <center> | ||
- | <span style="font-size:46px;font-family:Cambria;margin-top:10px;line-height:80%"> | + | <span style="font-size:46px;font-family:Cambria;margin-top:10px;line-height:80%">Labnote</span> |
</center> | </center> | ||
<p> | <p> | ||
<br> | <br> | ||
</p> | </p> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | <a name="1"> | |
- | + | <h1>Week1</h1> | |
- | + | </a> | |
- | + | <p></p> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <a name=2"> | |
- | + | <h1>Week2</h1> | |
- | + | </a> | |
- | + | <p></p> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <a name="3"> | |
- | + | <h1>Week3</h1> | |
- | + | </a> | |
- | + | <p></p> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <a name="4"> | |
- | + | <h1>Week4</h1> | |
- | + | </a> | |
- | + | <p></p> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <a name="5"> | |
- | + | <h1>Week5</h1> | |
- | + | </a> | |
- | + | <p></p> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <a name="6"> | |
- | + | <h1>Week6</h1> | |
- | + | </a> | |
- | + | <p></p> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <a name="7"> | |
- | + | <h1>Week7</h1> | |
- | + | </a> | |
- | + | <p></p> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <a name="8"> | |
- | + | <h1>Week8</h1> | |
- | + | </a> | |
- | + | <p></p> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <a name="9"> | |
- | + | <h1>Week9</h1> | |
- | + | </a> | |
- | + | <p></p> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <a name="10"> | |
- | + | <h1>Week10</h1> | |
- | + | </a> | |
- | + | <p></p> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <a name="11"> | |
- | + | <h1>Week11</h1> | |
- | + | </a> | |
- | + | <p></p> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <a name="12"> | |
- | + | <h1>Week12</h1> | |
- | + | </a> | |
- | + | <p></p> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <a name="13"> | |
- | + | <h1>Week13</h1> | |
- | + | </a> | |
- | + | <p></p> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <a name="14"> | |
- | + | <h1>Week14</h1> | |
- | + | </a> | |
- | + | <p></p> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <a name="15"> | |
- | + | <h1>Week15</h1> | |
- | + | </a> | |
- | + | <p></p> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | <a name="16"> | ||
+ | <h1>Week16</h1> | ||
+ | </a> | ||
+ | <p></p> | ||
</div> | </div> | ||
</div> | </div> |
Revision as of 08:42, 24 July 2013