Template:Team:SCUT-China/mainhead

From 2014.igem.org

(Difference between revisions)
Line 128: Line 128:
}
}
/* end menu (edit, page ...) */
/* end menu (edit, page ...) */
 +
 +
  #header{position:absolute;top:2px;left:0px;width:100%;height:48px;z-index:1000;}
 +
  #header img{position:absolute;left:-1px;width:100%;height:48px;}
 +
  .menubar{position:absolute;top:0px;width:100%;width:100%;height:48px;font-size:20px;font-family:Calibri;text-align:center;z-      index:1000;color:white;}
 +
  .menubar a{text-decoration:none;opacity:1;color:white;}
 +
  .menubar a:hover{text-decoration:underline;}
 +
  .menubar ul{list-style:none;margin-top:0px;}
 +
  .menubar ul > li{float:left;width:150px;cursor:pointer;line-height:48px;height:48px;}
 +
  .menubar ul > li > ul{margin-left:0px;margin-top:-4px;display:none;height:200px;width:120px;}
 +
  .menubar ul > li:hover > ul{display:block;}
 +
  .menubar ul > li > ul > li{margin-left:0px;width:160px;line-height:40px;background-color:white;color:black;}
 +
  .menubar ul > li > ul > li:hover{opacity:0.8;border-bottom:4px solid #61d5c8;}
 +
  .yes{border-top:4px solid #61d5c8;}
</style>
</style>
</head>
</head>
<body>
<body>
 +
<div id="header">
 +
<img src="https://static.igem.org/mediawiki/2014/e/e5/Menubar.png">
 +
<div class="menubar">
 +
<ul>
 +
<li style="margin-left:109px;" class="dianji"><a href="https://2014.igem.org/Team:SCUT-China">Home</a></li>
 +
<li class="dianji yes">Team
 +
<ul style="height:120px;">
 +
<li>Members</li>
 +
<li>Notebook</li>
 +
<li>Attributions</li>
 +
</ul>
 +
</li>
 +
<li class="dianji">Project
 +
<ul >
 +
<li>Overview</li>
 +
<li>Background</li>
 +
<li>Design</li>
 +
<li>Results</li>
 +
<li>Future work</li>
 +
</ul>
 +
</li>
 +
<li class="dianji">Model
 +
<ul style="height:80px;">
 +
<li>Parts</li>
 +
<li>Juding</li>
 +
</ul>
 +
</li>
 +
<li class="dianji">Data Page
 +
<ul style="height:80px;">
 +
<li>Overview</li>
 +
<li>Biology</li>
 +
</ul>
 +
</li>
 +
<li class="dianji">Human practice
 +
<ul>
 +
<li >Survey</li>
 +
<li>Visit and interview</li>
 +
<li>Practical analysis</li>
 +
<li >Team communication</li>
 +
</ul>
 +
</li>
 +
<li class="dianji">Safety</li>
 +
</ul>
 +
</div>
 +
</div>
 +
<script type="text/javascript">
 +
$(document).ready(function(){
 +
$(".dianji").mouseover(function(){
 +
$(this).css({"borderTop":"4px solid #61d5c8"});
 +
$(this).siblings(".dianji").css({"border":"none"});
 +
});
 +
$(".dianji").mouseout(function(){
 +
$(this).css({"border":"none"});
 +
$(".yes").css({"borderTop":"4px solid #61d5c8"});
 +
});
 +
});
 +
</script>
 +
</body>
</body>
</html>
</html>

Revision as of 00:26, 10 October 2014