Difference between revisions of "Template:Austin UTexas"

@@ Line 104: / Line 104: @@
-/****************** MENU SETTINGS *******************/
-<head>
-<style>
+/**************************************************************** MENU ***************************************************************/
-ul {
+	/* Wrapper for the menu */
-    list-style-type: none;
+	.igem_2017_menu_wrapper {
-    margin: 0;
+		width: 15%;
-    padding: 0;
+		height:100vh;
-    overflow: hidden;
+		position:fixed;
-    background-color: #333;
+		right:0%;
-}
+		padding:0px;
+		float:right;
+		border-left: 1px solid #d3d3d3;
+		background-color:#dddddd;
+		text-align:left;
+		font-family:Tahoma, Geneva, sans-serif;
+		overflow-y: auto;
+		overflow-x: hidden;
+	}
-li {
+	/* this hides the scrollbar to keep view consistency */
-    float: left;
+	.igem_2017_menu_wrappe::-webkit-scrollbar {
-}
+		display: none;
+	}
+	/* styling for links in the menu, removes the line under text */
+	.igem_2017_menu_wrapper a {
+		text-decoration: none;
+	}
-li a, .dropbtn {
-    display: inline-block;
-    color: white;
-    text-align: center;
-    padding: 14px 16px;
-    text-decoration: none;
-}
-li a:hover, .dropdown:hover .dropbtn {
+	/* styling for the images in the menu */
-    background-color: red;
+	.igem_2017_menu_wrapper img {
-}
+		width: 100%;
+	}
-li.dropdown {
+	/* styling for the menu buttons */
-    display: inline-block;
+	.igem_2017_menu_wrapper .menu_button {
-}
+		width: 100%;
+		padding: 10px 0px 10px 15px;
+		float:left;
+		border-bottom: 1px solid #d3d3d3;
+		font-size: 12px;
+		font-weight: bold;
+		color: #5e5f5f;
+		cursor: pointer;
+	}
-.dropdown-content {
-    display: none;
-    position: absolute;
-    background-color: #f9f9f9;
-    min-width: 160px;
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-    z-index: 1;
-}
-.dropdown-content a {
+	.igem_2017_menu_wrapper .menu_bottom_padding {
-    color: black;
+		width: 100%;
-    padding: 12px 16px;
+		height: 30px;
-    text-decoration: none;
+		float:left;
-    display: block;
+	}
-    text-align: left;
-}
-.dropdown-content a:hover {background-color: #f1f1f1}
+	.menu_button.direct_to_page {
+		padding-left: 36px;
+	}
-.dropdown:hover .dropdown-content {
-    display: block;
-}
-</style>
-</head>
-<body>
-<ul>
+	.igem_2017_menu_wrapper .menu_button .expand_collapse_icon {
-  <li><a href="https://2017.igem.org/Team:Austin_UTexas">HOME</a></li>
+		width:10%;
-  <li class="dropdown">
+		float:left;
-    <a href="javascript:void(0)" class="dropbtn">TEAM</a>
+	}
-    <div class="dropdown-content">
-      <a href="https://2017.igem.org/Team:Austin_UTexas/Team">Meet the Team!</a>
-      <a href="https://2017.igem.org/Team:Austin_UTexas/Collaborations">Collaborations</a>
-    </div>
-  </li>
-  <li class="dropdown">
-    <a href="javascript:void(0)" class="dropbtn">PROJECT</a>
-    <div class="dropwdown-content">
-      <a href="https://2017.igem.org/Team:Austin_UTexas/Description">Description</a>
-      <a href="https://2017.igem.org/Team:Austin_UTexas/Experiments">Experiments</a>
-      <a href="https://2017.igem.org/Team:Austin_UTexas/Notebook">Notebook</a>
-      <a href="https://2017.igem.org/Team:Austin_UTexas/InterLab">InterLab</a>
-      <a href="https://2017.igem.org/Team:Austin_UTexas/Contribution">Contribution</a>
-      <a href="https://2017.igem.org/Team:Austin_UTexas/Model">Model</a>
-      <a href="https://2017.igem.org/Team:Austin_UTexas/Results">Results</a>
-      <a href="https://2017.igem.org/Team:Austin_UTexas/Demonstrate">Demonstrate</a>
-      <a href="https://2017.igem.org/Team:Austin_UTexas/Improve">Improve</a>
-      <a href="https://2017.igem.org/Team:Austin_UTexas/Attributions">Attributions</a>
-    </div>
-  </li>
-  <li class="dropdown">
-    <a href="javascript:void(0)" class="dropbtn">PARTS</a>
-    <div class="dropwdown-content">
-      <a href="https://2017.igem.org/Team:Austin_UTexas/Parts">Parts</a>
-      <a href="https://2017.igem.org/Team:Austin_UTexas/Basic_Part">Basic Parts</a>
-      <a href="https://2017.igem.org/Team:Austin_UTexas/Composite_Part">Composite Parts</a>
-      <a href="https://2017.igem.org/Team:Austin_UTexas/Part_Collection">Part Collection</a>
-    </div>
-  </li>
-  <li><a href="https://2017.igem.org/Team:Austin_UTexas/Safety">SAFETY</a></li>
-  <li class="dropdown">
-    <a href="javascript:void(0)" class="dropbtn">HUMAN PRACTICES</a>
-    <div class="dropwdown-content">
-      <a href="https://2017.igem.org/Team:Austin_UTexas/HP/Silver">Silver HP</a>
-      <a href="https://2017.igem.org/Team:Austin_UTexas/HP/Gold_Integrated">Integrated and Gold</a>
-    </div>
-  </li>
-</ul>
+	.igem_2017_menu_wrapper .menu_button .expand_collapse_icon::before {
+		content: "+";
-</body>
+	}
+	.open::before {
+		content: "-" !important;
+	}
+	/* styling for the menu buttons on hover */
+	.igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover ,  .submenu_button.current_page:hover {
+		background-color: #3399ff;
+		text-decoration: none;
+		color:#ffffff;
+	}
+	/* styling for the menu button when it is the current page */
+	 .current_page {
+		background-color:#7fc1f7  !important;
+		color:#5e5f5f !important;
+	}
+	/* styling for the submenu buttons */
+	.igem_2017_menu_wrapper .submenu_button {
+		width: 100%;
+		padding: 10px 0px 10px 34px;
+		float:left;
+		background-color:#f2f2f2;
+		border-bottom: 1px solid #d3d3d3;
+		font-size: 12px;
+		color: #5e5f5f;
+		cursor: pointer;
+	}
+	/* wrapper for the submenu items, they are hidden by default*/
+	.igem_2017_menu_wrapper .submenu_wrapper {
+		display:none;
+	}
+	/* when the page size is bigger than 800px, this show/hide control is hidden by default */
+	.igem_2017_menu_wrapper #display_menu_control {
+		display:none;
+		text-align:center;
+	}
 /***************************************************** CONTENT OF THE PAGE ****************************************************/