Team:HZAU-China/Modeling

From 2013.igem.org

(Difference between revisions)
Line 44: Line 44:
   <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 12px/30px 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;}
 +
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 11px/30px 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"><a href="#1">Introduction</a></dt>
+
<li><a href="#"><span>Introduction</span></a></li>
-
        <dt class="slider_open">Modeling</dt>
+
<li>
-
<dd>-<a href="#2">Immune Accordingly</a><br>          
+
<input type="radio" name="tab1" id="tab1a" class="tabs">
-
            -<a href="#3">Logistic</a><br>
+
<label for="tab1a" class="open" accesskey="2">
-
            -<a href="#4">Cellular Automaton</a><br>
+
<span>Modeling</span>
-
        <dt class="slider_open"><a href="#5">Reference</a></dt>
+
</label>
-
</dl>
+
<input type="radio" name="tab1" id="tab1ac" class="tabs close">
 +
<label for="tab1ac" class="close" accesskey="3">
 +
<img src="/jscss/demoimg/201208/trans.gif" alt="">
 +
</label>
 +
<ul>
 +
<li><a href="#">-Immune Accordingly</a></li>
 +
<li><a href="#">-Logistic</a></li>
 +
<li><a href="#">-Cellular Automaton</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="#"><span>Reference</span></a></li>
 +
</ul>
</body>
</body>
 +
 +
   </div>
   </div>

Revision as of 03:20, 23 July 2013


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