Difference between revisions of "Template:China Tongji Head"

 
(57 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
 
 
<head>
 
<head>
−
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
−
 
 
<style type="text/css">
 
<style type="text/css">
−
 
+
#globalWrapper{
−
body {
+
padding:0px;
 +
}
 +
#content{
 
     width:100%;
 
     width:100%;
−
margin: 0px;
+
padding:0px;
 +
border:none;
 
background-color: #F0F0F0;
 
background-color: #F0F0F0;
 +
}
 +
.firstHeading{
 +
display:none;
 +
}
 +
#bodyContent{
 +
padding:0px;
 
}
 
}
  
Line 20: Line 26:
 
background:url(https://static.igem.org/mediawiki/2015/8/8c/Team_China_Tongji-transparent-nav.png);
 
background:url(https://static.igem.org/mediawiki/2015/8/8c/Team_China_Tongji-transparent-nav.png);
 
border-bottom: thin solid #CCC;
 
border-bottom: thin solid #CCC;
−
z-index:1000;
+
z-index:10000;
 
}
 
}
 
.head:hover{
 
.head:hover{
 
background: #FFF;
 
background: #FFF;
 
}
 
}
−
 
 
#navLogoLeft{
 
#navLogoLeft{
 
float:left;
 
float:left;
 
margin-left:15px;
 
margin-left:15px;
 
margin-right:20px;
 
margin-right:20px;
−
 
+
padding:2px 0px 4px 0px;
 
}
 
}
 
#navLogoLeft img{
 
#navLogoLeft img{
−
border:0px;
+
border: 0px;
 +
height: 54px;
 +
width: auto;
 
}
 
}
 
#navLogoRight{
 
#navLogoRight{
 
float:right;
 
float:right;
 
margin-right:10px;
 
margin-right:10px;
−
padding:5px;
+
padding:2px;
 
}
 
}
 
#navLogoRight img{
 
#navLogoRight img{
 
border:0px;
 
border:0px;
 +
height:56px;
 +
width: auto;
 
}
 
}
−
 
 
.nav {
 
.nav {
 
float:left;
 
float:left;
 
}
 
}
−
.navFirstTitle{
+
.navOne{
−
line-height: 60px;
+
float: left;
 +
padding-top:4px;
 +
}
 +
.navOne a{
 +
color: #333;
 +
}
 +
.navOneA{
 +
line-height: 52px;
 
text-decoration: none;
 
text-decoration: none;
 
padding: 10px 12px;
 
padding: 10px 12px;
Line 55: Line 70:
 
font-size: 14px;
 
font-size: 14px;
 
}
 
}
−
.navFirstTitle:hover{
+
.navOneA img{
−
background-color:#CCC;
+
border:0px;
 
}
 
}
−
 
+
.navOne:hover{
−
 
+
background:#CCC;
−
 
+
border-bottom: 4px solid #CCC;
−
.bigName{
+
cursor:pointer;
−
width:100%;
+
−
height:300px;
+
−
background:#FF8000;
+
−
background-repeat:repeat-x;
+
−
z-index:2;
+
−
margin-top:78px;
+
 
}
 
}
−
.bigName h1{
+
.navOne:hover a{
−
z-index: 3;
+
text-decoration: none;
−
color: #FFF;
+
−
text-align: left;
+
−
padding-left:100px;
+
−
line-height: 300px;
+
−
font-size: 90px;
+
−
font-family: Verdana, Geneva, sans-serif;
+
−
font-weight: bolder;
+
−
text-transform: uppercase;
+
 
}
 
}
−
.content{
+
.navOne:hover .navDrop{
−
width:1000px;
+
display:block;
−
margin:0px auto;
+
−
min-height:300px;
+
−
padding:0px;
+
−
background-color: #F0F0F0;
+
 
}
 
}
−
 
+
.navDrop{
−
 
+
display:none;
−
.foot{
+
padding-bottom:5px;
−
width:100%;
+
margin-top:-10px;
−
height:100px;
+
−
background-color:#404040;
+
 
}
 
}
−
.navFoot{
+
.navTwo{
−
margin-top:0px;
+
list-style-type: none;
−
padding-top:20px;
+
padding: 5px 10px;
 +
max-width:130px;
 
}
 
}
−
.navFoot a{
+
.navTwo:hover{
−
text-transform: uppercase;
+
background:#999;
 +
cursor:pointer;
 +
}
 +
.navTwo a{
 
text-decoration: none;
 
text-decoration: none;
−
padding: 10px;
+
font-family: Georgia, "Times New Roman", Times, serif;
−
color: #D2D2D2;
+
font-size: 14px;
−
font-family: Georgia, "Times New Roman", Times, serif;
+
display:block;
−
font-size:12px;
+
width:100%;
−
}
+
−
.navFoot a:hover{
+
−
text-decoration:underline;
+
−
}
+
−
.copyright{
+
−
color: #8C8C8C;
+
−
font-family: Georgia, "Times New Roman", Times, serif;
+
−
font-size: 11px;
+
 
}
 
}
 +
 
</style>
 
</style>
−
 
−
<script>
 
−
 
−
</script>
 
−
 
 
</head>
 
</head>
  
 
<body>
 
<body>
−
 
 
<!--head start-->
 
<!--head start-->
 
<div class="head">
 
<div class="head">
 
<div id="navLogoLeft">
 
<div id="navLogoLeft">
−
         <a href="https://igem.org/Team.cgi?year=2015&amp;team_name=China_Tongji">
+
         <a href="https://igem.org/Team.cgi?year=2015&amp;team_name=China_Tongji" target="_blank">
−
         <img src="https://static.igem.org/mediawiki/2015/9/9b/China_Tongji_team-logo-60px.png"/>
+
         <img id="teamLogo" src="https://static.igem.org/mediawiki/2015/5/57/China_Tongji_team-logo-300px.png"/>
 
         </a>
 
         </a>
 
     </div>
 
     </div>
−
    <div class="nav">
 
−
    <tr>
 
−
            <td><a class="navFirstTitle" id="Home" href="https://2015.igem.org/Team:China_Tongji">Home</a></td>
 
−
            <td><a class="navFirstTitle" id="Project" href="https://2015.igem.org/Team:China_Tongji/Project">Project</a>
 
−
            </td>
 
−
            <td><a class="navFirstTitle" id="Notebook" href="https://2015.igem.org/Team:China_Tongji/Notebook">Notebook</a></td>
 
−
            <td><a class="navFirstTitle" id="Achivement" href="https://2015.igem.org/Team:China_Tongji/Achivement">Achivement</a>
 
−
            </td>
 
−
            <td><a class="navFirstTitle" id="Team" href="https://2015.igem.org/Team:China_Tongji/Team">Team</a></td>
 
−
            <td><a class="navFirstTitle" id="Outreach" href="https://2015.igem.org/Team:China_Tongji/Outreach">Outreach</a></td>
 
−
            <td><a class="navFirstTitle" id="Safety" href="https://2015.igem.org/Team:China_Tongji/Safety">Safety</a></td>
 
−
      </tr>
 
−
    </div> 
 
 
     <div id="navLogoRight">
 
     <div id="navLogoRight">
−
         <a href="https://2015.igem.org/Main_Page">
+
         <a href="https://2015.igem.org/Main_Page" target="_blank">
−
             <img src="https://static.igem.org/mediawiki/2015/4/47/China_Tongji-logo-right.png" alt="China_Tongji"/>
+
             <img id="igemLogo"  src="https://static.igem.org/mediawiki/2015/2/20/China_Tongji_iGEM_logo.png" alt="China_Tongji"/>
 
         </a>
 
         </a>
−
     </div>  
+
     </div>  
 +
    <div class="nav">
 +
        <div class="navOne" id="divHome"><a class="navOneA" id="Home" href="https://2015.igem.org/Team:China_Tongji">Home</a></div>
 +
        <div class="navOne" id="divProject"><a class="navOneA" id="Project" href="https://2015.igem.org/Team:China_Tongji/Project">Project <img src="https://static.igem.org/mediawiki/2015/0/07/China_Tongji_2015_dropdown_arrow.png"></a>
 +
            <div class="navDrop">
 +
                    <li class="navTwo" id="navOverview"><a href="https://2015.igem.org/Team:China_Tongji/Project?locationId=Overview">Overview</a></li>
 +
                    <li class="navTwo" id="navBackground"><a href="https://2015.igem.org/Team:China_Tongji/Project?locationId=Background">Background</a></li>
 +
                    <li class="navTwo" id="navDesign"><a href="https://2015.igem.org/Team:China_Tongji/Project?locationId=ProjectDesign">Project Design</a></li>
 +
                    <li class="navTwo" id="navProtocol"><a href="https://2015.igem.org/Team:China_Tongji/Project?locationId=Protocol">Protocol</a></li>
 +
                    <li class="navTwo" id="navSummaryResult"><a href="https://2015.igem.org/Team:China_Tongji/Project?locationId=SummaryResult">Summary and Result</a></li>
 +
                    <li class="navTwo" id="navDesign"><a href="https://2015.igem.org/Team:China_Tongji/Project?locationId=Design">Design</a></li>
 +
                    <li class="navTwo" id="navCharacterize"><a href="https://2015.igem.org/Team:China_Tongji/Project?locationId=Characterize">Characterize an existing part</a></li>
 +
            </div>
 +
        </div>
 +
        <div class="navOne" id="divNotebook"><a class="navOneA" id="Notebook" href="https://2015.igem.org/Team:China_Tongji/Notebook">Notebook <img src="https://static.igem.org/mediawiki/2015/0/07/China_Tongji_2015_dropdown_arrow.png"></a>
 +
            <div class="navDrop">
 +
                <li class="navTwo" id="navRecord"><a href="https://2015.igem.org/Team:China_Tongji/Notebook?locationId=Record">Record</a></li>
 +
                <li class="navTwo" id="navTimeline"><a href="https://2015.igem.org/Team:China_Tongji/Notebook?locationId=Timeline">Timeline</a></li>
 +
            </div>
 +
        </div>
 +
        <div class="navOne" id="divAchivement"><a class="navOneA" id="Achivement" href="https://2015.igem.org/Team:China_Tongji/Achivement">Achivement <img src="https://static.igem.org/mediawiki/2015/0/07/China_Tongji_2015_dropdown_arrow.png"></a>
 +
            <div class="navDrop">
 +
                    <li class="navTwo" id="navParts"><a href="https://2015.igem.org/Team:China_Tongji/Achivement?locationId=Parts">Parts</a></li>
 +
                    <li class="navTwo" id="navEquipment"><a href="https://2015.igem.org/Team:China_Tongji/Achivement?locationId=Equipment">Equipment</a></li>
 +
                    <li class="navTwo" id="navModeling"><a href="https://2015.igem.org/Team:China_Tongji/Achivement?locationId=Modeling">Modeling</a></li>
 +
                    <li class="navTwo" id="navSelfJudgement"><a href="https://2015.igem.org/Team:China_Tongji/Achivement?locationId=SelfJudgement">Self Judgement</a></li>
 +
                    <li class="navTwo" id="navJudgingForm"><a href="https://igem.org/2015_Judging_Form?id=1634" target="_blank">Judging Form</a></li>
 +
            </div>
 +
        </div>
 +
        <div class="navOne" id="divTeam"><a class="navOneA" id="Team" href="https://2015.igem.org/Team:China_Tongji/Team">Team <img src="https://static.igem.org/mediawiki/2015/0/07/China_Tongji_2015_dropdown_arrow.png"></a>
 +
            <div class="navDrop">
 +
                <li class="navTwo" id="navMembers"><a href="https://2015.igem.org/Team:China_Tongji/Team?locationId=Members">Members</a></li>
 +
                <li class="navTwo" id="navAdvisor"><a href="https://2015.igem.org/Team:China_Tongji/Team?locationId=Advisor">Advisor</a></li>
 +
                <li class="navTwo" id="navInstructor"><a href="https://2015.igem.org/Team:China_Tongji/Team?locationId=Instructor">Instructor</a></li>
 +
                <li class="navTwo" id="navAttributions"><a href="https://2015.igem.org/Team:China_Tongji/Team?locationId=Attributions">Attributions</a></li>
 +
                <li class="navTwo" id="navSponsor"><a href="https://2015.igem.org/Team:China_Tongji/Team?locationId=Sponsor">Sponsor</a></li>
 +
                <li class="navTwo" id="navContact"><a href="https://2015.igem.org/Team:China_Tongji/Team?locationId=Contact">Contact</a></li>
 +
            </div>
 +
        </div>
 +
        <div class="navOne" id="divOutreach"><a class="navOneA" id="Outreach" href="https://2015.igem.org/Team:China_Tongji/Outreach">Outreach <img src="https://static.igem.org/mediawiki/2015/0/07/China_Tongji_2015_dropdown_arrow.png"></a>
 +
            <div class="navDrop">
 +
                <li class="navTwo" id="navHumanPractice"><a href="https://2015.igem.org/Team:China_Tongji/Outreach?locationId=HumanPractice">Human Practice</a></li>
 +
                <li class="navTwo" id="navCollaboration"><a href="https://2015.igem.org/Team:China_Tongji/Outreach?locationId=Collaboration">Collaboration</a></li>
 +
                <li class="navTwo" id="navQuestionare"><a href="https://2015.igem.org/Team:China_Tongji/Outreach?locationId=Questionare">Questionare</a></li>
 +
            </div>
 +
        </div>
 +
        <div class="navOne" id="divSafety"><a class="navOneA" id="Safety" href="https://2015.igem.org/Team:China_Tongji/Safety">Safety</a></div>
 +
    </div>   
 
</div>
 
</div>
  
−
<!--content start-->
+
<!-- --------------- script code --------------- -->  
−
<div class="bigName">
+
<script type="text/javascript">
−
<h1 align="left">Project</h1>
+
jQuery(document).ready(function($){
−
</div>
+
//单击导航栏后跳转到指定面
 +
$('#divHome').click(function(){ location.href="https://2015.igem.org/Team:China_Tongji"; });
 +
$('#divProject').click(function(){ location.href="https://2015.igem.org/Team:China_Tongji/Project"; });
 +
$('#divNotebook').click(function(){ location.href="https://2015.igem.org/Team:China_Tongji/Notebook"; });
 +
$('#divAchivement').click(function(){ location.href="https://2015.igem.org/Team:China_Tongji/Achivement"; });
 +
$('#divTeam').click(function(){ location.href="https://2015.igem.org/Team:China_Tongji/Team"; });
 +
$('#divOutreach').click(function(){ location.href="https://2015.igem.org/Team:China_Tongji/Outreach"; });
 +
$('#divSafety').click(function(){ location.href="https://2015.igem.org/Team:China_Tongji/Safety"; });
  
−
<div class="content">
+
//当前位置指示
−
<p>首先是上面的菜单，最好可以像复旦这样可以随着滑动页面也跟着改动（复旦有一点问题是他们挡住了最上面的edit栏，都给移到了右边的Igem  bar里面，这次应该不可以，第二个HZAU连接里面留住了edit 栏，可以参考这个），然后这一栏像他们一样可以点击的稍微大一点，醒目一点~ 然后我们也想要能在菜单左边有一块位置放我们的logo,<img width="61" height="61" src="Tongji2015Index_clip_image002.png" /><img width="54" height="66" src="Tongji2015Index_clip_image004.png" />这个刚刚画好，还没有最后定稿，大概是这风格，所以整体色调和色卡选择最好可以和Logo匹配~。就是各个大标题和大背景色可不可以是那种淡淡的暖黄色~。</p>
+
var keyWord = location.href.substring(38);
−
<p>其次我们想要像HZAU一样主页最上面是一个那种图栏，有几张图片（一张线虫一张合影等）可以切换。</p>
+
if( (keyWord.match("Project") != null) || (keyWord.match("Design") != null) ){
−
<p>最后就是复旦他们每点进去一个主题，左边会有一栏竖着的分主题list, 会随着网页看到哪里而改变显示的位置，（像上面图片上那样）这个我们比较想要加入到我们的那些分页面里~不知道可不可以实现？</p>
+
document.getElementById("divProject").style.borderBottom = "4px solid #6D2E1A";
−
<p>&nbsp;</p>
+
}else if(keyWord.match("Notebook") != null){
−
<p>中间内容测试内容！</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>中间内容测试内容！</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
+
document.getElementById("divNotebook").style.borderBottom = "4px solid #6D2E1A";
−
<p>中间内容测试内容！</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
+
}else if( (keyWord.match("Achivement") != null) || (keyWord.match("Modeling") != null) ){
−
</div>
+
document.getElementById("divAchivement").style.borderBottom = "4px solid #6D2E1A";
−
 
+
}else if( (keyWord.match("Team") != null) || (keyWord.match("Attributions") != null) ){
−
 
+
document.getElementById("divTeam").style.borderBottom = "4px solid #6D2E1A";
−
<!--foot start-->
+
}else if( (keyWord.match("Outreach") != null) || (keyWord.match("Practices") != null) || (keyWord.match("Collaborations") != null) ){
−
<div class="foot">
+
document.getElementById("divOutreach").style.borderBottom = "4px solid #6D2E1A";
−
    <div class="navFoot" align="center">
+
}else if(keyWord.match("Safety") != null){
−
    <tr align="center">
+
document.getElementById("divSafety").style.borderBottom = "4px solid #6D2E1A";
−
            <td><a href="https://2015.igem.org/Team:China_Tongji">Home</a></td><td>|</td>
+
}else{
−
            <td><a href="https://2015.igem.org/Team:China_Tongji/Project">Project</a></td><td>|</td>
+
document.getElementById("divHome").style.borderBottom = "4px solid #6D2E1A";
−
            <td><a href="https://2015.igem.org/Team:China_Tongji/Notebook">Notebook</a></td><td>|</td>
+
−
            <td><a href="https://2015.igem.org/Team:China_Tongji/Achivement">Achivement</a></td><td>|</td>
+
−
            <td><a href="https://2015.igem.org/Team:China_Tongji/Team">Team</a></td><td>|</td>
+
−
            <td><a href="https://2015.igem.org/Team:China_Tongji/Outreach">Outreach</a></td><td>|</td>
+
−
            <td><a href="https://2015.igem.org/Team:China_Tongji/Safety">Safety</a></td><td></td>
+
−
      </tr>
+
−
    </div>   
+
−
    <div class="copyright"><center><p>Copyright © China_Tongji iGEM 2015 | Developer: LiJunWu </p></center></div>
+
−
</div>
+
−
 
+
−
<!--当前页面指示-->
+
−
<script defer="defer">
+
−
var keyWord = location.href.substring(39);
+
−
switch (keyWord)
+
−
{
+
−
  case "ome":
+
−
document.getElementById("Home").style.color = "#F0F";
+
−
break;
+
−
  case "Project":
+
−
document.getElementById("Project").style.color = "#F0F";
+
−
break;
+
−
  case "Notebook":
+
−
document.getElementById("Notebook").style.color = "#F0F";
+
−
break;
+
−
  case "Achivement":
+
−
document.getElementById("Achivement").style.color = "#F0F";
+
−
break;
+
−
  case "Team":
+
−
document.getElementById("Team").style.color = "#F0F";
+
−
break;
+
−
  case "Outreach":
+
−
document.getElementById("Outreach").style.color = "#F0F";
+
−
break;
+
−
  case "Safety":
+
−
document.getElementById("Safety").style.color = "#F0F";
+
−
break;
+
 
}
 
}
 +
});
 
</script>
 
</script>
 
</body>
 
</body>
−
 
 
</html>
 
</html>

Latest revision as of 20:50, 17 September 2015