Team:Beijing HDFLS High/header

From 2014hs.igem.org

(Difference between revisions)
m
Line 1: Line 1:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
<html>
<head>
<head>
-
<title>PlusBusiness</title>
+
<title>Beijing HDFLS iGEM 2013</title>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
<script type="text/javascript">
-
<meta http-equiv="imagetoolbar" content="no" />
+
 
-
<link rel="stylesheet" href="../../../../迅雷下载/网站/PlusBusiness/styles/layout.css" type="text/css" />
+
var tabdropdown={
-
<script type="text/javascript" src="../../../../迅雷下载/网站/PlusBusiness/scripts/jquery-1.4.1.min.js"></script>
+
disappeardelay: 200, //set delay in miliseconds before menu disappears onmouseout
-
<script type="text/javascript" src="../../../../迅雷下载/网站/PlusBusiness/scripts/jquery.jcarousel.pack.js"></script>
+
disablemenuclick: false, //when user clicks on a menu item with a drop down menu, disable menu item's link?
-
<script type="text/javascript" src="../../../../迅雷下载/网站/PlusBusiness/scripts/jquery.jcarousel.setup.js"></script>
+
enableiframeshim: 1, //1 or 0, for true or false
 +
 
 +
//No need to edit beyond here////////////////////////
 +
dropmenuobj: null, ie: document.all, firefox: document.getElementById&&!document.all, previousmenuitem:null,
 +
currentpageurl: window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, ""), //get current page url (minus hostname, ie: http://www.dynamicdrive.com/)
 +
 
 +
getposOffset:function(what, offsettype){
 +
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
 +
var parentEl=what.offsetParent;
 +
while (parentEl!=null){
 +
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
 +
parentEl=parentEl.offsetParent;
 +
}
 +
return totaloffset;
 +
},
 +
 
 +
showhide:function(obj, e, obj2){ //obj refers to drop down menu, obj2 refers to tab menu item mouse is currently over
 +
if (this.ie || this.firefox)
 +
this.dropmenuobj.style.left=this.dropmenuobj.style.top="-500px"
 +
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
 +
if (obj2.parentNode.className.indexOf("default")==-1) //if tab isn't a default selected one
 +
obj2.parentNode.className="selected"
 +
obj.visibility="visible"
 +
}
 +
else if (e.type=="click")
 +
obj.visibility="hidden"
 +
},
 +
 
 +
iecompattest:function(){
 +
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
 +
},
 +
 
 +
clearbrowseredge:function(obj, whichedge){
 +
var edgeoffset=0
 +
if (whichedge=="rightedge"){
 +
var windowedge=this.ie && !window.opera? this.standardbody.scrollLeft+this.standardbody.clientWidth-15 : window.pageXOffset+window.innerWidth-15
 +
this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetWidth
 +
if (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure) //move menu to the left?
 +
edgeoffset=this.dropmenuobj.contentmeasure-obj.offsetWidth
 +
}
 +
else{
 +
var topedge=this.ie && !window.opera? this.standardbody.scrollTop : window.pageYOffset
 +
var windowedge=this.ie && !window.opera? this.standardbody.scrollTop+this.standardbody.clientHeight-15 : window.pageYOffset+window.innerHeight-18
 +
this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetHeight
 +
if (windowedge-this.dropmenuobj.y < this.dropmenuobj.contentmeasure){ //move up?
 +
edgeoffset=this.dropmenuobj.contentmeasure+obj.offsetHeight
 +
if ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure) //up no good either?
 +
edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
 +
}
 +
this.dropmenuobj.firstlink.style.borderTopWidth=(edgeoffset==0)? 0 : "1px" //Add 1px top border to menu if dropping up
 +
}
 +
return edgeoffset
 +
},
 +
 
 +
dropit:function(obj, e, dropmenuID){
 +
if (this.dropmenuobj!=null){ //hide previous menu
 +
this.dropmenuobj.style.visibility="hidden" //hide menu
 +
if (this.previousmenuitem!=null && this.previousmenuitem!=obj){
 +
if (this.previousmenuitem.parentNode.className.indexOf("default")==-1) //If the tab isn't a default selected one
 +
this.previousmenuitem.parentNode.className=""
 +
}
 +
}
 +
this.clearhidemenu()
 +
if (this.ie||this.firefox){
 +
obj.onmouseout=function(){tabdropdown.delayhidemenu(obj)}
 +
obj.onclick=function(){return !tabdropdown.disablemenuclick} //disable main menu item link onclick?
 +
this.dropmenuobj=document.getElementById(dropmenuID)
 +
this.dropmenuobj.onmouseover=function(){tabdropdown.clearhidemenu()}
 +
this.dropmenuobj.onmouseout=function(e){tabdropdown.dynamichide(e, obj)}
 +
this.dropmenuobj.onclick=function(){tabdropdown.delayhidemenu(obj)}
 +
this.showhide(this.dropmenuobj.style, e, obj)
 +
this.dropmenuobj.x=this.getposOffset(obj, "left")
 +
this.dropmenuobj.y=this.getposOffset(obj, "top")
 +
this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
 +
this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
 +
this.previousmenuitem=obj //remember main menu item mouse moved out from (and into current menu item)
 +
this.positionshim() //call iframe shim function
 +
}
 +
},
 +
 
 +
contains_firefox:function(a, b) {
 +
while (b.parentNode)
 +
if ((b = b.parentNode) == a)
 +
return true;
 +
return false;
 +
},
 +
 
 +
dynamichide:function(e, obj2){ //obj2 refers to tab menu item mouse is currently over
 +
var evtobj=window.event? window.event : e
 +
if (this.ie&&!this.dropmenuobj.contains(evtobj.toElement))
 +
this.delayhidemenu(obj2)
 +
else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))
 +
this.delayhidemenu(obj2)
 +
},
 +
 
 +
delayhidemenu:function(obj2){
 +
this.delayhide=setTimeout(function(){tabdropdown.dropmenuobj.style.visibility='hidden'; if (obj2.parentNode.className.indexOf('default')==-1) obj2.parentNode.className=''},this.disappeardelay) //hide menu
 +
},
 +
 
 +
clearhidemenu:function(){
 +
if (this.delayhide!="undefined")
 +
clearTimeout(this.delayhide)
 +
},
 +
 
 +
positionshim:function(){ //display iframe shim function
 +
if (this.enableiframeshim && typeof this.shimobject!="undefined"){
 +
if (this.dropmenuobj.style.visibility=="visible"){
 +
this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"
 +
this.shimobject.style.height=this.dropmenuobj.offsetHeight+"px"
 +
this.shimobject.style.left=this.dropmenuobj.style.left
 +
this.shimobject.style.top=this.dropmenuobj.style.top
 +
}
 +
this.shimobject.style.display=(this.dropmenuobj.style.visibility=="visible")? "block" : "none"
 +
}
 +
},
 +
 
 +
hideshim:function(){
 +
if (this.enableiframeshim && typeof this.shimobject!="undefined")
 +
this.shimobject.style.display='none'
 +
},
 +
 
 +
isSelected:function(menuurl){
 +
var menuurl=menuurl.replace("http://"+menuurl.hostname, "").replace(/^\//, "")
 +
return (tabdropdown.currentpageurl==menuurl)
 +
},
 +
 
 +
init:function(menuid, dselected){
 +
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
 +
var menuitems=document.getElementById(menuid).getElementsByTagName("a")
 +
for (var i=0; i<menuitems.length; i++){
 +
if (menuitems[i].getAttribute("rel")){
 +
var relvalue=menuitems[i].getAttribute("rel")
 +
document.getElementById(relvalue).firstlink=document.getElementById(relvalue).getElementsByTagName("a")[0]
 +
menuitems[i].onmouseover=function(e){
 +
var event=typeof e!="undefined"? e : window.event
 +
tabdropdown.dropit(this, event, this.getAttribute("rel"))
 +
}
 +
}
 +
if (dselected=="auto" && typeof setalready=="undefined" && this.isSelected(menuitems[i].href)){
 +
menuitems[i].parentNode.className+=" selected default"
 +
var setalready=true
 +
}
 +
else if (parseInt(dselected)==i)
 +
menuitems[i].parentNode.className+=" selected default"
 +
}
 +
}
 +
 
 +
}
 +
</script>
 +
<style>
 +
.ddcolortabs{
 +
padding: 0;
 +
width: 100%;
 +
background: transparent;
 +
voice-family: "\"}\"";
 +
voice-family: inherit;
 +
}
 +
 
 +
.ddcolortabs ul{
 +
font: normal 11px Arial, Verdana, sans-serif;
 +
margin:0;
 +
padding:0;
 +
list-style:none;
 +
}
 +
 
 +
.ddcolortabs li{
 +
display:inline;
 +
margin:0 2px 0 0;
 +
padding:0;
 +
text-transform:uppercase;
 +
}
 +
.ddcolortabs a{
 +
float:left;
 +
color: white;
 +
background: black url(media/color_tabs_left.gif) no-repeat left top;
 +
margin:0 2px 0 0;
 +
padding:0 0 1px 3px;
 +
text-decoration:none;
 +
letter-spacing: 1px;
 +
}
 +
 
 +
.ddcolortabs a span{
 +
float:left;
 +
display:block;
 +
background: transparent url(media/color_tabs_right.gif) no-repeat right top;
 +
padding: 4px 8px 2px 7px;
 +
}
 +
 
 +
.ddcolortabs a span{
 +
float:none;
 +
}
 +
 
 +
.ddcolortabs a:hover{
 +
background-color: #591f20;
 +
}
 +
 
 +
.ddcolortabs a:hover span{
 +
background-color: #591f20;
 +
}
 +
 
 +
.ddcolortabs .selected a, #ddcolortabs .selected a span{ /*currently selected tab*/
 +
background-color: #591f20;
 +
}
 +
 
 +
.ddcolortabsline{
 +
clear: both;
 +
padding: 0;
 +
width: 100%;
 +
height: 8px;
 +
line-height: 8px;
 +
background: black;
 +
border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
 +
}
 +
 
 +
/* ######### Style for Drop Down Menu ######### */
 +
 
 +
.dropmenudiv_a{
 +
position:absolute;
 +
top: 0;
 +
border: 1px solid black; /*THEME CHANGE HERE*/
 +
border-top-width: 8px; /*Top border width. Should match height of .ddcolortabsline above*/
 +
border-bottom-width: 0;
 +
font:normal 12px Arial;
 +
line-height:18px;
 +
z-index:100;
 +
background-color: white;
 +
width: 200px;
 +
visibility: hidden;
 +
}
 +
.dropmenudiv_a a{
 +
width: auto;
 +
display: block;
 +
text-indent: 5px;
 +
border-top: 0 solid #678b3f;
 +
border-bottom: 1px solid #678b3f; /*THEME CHANGE HERE*/
 +
padding: 2px 0;
 +
text-decoration: none;
 +
color: black;
 +
}
 +
 
 +
* html .dropmenudiv_a a{ /*IE only hack*/
 +
width: 100%;
 +
}
 +
 
 +
.dropmenudiv_a a:hover{ /*THEME CHANGE HERE*/
 +
background-color: #8a3c3d;
 +
color: white;
 +
}
 +
</style>
</head>
</head>
-
<body id="top">
+
<!-- CSS for Drop Down Tabs Menu #1 -->
-
<!-- ####################################################################################################### -->
+
<link rel="stylesheet" type="text/css" href="ddcolortabs.css" />
-
<div class="wrapper col1">
+
 
-
  <div id="header">
+
<div id="colortab" class="ddcolortabs">
-
    <div id="logo">
+
<ul>
-
      <h1><a href="#">igem</a></h1>
+
<li><a href="https://2014hs.igem.org/Team:Beijing_HDFLS_High" title="Home"><span>Home</span></a></li>
-
      <h6>Team : Beijing HDFLS high</h6>
+
<li><a href="https://2014hs.igem.org/Team:Beijing_HDFLS_High/Team" title="Our Team" rel="dropmenu1_a"><span>Team</span></a></li>
-
      <p>&nbsp;</p>
+
<li><a href="https://2014hs.igem.org/Team:Beijing_HDFLS_High/Project" title="Project and Results" rel="dropmenu1_a"><span>Project</span></a></li>
-
    </div>
+
<li><a href="https://2014hs.igem.org/Team:Beijing_HDFLS_High/Notebook" title="Our working log"><span>Notebook</span></a></li>
-
    <div id="topnav">
+
<li><a href="https://2014hs.igem.org/Team:Beijing_HDFLS_High/Safety" title="How we guarantee the safety in lab" rel="dropmenu1_a"><span>Safety</span></a></li>
-
      <ul>
+
<li><a href="https://2014hs.igem.org/Team:Beijing_HDFLS_High/Attribute" title="Attribute of every member in team" rel="dropmenu2_a"><span>Attribute</span></a></li>
-
        <li><a href="../../../../迅雷下载/网站/PlusBusiness/index.html">Home</a></li>
+
<li><a href="https://2014hs.igem.org/Team:Beijing_HDFLS_High/Human" title="Human Practices" rel="dropmenu2_a"><span>Human Practices</span></a></li>
-
        <li class="active"><a href="../../../../迅雷下载/网站/PlusBusiness/style-demo.html">team</a></li>
+
<li><a href="https://2014hs.igem.org/Team:Beijing_HDFLS_High/Fun" title="Fun" rel="dropmenu1_a"><span>Fun</span></a></li>
-
        <li><a href="../../../../迅雷下载/网站/PlusBusiness/full-width.html">project</a></li>
+
</ul>
-
        <li><a href="../../../../迅雷下载/网站/PlusBusiness/full-width.html">human practices</a></li>
+
-
        <li><a href="../../../../迅雷下载/网站/PlusBusiness/full-width.html">attribute</a></li>
+
-
        <li><a href="#">notebook</a>
+
-
          <ul>
+
-
            <li><a href="#">Link 1</a></li>
+
-
            <li><a href="#">Link 2</a></li>
+
-
            <li><a href="#">Link 3</a></li>
+
-
          </ul>
+
-
        </li>
+
-
        <li class="last"><a href="#">safity</a></li>
+
-
      </ul>
+
-
    </div>
+
-
    <br class="clear" />
+
-
  </div>  
+
</div>
</div>
-
<!-- ####################################################################################################### -->
+
<div class="ddcolortabsline">&nbsp;</div>
-
<div class="wrapper col2">
+
<div id="dropmenu1_a" class="dropmenudiv_a">
-
  <div id="featured_slide">
+
<a href="https://2014hs.igem.org/Team:Beijing_HDFLS_High/Team">Overview</a>
-
    <div id="featured_content">
+
<a href="https://2014hs.igem.org/Team:Beijing_HDFLS_High/Team">Step1</a>
-
      <ul>
+
<a href="https://2014hs.igem.org/Team:Beijing_HDFLS_High/Team">Step2</a>
-
        <li><img src="../../../../迅雷下载/网站/PlusBusiness/images/1.jpg" alt="" />
+
-
          <div class="floater">
+
-
            <h2>About This Template !</h2>
+
-
            <p>This is a W3C standards compliant free website template from <a href="http://www.mycodes.net/">源码之家</a>. This template is distributed using a <a href="#">Website Template Licence</a>, which allows you to use and modify the template for both personal and commercial use when you keep the provided credit links in the footer. For more CSS templates visit <a href="#">Free Website Templates</a>.</p>
+
-
            <p class="readmore"><a href="#">Continue Reading &raquo;</a></p>
+
-
          </div>
+
-
        </li>
+
-
        <li><img src="../../../../迅雷下载/网站/PlusBusiness/images/2.jpg" alt="" />
+
-
          <div class="floater">
+
-
            <h2>Cursus penati saccum ut curabitur nulla.</h2>
+
-
            <p>Temperinte interdum sempus odio urna eget curabitur semper convallis nunc laoreet. Nullain convallis ris elis vest liberos nis diculis feugiat in rutrum. Suspendreristibulumfaucibulum lobortor quis tortortor ris sapien sce enim et volutpat sus. Urnaretiumorci orci fauctor leo justo nulla cras ridiculum&hellip;</p>
+
-
            <p class="readmore"><a href="#">Continue Reading &raquo;</a></p>
+
-
          </div>
+
-
        </li>
+
-
        <li><img src="../../../../迅雷下载/网站/PlusBusiness/images/3.jpg" alt="" />
+
-
          <div class="floater">
+
-
            <h2>Cursus penati saccum ut curabitur nulla.</h2>
+
-
            <p>Temperinte interdum sempus odio urna eget curabitur semper convallis nunc laoreet. Nullain convallis ris elis vest liberos nis diculis feugiat in rutrum. Suspendreristibulumfaucibulum lobortor quis tortortor ris sapien sce enim et volutpat sus. Urnaretiumorci orci fauctor leo justo nulla cras ridiculum&hellip;</p>
+
-
            <p class="readmore"><a href="#">Continue Reading &raquo;</a></p>
+
-
          </div>
+
-
        </li>
+
-
      </ul>
+
-
    </div>
+
-
    <a href="javascript:void(0);" id="featured-item-prev"><img src="../../../../迅雷下载/网站/PlusBusiness/images/prev.png" alt="" /></a> <a href="javascript:void(0);" id="featured-item-next"><img src="../../../../迅雷下载/网站/PlusBusiness/images/next.png" alt="" /></a> </div>
+
</div>
</div>
-
<!-- ####################################################################################################### -->
+
<script type="text/javascript">
-
<div class="wrapper col3">
+
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
-
  <div id="container">
+
tabdropdown.init("colortab", 3)
-
    <div class="homepage">
+
</script>
-
      <ul>
+
-
        <li>
+
-
          <h2><img src="../../../../迅雷下载/网站/PlusBusiness/images/4.jpg" alt="" />Nullamlacus dui ipsum conseque loborttis</h2>
+
-
          <p>Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna. Urnaultrices quis curabitur phasellentesque congue magnis vestibulum quismodo nulla et feugiat. Adipisciniapellentum leo ut consequam ris felit elit id nibh sociis malesuada.</p>
+
-
          <p class="readmore"><a href="#">Continue Reading &raquo;</a></p>
+
-
        </li>
+
-
        <li>
+
-
          <h2><img src="../../../../迅雷下载/网站/PlusBusiness/images/5.jpg" alt="" />Nullamlacus dui ipsum conseque loborttis</h2>
+
-
          <p>Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna. Urnaultrices quis curabitur phasellentesque congue magnis vestibulum quismodo nulla et feugiat. Adipisciniapellentum leo ut consequam ris felit elit id nibh sociis malesuada.</p>
+
-
          <p class="readmore"><a href="#">Continue Reading &raquo;</a></p>
+
-
        </li>
+
-
        <li class="last">
+
-
          <h2><img src="../../../../迅雷下载/网站/PlusBusiness/images/6.jpg" alt="" />Nullamlacus dui ipsum conseque loborttis</h2>
+
-
          <p>Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna. Urnaultrices quis curabitur phasellentesque congue magnis vestibulum quismodo nulla et feugiat. Adipisciniapellentum leo ut consequam ris felit elit id nibh sociis malesuada.</p>
+
-
          <p class="readmore"><a href="#">Continue Reading &raquo;</a></p>
+
-
        </li>
+
-
      </ul>
+
-
      <br class="clear" />
+
-
    </div>
+
-
  </div>
+
-
</div>
+
-
<!-- ####################################################################################################### -->
+
-
<div class="wrapper col4">
+
-
  <div id="footer">
+
-
    <div class="box1">
+
-
      <h2>A Little Company Information !</h2>
+
-
      <img class="imgl" src="../../../../迅雷下载/网站/PlusBusiness/images/demo/imgl.gif" alt="" />
+
-
      <p>Morbitincidunt maurisque eros molest nunc anteget sed vel lacus mus semper. Anterdumnullam interdum eros dui urna consequam ac nisl nullam ligula vestassa. Condimentumfelis et amet tellent quisquet a leo lacus nec augue</p>
+
-
      <p>Portortornec condimenterdum eget consectetuer condis.</p>
+
-
    </div>
+
-
    <div class="box contactdetails">
+
-
      <h2>Our Contact Details !</h2>
+
-
      <ul>
+
-
        <li>Company Name</li>
+
-
        <li>Street Name &amp; Number</li>
+
-
        <li>Town</li>
+
-
        <li>Postcode/Zip</li>
+
-
        <li>Tel: xxxxx xxxxxxxxxx</li>
+
-
        <li>Fax: xxxxx xxxxxxxxxx</li>
+
-
        <li>Email: info@domain.com</li>
+
-
        <li class="last">LinkedIn: <a href="#">Company Profile</a></li>
+
-
      </ul>
+
-
    </div>
+
-
    <div class="box flickrbox">
+
-
      <h2>Latest Flickr Images !</h2>
+
-
      <div class="wrap">
+
-
        <div class="fix"></div>
+
-
        <div class="flickr_badge_image" id="flickr_badge_image1"><a href="#"><img src="../../../../迅雷下载/网站/PlusBusiness/images/demo/80x80.gif" alt="" /></a></div>
+
-
        <div class="flickr_badge_image" id="flickr_badge_image2"><a href="#"><img src="../../../../迅雷下载/网站/PlusBusiness/images/demo/80x80.gif" alt="" /></a></div>
+
-
        <div class="flickr_badge_image" id="flickr_badge_image3"><a href="#"><img src="../../../../迅雷下载/网站/PlusBusiness/images/demo/80x80.gif" alt="" /></a></div>
+
-
        <div class="flickr_badge_image" id="flickr_badge_image4"><a href="#"><img src="../../../../迅雷下载/网站/PlusBusiness/images/demo/80x80.gif" alt="" /></a></div>
+
-
        <div class="flickr_badge_image" id="flickr_badge_image5"><a href="#"><img src="../../../../迅雷下载/网站/PlusBusiness/images/demo/80x80.gif" alt="" /></a></div>
+
-
        <div class="flickr_badge_image" id="flickr_badge_image6"><a href="#"><img src="../../../../迅雷下载/网站/PlusBusiness/images/demo/80x80.gif" alt="" /></a></div>
+
-
        <div class="fix"></div>
+
-
      </div>
+
-
    </div>
+
-
    <br class="clear" />
+
-
  </div>
+
-
</div>
+
-
<!-- ####################################################################################################### -->
+
-
<div class="wrapper col5">
+
-
  <div id="copyright">
+
-
    <p class="fl_left">Copyright &copy; 2011 - All Rights Reserved - <a href="#">Domain Name</a></p>
+
-
    <p class="fl_right">Template from <a href="http://www.mycodes.net/" title="源码之家">网站模板</a></p>
+
-
    <br class="clear" />
+
-
  </div>
+
-
</div>
+
-
</body>
+
</html>
</html>
 +
 +
<br>
 +
<br>

Revision as of 12:03, 4 June 2014

Beijing HDFLS iGEM 2013