Difference between revisions of "Template:CSU CHINA"

@@ Line 1: / Line 1: @@
+{{CSU_CHINA/Base}}
+{{CSU_CHINA/PageBase}}
 <html>
+<style>
+#HQ_page div.container{
+  padding-top:55px;
+  padding-left:0;
+  padding-right:0;
+  overflow:hidden;
+}
+#HQ_page {
+    font-size: 18pt;
+    font-family: _ExtraLight;
+}
+#HQ_page ul.navigation-bar{
+  list-style: none;
+  background-color: white;
+  position: fixed;
+  z-index: 3000;
+  width: 100%;
+  top:0;
+  left:0;
+  padding: 5px;
+  padding-bottom: 0;
+  margin: 0;
+  height: 80px;
+  border: 3px solid #050033;
+  box-sizing: border-box;
+}
+#HQ_page ul.navigation-bar > li:first-of-type{
+  margin-left: 25px;
+  margin-right: 70px;
+}
+#HQ_page ul.navigation-bar > li{
+  float: left;
+  position: relative;
+  margin-right: 60px;
+  line-height: 68px;
+}
+#HQ_page ul.navigation-bar a{
+  text-decoration: none;
+  color:black;
+}
+#HQ_page ul.navigation-bar a:hover{
+  text-decoration: underline;
+}
+#HQ_page ul.navigation-bar > li > ul.sub-menu{
+  display: none;
+  list-style: none;
+  padding: 0;
+  position: absolute;
+  left: -60px;
+  top:68px;
+}
+#HQ_page ul.navigation-bar > li > ul.sub-menu > li{
+  padding: 0 30px;
+  background-color: #e1e1e1;
+  font-size: 15pt;
+  line-height: 30pt;
+  margin-bottom: 2px;
+  min-width: 100px;
+}
+#HQ_page ul.navigation-bar > li > ul.sub-menu > li.long{
+  padding: 0 30px;
+  background-color: #e1e1e1;
+  font-size: 15pt;
+  line-height: 30pt;
+  margin-bottom: 2px;
+  min-width: 160px;
+}
+</style>
 <script>
-////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+ $(document).ready(function()
+{
+  let navibar = $('ul.navigation-bar');
-	$(document).ready(function() {
+  let navbuttonItems = $('ul.navigation-bar > li');
+  navbuttonItems.mouseenter(function()
+      {
+       var submenu = $(this).children('ul.sub-menu');
+       submenu.stop(true,false);
+       submenu.slideDown();
+      });
+  navbuttonItems.mouseleave(function()
+      {
+       var submenu = $(this).children('ul.sub-menu');
+       submenu.stop(true,false);
+       submenu.slideUp();
+      });
-		$("#HQ_page").attr('id','');
-		//highlight current page on the menu
+               //highlight current page on the menu
 		highlight_current_page_menu();
 		//accessing submenus
 		$(".menu_item").click(function(){
@@ Line 20: / Line 114: @@
 		$(".igem_2018_team_mobile_bar").click(function(){
 			$(this).next().toggleClass("displaying_menu");
 		});
-	});
-		function highlight_current_page_menu() {
+});
+function highlight_current_page_menu() {
 			var page_url="https://2018.igem.org/";
@@ Line 42: / Line 139: @@
-////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 </script>
@@ Line 75: / Line 175: @@
-/* MENU */
-/**************************************************************************************************************************************************************************************************/
-	/*this wraps the whole of the menu*/
-	.igem_2018_team_menu {
-		background-color:#c4baba;
-		border-left: 1px solid #c4baba;
-		display:block;
-		float:right;  <!-------------------------------->
-		height:100vh;
-		max-width: 270px;
-		overflow-y: auto;
-		overflow-x: hidden;
-		padding:0px;
-		position:fixed;
-		right:0%;
-		text-align:left;
-		width: 15%;
-	}
-	.igem_2018_team_menu.displaying_menu{
-		display:block;
-	}
-	.igem_2018_team_menu  a {
-		color: #484848
-		text-decoration:none;
-	}
-	.igem_2018_team_menu img {
-		width:100%;
-	}
-	.igem_2018_team_menu .menu_item {
-    	background-color: #c4baba;
-    	border-bottom: 1px solid #928b8b;
-    	clear: both;
-		color: #484848;
-    	cursor: pointer;
-		float: left;
-    	font-size: 120%;
-    	font-weight: bold;
-    	padding: 15px 0px 15px 5%;
-   	 	width: 100%;
-	}
-	.igem_2018_team_menu .menu_item.direct_link {
-		color: #484848;
-		padding-left: 15%;
-	}
-	.igem_2018_team_menu .menu_item:hover {
-		background-color: #ecb656;
-	}
-	.igem_2018_team_menu .menu_item .submenu_control_icon {
-		color: #484848;
-		float: left;
-		width: 10%;
-	}
-	/* submenu icon "+"  "-"*/
-	.igem_2018_team_menu .menu_item .submenu_control_icon::before {
-		content: "+";
-	}
-	/* submenu icon "+"  "-"*/
-	.igem_2018_team_menu .menu_item .submenu_control_icon.open::before {
-		content: "-";
-	}
-	/*submenu wrapper*/
-	.igem_2018_team_menu .submenu{
-		background-color: #e4dede;
-		clear:both;
-		display:none;
-		float: left;
-		width:100%;
-	}
-	/*styling for a submenu item*/
-	.igem_2018_team_menu .submenu .submenu_item {
-		border-bottom: 1px solid #c4baba;
-  		color: #635d5d;
-    	height: 30px;
-   	 	float: left;
-    	font-size: 110%;
-		font-weight: bold;
-    	padding: 12px 0px 0px 15%;
-    	width: 100%;
-	}
-	.igem_2018_team_menu .submenu .submenu_item:hover {
-		background-color: #f3bd5d;
-	}
-	.igem_2018_team_menu .submenu .submenu_item.current_page,
-	.igem_2018_team_menu .menu_item.current_page,
-	.igem_2018_team_menu .menu_item.direct_link.current_page {
-		background-color:#7acbd8;
-	}
-/*mobile menu bar styling*/
-/**************************************************************************************************************************************************************************************************/
-	.igem_2018_team_mobile_bar {
-		background-color:#e4dede;
-		border-bottom: 1px solid #c4baba;
-		cursor:pointer;
-		display:none;
-		float:left;
-		margin-top: 0;
-		padding: 5px 0;
-		position:fixed;
-		width:100%;
-	}
-	.igem_logo_mobile img {
-		width:70px;
-	}
-	.igem_logo_mobile {
-		float:left;
-		padding-left: 5%;
-		width: 30%;
-	}
-	.igem_menu_control_mobile img {
-		width:25px;
-	}
-	.igem_menu_control_mobile {
-		float:right;
-		padding-right:5%;
-		padding-top:5px;
-		text-align:right;
-		width: 30%;
-	}
-/**************************************************************************************************************************************************************************************************/
-/* CONTENT OF THE PAGE */
-/**************************************************************************************************************************************************************************************************/
-	/* general wrapper for the content */
-	.igem_2018_team_content {
-		background-color:white;
-		display:block;
-		width: 87%;
-	}
-	/* subwrapper to center content */
-	.igem_2018_team_content .igem_2018_team_column_wrapper {
-		margin:auto;
-		max-width: 1400px;
-		width:90%;
-	}
@@ Line 510: / Line 445: @@
 </style>
@@ Line 520: / Line 456: @@
 	<!-- This tells the browser that your page is responsive -->
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
@@ Line 529: / Line 466: @@
 <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+<!--
@@ Line 545: / Line 482: @@
 </div>
+-->
@@ Line 551: / Line 489: @@
+ <ul class="navigation-bar">
+    <li><img width="90" depth="90" src="https://static.igem.org/mediawiki/2018/thumb/b/b2/T--CSU_CHINA--TeamLogo.png/320px-T--CSU_CHINA--TeamLogo.png" /></li>
+    <li><a href='https://2018.igem.org/Team:CSU_CHINA'>HOME</a></li>
-<div class="igem_2018_team_menu displaying_menu">
+    <li>
+      <a href='https://2018.igem.org/Team:CSU_CHINA/Description'>  Project  </a>
+      <ul class="sub-menu">
+        <li><a href='https://2018.igem.org/Team:CSU_CHINA/Description'>Description</a></li>
+        <li><a href='https://2018.igem.org/Team:CSU_CHINA/Design'>Design</a></li>
+        <li><a href='https://2018.igem.org/Team:CSU_CHINA/Experiments'>Experiments</a></li>
+        <li><a href='https://2018.igem.org/Team:CSU_CHINA/Notebook'>Notebook</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href='https://2018.igem.org/Team:CSU_CHINA/Demonstrate'>  Results  </a>
+      <ul class="sub-menu" >
+        <li class="long"><a href='https://2018.igem.org/Team:CSU_CHINA/Demonstrate'>Demonstrate</a></li>
+        <li class="long"><a href='https://2018.igem.org/Team:CSU_CHINA/Parts'>Parts Overview</a></li>
+        <li class="long"><a href='https://2018.igem.org/Team:CSU_CHINA/Basic_Part'>Basic Part</a></li>
+        <li class="long"><a href='https://2018.igem.org/Team:CSU_CHINA/Composite_Part'>Composite Part</a></li>
+      </ul>
+    </li>
-	<a href="https://2018.igem.org/Team:CSU_CHINA">
+    <li>
-	<img src="https://static.igem.org/mediawiki/2018/thumb/b/b2/T--CSU_CHINA--TeamLogo.png/320px-T--CSU_CHINA--TeamLogo.png">
+      <a href='https://2018.igem.org/Team:CSU_CHINA/InterLab'>  Lab  </a>
-	</a>
+      <ul class="sub-menu">
+        <li><a href='https://2018.igem.org/Team:CSU_CHINA/Safety'>Safety</a></li>
+        <li><a href='https://2018.igem.org/Team:CSU_CHINA/InterLab'>InterLab</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href='https://2018.igem.org/Team:CSU_CHINA/Human_Practices'>  Human Practices  </a>
+      <ul class="sub-menu">
+        <li class="long"><a href='https://2018.igem.org/Team:CSU_CHINA/Human_Practices'>Human Practices</a></li>
+        <li class="long"><a href='https://2018.igem.org/Team:CSU_CHINA/Public_Engagement'>Education & Engagement</a></li>
+        <li class="long"><a href='https://2018.igem.org/Team:CSU_CHINA/Collaborations'>Collaborations</a></li>
+      </ul>
+    </li>
+    <li>
-		<a href="https://2018.igem.org/Team:CSU_CHINA">
+      <a href='https://2018.igem.org/Team:CSU_CHINA/Team'>  Team  </a>
-			<div class="menu_item direct_link">
+      <ul class="sub-menu">
-				HOME
+        <li><a href='https://2018.igem.org/Team:CSU_CHINA/Team'>Team Members</a></li>
-			</div>
+        <li><a href='https://2018.igem.org/Team:CSU_CHINA/Attributions'>Attributions</a></li>
-		</a>
+      </ul>
+    </li>
-		<!-- Team -->
+  </ul>
-		<div class="menu_item">
-			<div class="submenu_control_icon"> </div>
-			TEAM
-		</div>
-		<div class="submenu">
-			<a href="https://2018.igem.org/Team:CSU_CHINA/Team">
-				<div class="submenu_item">
-					Team Members
-				</div>
-			</a>
-			<a href="https://2018.igem.org/Team:CSU_CHINA/Collaborations">
-				<div class="submenu_item">
-					Collaborations
-				</div>
-			</a>
-		</div>
-		<!-- Project -->
-		<div class="menu_item">
-			<div class="submenu_control_icon"> </div>
-			PROJECT
-		</div>
-		<div class="submenu">
-			<a href="https://2018.igem.org/Team:CSU_CHINA/Description">
-				<div class="submenu_item">
-					Description
-				</div>
-			</a>
-			<a href="https://2018.igem.org/Team:CSU_CHINA/Design">
-				<div class="submenu_item">
-					Design
-				</div>
-			</a>
-			<a href="https://2018.igem.org/Team:CSU_CHINA/Experiments">
-				<div class="submenu_item">
-					Experiments
-				</div>
-			</a>
-			<a href="https://2018.igem.org/Team:CSU_CHINA/Notebook">
-				<div class="submenu_item">
-					Notebook
-				</div>
-			</a>
-			<a href="https://2018.igem.org/Team:CSU_CHINA/InterLab">
-				<div class="submenu_item">
-					InterLab
-				</div>
-			</a>
-			<a href="https://2018.igem.org/Team:CSU_CHINA/Model">
-				<div class="submenu_item">
-					Model
-				</div>
-			</a>
-			<a href="https://2018.igem.org/Team:CSU_CHINA/Results">
-				<div class="submenu_item">
-					Results
-				</div>
-			</a>
-			<a href="https://2018.igem.org/Team:CSU_CHINA/Demonstrate">
-				<div class="submenu_item">
-					Demonstrate
-				</div>
-			</a>
-			<a href="https://2018.igem.org/Team:CSU_CHINA/Improve">
-				<div class="submenu_item">
-					Improve
-				</div>
-			</a>
-			<a href="https://2018.igem.org/Team:CSU_CHINA/Attributions">
-				<div class="submenu_item">
-					Attributions
-				</div>
-			</a>
-		</div>
-		<div class="menu_item">
-			<div class="submenu_control_icon"> </div>
-			PARTS
-		</div>
-		<div class="submenu">
-			<a href="https://2018.igem.org/Team:CSU_CHINA/Parts">
-				<div class="submenu_item">
-					Parts Overview
-				</div>
-			</a>
-			<a href="https://2018.igem.org/Team:CSU_CHINA/Basic_Part">
-				<div class="submenu_item">
-					Basic Parts
-				</div>
-			</a>
-			<a href="https://2018.igem.org/Team:CSU_CHINA/Composite_Part">
-				<div class="submenu_item">
-					Composite Parts
-				</div>
-			</a>
-                   <!--
-			<a href="https://2018.igem.org/Team:CSU_CHINA/Part_Collection">
-				<div class="submenu_item">
-					Part Collection
-				</div>
-			</a>
-                   -->
-		</div>
-		<a href="https://2018.igem.org/Team:CSU_CHINA/Safety">
-			<div class="menu_item direct_link">
-				SAFETY
-			</div>
-		</a>
-		<div class="menu_item">
-			<div class="submenu_control_icon"> </div>
-			HUMAN PRACTICES
-		</div>
-		<div class="submenu">
-			<a href="https://2018.igem.org/Team:CSU_CHINA/Human_Practices">
-				<div class="submenu_item">
-					Human Practices
-				</div>
-			</a>
-			<a href="https://2018.igem.org/Team:CSU_CHINA/Public_Engagement">
-				<div class="submenu_item">
-					Education & Engagement
-				</div>
-			</a>
-		</div>
-		<div class="menu_item">
-			<div class="submenu_control_icon"> </div>
-			AWARDS
-		</div>
-		<div class="submenu">
-			<a href="https://2018.igem.org/Team:CSU_CHINA/Applied_Design">
-				<div class="submenu_item">
-					Applied Design
-				</div>
-			</a>
-			<a href="https://2018.igem.org/Team:CSU_CHINA/Entrepreneurship">
-				<div class="submenu_item">
-					Entrepreneurship
-				</div>
-			</a>
-			<a href="https://2018.igem.org/Team:CSU_CHINA/Hardware">
-				<div class="submenu_item">
-					Hardware
-				</div>
-			</a>
-			<a href="https://2018.igem.org/Team:CSU_CHINA/Measurement">
-				<div class="submenu_item">
-					Measurement
-				</div>
-			</a>
-			<a href="https://2018.igem.org/Team:CSU_CHINA/Model">
-				<div class="submenu_item">
-					Model
-				</div>
-			</a>
-			<a href="https://2018.igem.org/Team:CSU_CHINA/Plant">
-				<div class="submenu_item">
-					Plant
-				</div>
-			</a>
-			<a href="https://2018.igem.org/Team:CSU_CHINA/Software">
-				<div class="submenu_item">
-					Software
-				</div>
-			</a>
-		</div>
-		<a href="https://igem.org/2018_Judging_Form?team=CSU_CHINA">
-			<div class="menu_item direct_link">
-				JUDGING FORM ⇗
-			</div>
-		</a>
-</div>
+  <a name="PageTop"></a>
+  <div class='container'>

Latest revision as of 02:04, 18 October 2018

HOME
Project
Results
Lab
- Safety
- InterLab
Human Practices
Team
- Team Members
- Attributions