Difference between revisions of "Team:Dundee Schools/Team"

Line 6: Line 6:
  
 
#sideMenu, #top_title {display:none;}
 
#sideMenu, #top_title {display:none;}
−
#content { padding:0px; width:1350px; margin-top:28px; margin-left:-20px;background-color:#bcc8dd;position:absolute;}
+
#content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}
 +
body {background-color:#bcc8dd; }
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
  
 +
/********************************* MENU ********************************/
 +
/* Wrapper for the menu */
 +
.menu_wrapper {
 +
width:150px;
 +
height:100vh;
 +
position:fixed;
 +
padding:0px;
 +
float:left;
 +
background-color:#a8bce1;
 +
text-align:left;
 +
}
  
−
body {  
+
/* styling for the menu items */
−
    background-color:#bcc8dd;
+
.menu_item {
−
    list-style-type:none;
+
width:100%;  
−
    width:100%;
+
margin:-2px 0px 0px -20px;  
−
    height:auto;
+
padding: 10px 10px;
−
    list-style:none;
+
border-bottom: 1px solid white;  
−
    overflow-x:hidden;
+
font-weight:bold;
−
    overflow-y:scroll;
+
color:white;  
−
    padding:0;
+
cursor: pointer;  
−
    margin:0;
+
}
−
    font-family:Helvetica, Arial, sans-serif;
+
−
    position:absolute;
+
−
}
+
  
 +
/* when hovering on a menu item */
 +
.menu_item:hover {
 +
color:#000000;
 +
background-color: #c4d1e9;
 +
}
  
−
/***Nav bar***/
+
/* decoration icon for the menu buttons*/
−
.ul {
+
.icon {
−
    list-style-type:none;
+
float:right;
−
    list-style:none;
+
font-size:16px;  
−
    margin:20px 0px 0px -20px;
+
font-weight:bold;  
−
    top:12px;
+
}
−
    width:100%;
+
−
    height:auto;
+
/* this is the icon for when the content is collapsed */
−
    padding:0;
+
.plus::before {
−
    overflow: hidden;
+
content: "+";  
−
    background-color:#a8bce1;
+
}
−
    position:fixed;
+
/* this is the icon for when the content is expanded */
−
    z-index:20;
+
.less::before {
−
}
+
content: "–";  
 +
}
  
−
li {
+
/* styling for the ul that creates the buttons */
−
    float:left;
+
ul.menu_items {
−
}
+
width:100%;
 +
margin-left:0px;
 +
padding:0px;
 +
list-style: none;  
 +
}
  
−
li .a, .dropbtn {
+
/* styling for the li that are the menu items */
−
    display: inline-block;
+
.menu_items li {  
−
    color: white;
+
width:90%;
−
    text-align: center;
+
margin-top:-2px;
−
    padding: 14px 14px;
+
padding: 15px 0px 15px 15px ;
−
    text-decoration: none;
+
display:block;
−
}
+
border-bottom: 1px solid #d3d3d3;
 +
text-align:left;  
 +
font-weight:bold;
 +
text-decoration:none;  
 +
color:white;
 +
list-style-type:none;
 +
cursor:pointer;
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease; transition: all 0.4s ease; 
 +
}
  
−
li .a:hover, .dropdown:hover .dropbtn {
+
.menu_item a {
−
    background-color:#c4d1e9;
+
width: 100%;
−
    color:black;
+
margin-left: -20px;
−
}
+
padding: 11px 90px 12px 20px;
 +
text-decoration: none;
 +
color:white;
 +
}
  
−
li.dropdown {
+
/* When hovering on a menu item */
−
    display: inline-block;
+
.menu_items li:hover {  
−
    z-index:20;
+
background-color:#a8bce1;
−
}
+
color: #000000;
 +
}
  
−
.dropdown-content {
+
/* styling for the submenus */
−
    display: none;
+
.submenu {
−
    position: absolute;
+
width:100%;  
−
    background-color: #c4d1e9;
+
display: none;
−
    position:fixed;
+
font-weight:bold;
−
    z-index:20;
+
cursor:pointer;  
  
−
}
+
}
  
−
.dropdown-content .a {
+
/* moving the margin for the submenu ul list */
−
    color: white;
+
ul.submenu {  
−
    padding: 12px 12px;
+
width: 100%;
−
    border-bottom:1px solid #a8bce1;
+
margin: 10px 0px -11px 0px;
−
    text-decoration: none;
+
list-style: none;
−
    display: block;
+
}
−
    text-align: left;
+
−
}
+
  
−
.dropdown-content .a:hover {background-color:#a8bce1;color:black;}
+
/*styling for the submenu buttons */
 +
.submenu li {  
 +
width: 100%;
 +
margin-left: 10px;
 +
margin-bottom: 0px;
 +
}
  
−
.dropdown:hover .dropdown-content {
 
−
    display: block;
 
−
}
 
  
 +
/* hover state for the submenu buttons */
 +
.submenu li a {
 +
width: 100%;
 +
padding: 5px 10px;
 +
display: inline-block;
 +
border-bottom: 1px solid white;
 +
background-color:#c1cfe8;
 +
text-decoration:none;
 +
color:white;
 +
}
  
−
/**Layout**/
 
  
−
h1, h2, h3, h4, h5, h6 {
 
−
  color:white;
 
−
  margin-left:40px;
 
−
  margin-bottom:2px;
 
−
  padding:0px;
 
−
  display:block;
 
−
  z-index:2;
 
−
}
 
  
−
img {
+
.submenu li a:hover  {
−
  height:auto;
+
background-color:#a3b6d7;  
−
  width:auto;
+
color:black;
−
  margin-left:20px;
+
}
−
  display:inline-block;
+
−
  z-index:1;
+
−
}
+
  
−
#header {
 
−
  width:100vw;
 
−
  height:auto;
 
−
}
 
  
−
p {
+
/* When the screen is smaller than 680px, the menu has the option to hide/show - this button controls that */
−
  color:white;
+
.collapsable_menu_control {  
−
  width:45%;
+
width:100%;  
−
  font-size:18px;
+
padding: 15px 0px;
−
  margin:0px 0px 10px 40px;
+
display:none;  
−
  display:inline-block;
+
background-color:#000000;
−
  z-index:2;
+
text-align:center;
−
}
+
font-weight:bold;  
−
 
+
color:#72c9b6;
−
a {
+
cursor:pointer;  
−
  color:#7db3d8;
+
-webkit-transition: all 0.4s ease;
−
  text-decoration:none;
+
-moz-transition: all 0.4s ease;  
−
}
+
-ms-transition: all 0.4s ease;  
−
 
+
-o-transition: all 0.4s ease;
−
a:hover {
+
transition: all 0.4s ease;  
−
  color:white;
+
}
−
  text-weight:bold;
+
−
  text-decoration:none;
+
−
}
+
  
 
/* when hovering on that button */
 
/* when hovering on that button */
Line 136: Line 162:
 
}
 
}
  
 +
/********************************* CONTENT OF THE PAGE ********************************/
  
 +
/* Wrapper for the content */
 +
.content_wrapper {
 +
width: 85%;
 +
margin-left:150px;
 +
padding:10px 0px;
 +
float:left;
 +
background-color:white;
 +
}
  
 +
/*LAYOUT */
 +
.column  {
 +
padding: 10px 0px;
 +
float:left;
 +
background-color:white;
 +
}
  
 +
.full_size {
 +
width:100%;
 +
}
 +
 +
.full_size img {
 +
padding: 10px 15px;
 +
width:96.5%;
 +
}
 +
 +
.half_size {
 +
width: 50%;
 +
}
 +
.half_size img {
 +
padding: 10px 15px;
 +
width: 93%;
 +
}
 +
 +
 +
.clear {
 +
clear:both;
 +
}
 +
 +
.highlight {
 +
width: 90%;
 +
margin: auto;
 +
padding: 15px 5px;
 +
background-color: #f2f2f2;
 +
}
 +
 +
 +
/*STYLING */
 +
 +
/* styling for the titles */
 +
.content_wrapper h1, .content_wrapper h2 {
 +
padding:5px 15px;
 +
border-bottom:0px;
 +
color:#72c9b6;
 +
 +
}
 +
.content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {
 +
padding:5px 15px;
 +
border-bottom:0px;
 +
color: #000000; 
 +
}
 +
 +
 +
/* font and text */
 +
.content_wrapper p {
 +
padding:0px 15px;
 +
font-size: 13px;
 +
font-family:Tahoma, Geneva, sans-serif;
 +
}
 +
 +
/* Links */
 +
.content_wrapper a {
 +
font-weight: bold;
 +
text-decoration: underline;
 +
text-decoration-color:#72c9b6;
 +
color: #72c9b6;
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease;
 +
transition: all 0.4s ease;
 +
}
 +
 +
/* hover for the links */
 +
.content_wrapper a:hover {
 +
text-decoration:none;
 +
color:#000000;
 +
}
 +
 +
/* non numbered lists */
 +
.content_wrapper ul {
 +
padding:0px 20px;
 +
font-size: 13px;
 +
font-family:Tahoma, Geneva, sans-serif;
 +
}
 +
 +
/* numbered lists */
 +
.content_wrapper ol {
 +
padding:0px;
 +
font-size: 13px;
 +
font-family:Tahoma, Geneva, sans-serif;
 +
}
 +
 +
/* Table */
 +
.content_wrapper table {
 +
width: 97%;
 +
margin:15px 10px;
 +
border: 1px solid #d3d3d3;
 +
border-collapse: collapse;
 +
}
 +
 +
/* table cells */
 +
.content_wrapper  td {
 +
padding: 10px;
 +
vertical-align: text-top;
 +
border: 1px solid #d3d3d3;
 +
border-collapse: collapse;
 +
}
 +
 +
/* table headers */
 +
.content_wrapper th {
 +
padding: 10px;
 +
vertical-align: text-top;
 +
border: 1px solid #d3d3d3;
 +
border-collapse: collapse;
 +
background-color:#f2f2f2;
 +
}
 +
 +
/* Button class */
 +
.button_click {
 +
margin: 10px auto;
 +
padding: 15px; width:12%; 
 +
text-align:center;
 +
font-weight:bold;
 +
background-color: #72c9b6;
 +
cursor:pointer; 
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease;
 +
transition: all 0.4s ease;
 +
}
 +
 +
/* button class on hover */
 +
.button_click:hover { 
 +
background-color:#000000;
 +
color:#72c9b6;
 +
}
  
 
/********************************* RESPONSIVE STYLING ********************************/
 
/********************************* RESPONSIVE STYLING ********************************/
Line 145: Line 317:
  
 
@media only screen and (max-width: 1000px) {
 
@media only screen and (max-width: 1000px) {
−
            li .a, .dropbtn {
+
 
−
              padding: 14px 5px;
+
#content {width:100%; }
−
            }
+
.menu_wrapper {width:15%;}
−
            .dropdown-content .a {
+
.content_wrapper {margin-left: 15%;}
−
              padding: 14px 8px;
+
.menu_item {display:block;}
−
            }
+
.icon {display:none;}
−
            #content{max-width:1000px}
+
.highlight {padding:10px 0px;}
−
            #header{width:100%}
+
 
}
 
}
  
Line 159: Line 330:
  
 
@media only screen and (max-width: 680px) {
 
@media only screen and (max-width: 680px) {
−
            li .a, .dropbtn {
+
.collapsable_menu_control { display:block;}
−
              padding: 12px 2px;
+
.menu_item {display:none;}
−
            }
+
.menu_wrapper { width:100%; height: 15%; position:relative;}
−
            .dropdown-content .a {
+
.content_wrapper {width:100%; margin-left:0px;}
−
              padding: 12px 4px;
+
.column.half_size {width:100%; }
−
            }
+
.column img { width: 100%; padding: 5px 0px;}
−
            #content{max-width:1000px}
+
.icon {display:block;}
−
            #header{width:100%}
+
.highlight {padding:15px 5px;}
 
}
 
}
  
 
</style>
 
</style>
  
 +
 +
 +
 +
<!--- THIS IS WHERE THE HTML BEGINS --->
 +
 +
 +
<!-- This tells the browser that your page is responsive -->
  
 
<head>  
 
<head>  
 
<meta name="viewport" content="width=device-width, initial-scale=1">  
 
<meta name="viewport" content="width=device-width, initial-scale=1">  
−
        <title>Dundee_Schools 2016:</title>
 
 
</head>
 
</head>
  
  
−
<body>
 
  
−
<!--Nav bar-->
 
−
<ul class="ul">
 
−
  <li><a class="a" href="https://2016.igem.org/Team:Dundee_Schools">HOME</a></li>
 
−
  <li class="dropdown">
 
−
    <a class="a" href="#" class="dropbtn">TEAM</a>
 
−
    <div class="dropdown-content">
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Team">Meet the Agents</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Collaborations">Collaborations</a>
 
−
    </div>
 
−
  </li>
 
−
  <li class="dropdown">
 
−
    <a class="a" href="#" class="dropbtn">PROJECT</a>
 
−
    <div class="dropdown-content">
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Description">Description</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Design">Design</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Proof">Proof of Concept</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Model">Modelling</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Medals">Medals</a>
 
−
    </div>
 
−
  </li>
 
−
  <li class="dropdown">
 
−
    <a class="a" href="#" class="dropbtn">PARTS</a>
 
−
    <div class="dropdown-content">
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Parts">Parts</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Basic_Part">Basic</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Composite_Part">Composite</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Part_Collection">Part Collection</a>
 
−
    </div>
 
−
  </li>
 
−
  <li class="dropdown">
 
−
    <a class="a" href="#" class="dropbtn">LAB WORK</a>
 
−
    <div class="dropdown-content">
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Experiments">Experiments</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Results">Results</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Safety">Safety</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Notebook">Notebook</a>
 
−
    </div>
 
−
  </li>
 
−
  <li class="dropdown">
 
−
    <a class="a" href="#" class="dropbtn" style="list-style:none;">HUMAN PRACTICES</a>
 
−
    <div class="dropdown-content">
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Human_Practices">Human Practices</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/HP/Silver">Silver</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/HP/Gold">Gold</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Integrated_Practices">Integrated practices</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Engagement">Engagement</a>
 
−
    </div>
 
−
  </li>
 
−
  <li><a style="list-style:none;" class="a" href="https://2016.igem.org/Team:Dundee_Schools/Attributions">ATTRIBUTIONS</a></li>
 
−
</ul>
 
  
 +
<div class="menu_wrapper" >
  
−
<!--Content-->
+
 
 +
 
 +
 
 +
<div class="collapsable_menu_control"> MENU ▤ </div>
 +
 
 +
<ul id="accordion" class="accordion">
 +
 
 +
<li class="menu_item"> <a href="https://2016.igem.org/Team:Dundee_Schools">HOME </a> </li>
 +
 
 +
 
 +
<li class="menu_item"> <div class="icon plus"></div> TEAM
 +
<ul class="submenu">
 +
<li> <a href=" https://2016.igem.org/Team:Dundee_Schools/Team"> Meet the Agents  </a> </li>
 +
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Collaborations"> Collaborations </a> </li>
 +
                    </ul>
 +
                </li>
 +
 
 +
<li class="menu_item"> <div class="icon plus"></div> PROJECT 
 +
<ul class="submenu">
 +
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Description">  Description </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Design"> Design </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Experiments"> Experiments </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Proof"> Proof of Concept </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Results"> Results </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Notebook"> Notebook </a></li>
 +
                    </ul>
 +
                </li>
 +
 
 +
<li class="menu_item"> <div class="icon plus"></div> PARTS 
 +
<ul class="submenu">
 +
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Parts">Parts </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Basic_Part"> Basic Parts </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Composite_Part"> Composite Parts </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Part_Collection"> Part Collection </a></li>
 +
                    </ul>
 +
                </li>
 +
 
 +
 
 +
<li class="menu_item"> <a href="https://2016.igem.org/Team:Dundee_Schools/Safety"> SAFETY </a> </li>
 +
 
 +
 
 +
<li class="menu_item"> <a href="https://2016.igem.org/Team:Dundee_Schools/Attributions"> ATTRIBUTIONS </a></li>
 +
 
 +
 
 +
<li class="menu_item"> <div class="icon plus"></div> HUMAN PRACTICES
 +
<ul class="submenu">
 +
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Human_Practices"> Human Practices </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/HP/Silver"> Silver </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/HP/Gold">Gold </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Integrated_Practices"> Integrated Practices </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Engagement"> Engagement </a></li>
 +
                    </ul>
 +
                </li>
 +
 
 +
 
 +
<li class="menu_item"> <div class="icon plus"></div> AWARDS
 +
<ul class="submenu">
 +
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Model">Modelling </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Medals">Medals</a></li>
 +
                    </ul>
 +
                </li>
 +
</ul>
 +
 
 +
</div>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<div class="content_wrapper">
 +
 
 +
 
 +
 
 +
<h1 id="team_name">  </h1>
 +
<h4 id="page_name">  </h4>
  
 
<img src="https://static.igem.org/mediawiki/2016/3/31/T--Dundee_Schools--AC_Albert.png"/>
 
<img src="https://static.igem.org/mediawiki/2016/3/31/T--Dundee_Schools--AC_Albert.png"/>
Line 241: Line 442:
 
<img src="https://static.igem.org/mediawiki/2016/8/8d/T--Dundee_Schools--AC_Darryl.png"/>
 
<img src="https://static.igem.org/mediawiki/2016/8/8d/T--Dundee_Schools--AC_Darryl.png"/>
  
−
 
+
</div>
  
  
Line 255: Line 456:
 
$("#HQ_page").attr('id','');
 
$("#HQ_page").attr('id','');
 
 
 +
 +
if ( wgPageName.substring( 0,  8) == "Template")  {  // if the page is a template it displays the full name in a single line
 +
$("#team_name").html( wgPageName );
 +
}
 +
 +
else if (  ( (wgPageName.match(/\//g) || []).length ) == 0 ) {  // if it is the home page , just print the team's name
 +
$("#team_name").html( wgPageName.substring( 5, wgPageName.length ) );
 +
}
 +
 +
else {
 +
// this adds the team's name as an h1
 +
$("#team_name").html( wgPageName.substring( 5 , wgPageName.indexOf("/")  ) );
 +
 +
// this adds the page's title as an h4
 +
$("#page_name").html (    ( wgPageName.substring( wgPageName.indexOf("/") + 1, wgPageName.length ) ).replace( /\/|_/g , " ")  );
 +
}
 +
 +
 +
 +
 +
$('#accordion').find('.menu_item').click(function(){
 +
 
//Expand or collapse this panel
 
//Expand or collapse this panel
 
submenu = $(this).find('.submenu');
 
submenu = $(this).find('.submenu');
Line 274: Line 497:
  
  
−
+
$(".collapsable_menu_control").click(function() {
 +
$(".menu_item").toggle();
 +
});
  
 
$( window ).resize(function() {
 
$( window ).resize(function() {

Revision as of 01:34, 20 October 2016

MENU ▤