Difference between revisions of "Template:Team:William and Mary/HEADER3"

Line 1: Line 1:
−
<!----Source: Syndey Australia iGEM 2016---->
+
<!------Adapted from "https://red-team-design.com/css3-animated-dropdown-menu/"------->
−
 
+
−
 
+
  
 
<html>
 
<html>
  
−
<head>
+
<style>
  
−
+
#menu, #menu ul {
−
 
+
     margin: 0;
−
  <!-- External scripts -->
+
     padding: 0;
−
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600'
+
     list-style: none;
−
rel='stylesheet' type='text/css'>
+
−
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
+
−
  <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,700' rel='stylesheet' type='text/css'>
+
−
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+
−
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+
−
 
+
−
  <!-- Functionallity and behaviour JS -->
+
−
  <script>
+
−
 
+
−
    $(document).ready(function(){
+
−
 
+
−
      //Loading screen functionallity
+
−
      $('.loading').animate(
+
−
          {opacity:0},
+
−
          500,
+
−
          function(){
+
−
            $('.loading').attr("style", "display:none");
+
−
          }
+
−
      );
+
−
 
+
−
      //Height responsiveness
+
−
      $(window).resize(function() {
+
−
          wheight = $(window).height();
+
−
          $('.container').attr("style","height:"+(wheight)+"px;background-size:cover;");
+
−
          $('.team-member-container').attr("style","height:"+wheight/2.7+"px;");
+
−
      });
+
−
 
+
−
      $(window).trigger('resize');
+
−
 
+
−
      //Menu moveto container on item click functionallity
+
−
      $('.menu-item').on('click', function(){
+
−
          $('.menu-item').removeClass('subselected');
+
−
          $(this).addClass('subselected');
+
−
          if($(this).attr("data")=="#top"){
+
−
              $('html, body').animate({
+
−
                  scrollTop: 0
+
−
              }, 1000);
+
−
          }else{
+
−
              $('html, body').animate({
+
−
                  scrollTop: $($(this).attr("data")).offset().top-70
+
−
              }, 1000);
+
−
          }
+
−
      });
+
−
 
+
−
      //Hover of team members
+
−
      $('.team-member-container').on('mouseenter', function(){
+
−
        $(this).children('.team-member-photo').attr("style", "background-image:url('"+$(this).attr("hover")+"');");
+
−
        $(this).on('mouseleave', function(){
+
−
          $(this).children('.team-member-photo').attr('style', "background-image:url('"+$(this).attr("data")+"');");
+
−
        });
+
−
      });
+
−
 
+
−
     });
+
−
   
+
−
  </script>
+
−
 
+
−
  <style>
+
−
 
+
−
 
+
−
#sideMenu, #top_title {display:none;}
+
−
#content { padding:0px; width:90%; margin-top:-7px; margin-left:5%;, margin-right: 5%}
+
−
body {background-color:white; }
+
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
−
 
+
−
 
+
−
     body,
+
−
    html{
+
−
      margin: 0;
+
−
      padding:0;
+
−
      font-family: font-family: 'Yanone Kaffeesatz', sans-serif;
+
−
     }
+
−
 
+
−
    /* REMOVE UNWANTED ELEMENTS AND STYLE OTHERS */
+
−
    .firstHeading{
+
−
      display:none;
+
−
    }
+
−
    #top-section{
+
−
      background:#48af5d;
+
−
      margin-left:0 !important;
+
−
      width:100%;
+
−
      left:0;
+
−
    }
+
−
 
+
−
 
+
−
    /* LOADING SCREEN */
+
−
    .loading{
+
−
      position:fixed;
+
−
      width:100%;
+
−
      height:100%;
+
−
      top:0;
+
−
      left:0;
+
−
 
+
−
      z-index:5;
+
−
 
+
−
      background-color:#555;
+
−
      color:#fff;
+
−
      text-align: center;
+
−
    }
+
−
    .loading p{
+
−
      position: relative;
+
−
      width:100%;
+
−
      height:10%;
+
−
      top:45%;
+
−
      left:0;
+
−
    }
+
−
 
+
−
    /* MENU STYLING */
+
−
    .menu{
+
−
      position:fixed;
+
−
      width:100%;
+
−
      height:56px;
+
−
      top:14px;
+
−
      background-color: #47a3da;
+
−
 
+
−
      z-index:4;
+
−
 
+
−
      border-collapse: collapse;
+
−
      text-align:center;
+
−
    }
+
−
    .menu tr td{
+
−
      text-align: center;
+
−
      vertical-align: middle;
+
−
 
+
−
      font-weight: 700;
+
−
      font-size:16px;
+
−
      color:#fff;
+
−
      width:7%;
+
−
    }
+
−
    .menu tr td.menu-item:hover{
+
−
      background-color:#258ecd;
+
−
      cursor: pointer;
+
−
    }
+
−
    .subselected{
+
−
      background-color: #258ecd;
+
−
    }
+
−
 
+
−
    /* CONTAINERS STYLING */
+
−
    .container{
+
−
      position:relative;
+
−
      width:100%;
+
−
      top:50px;
+
−
    }
+
−
    .container .subcontainer{
+
−
      position:absolute;
+
−
      width:95%;
+
−
      height:90%;
+
−
      top:5%;
+
−
      left:2.5%;
+
−
    }
+
−
    #top{
+
−
      background-size: cover;
+
−
   
+
−
      overflow:hidden;
+
−
    }
+
−
 
+
−
    /* TEAM MEMBERS CARDS STYLING */
+
−
    .team-member-container{
+
−
      position:relative;
+
−
      width:14%;
+
−
      margin-left:2.28%;
+
−
 
+
−
      float:left;
+
−
    }
+
−
    .team-member-container:hover{
+
−
      cursor:pointer;
+
−
    }
+
−
    .row2{
+
−
      top:4%;
+
−
    }
+
−
    .team-member-container .team-member-photo{
+
−
      position:relative;
+
−
      width:100%;
+
−
      height:85%;
+
−
      top:0;
+
−
      left:0;
+
−
      background-size: cover;
+
−
    }
+
−
    .team-member-container .team-member-footer{
+
−
      position:relative;
+
−
      width:100%;
+
−
      height:15%;
+
−
      top:0;
+
−
      left:0;
+
−
 
+
−
      border:none;
+
−
      border-collapse: collapse;
+
−
      background-color: #47a3da;
+
−
      color:#fff;
+
−
 
+
−
      text-align: center;
+
−
      vertical-align: middle;
+
−
    }
+
−
 
+
−
body {
+
−
    padding-top: 110px;  
+
 
}
 
}
  
−
.center-block {
+
#menu {
−
  display: block;
+
    width: 960px;
−
  margin-left: auto;
+
    margin: 60px auto;
−
  margin-right: auto;
+
    border: 1px solid #222;
 +
    background-color: #111;
 +
    background-image: linear-gradient(#444, #111);
 +
    border-radius: 6px;
 +
    box-shadow: 0 1px 1px #777;
 
}
 
}
  
−
 
+
#menu:before,
−
.navbar-fixed-top {
+
#menu:after {
−
background: #fff;
+
    content: "";
−
filter: none !important;
+
    display: table;
−
box-shadow: 0 2px 15px rgba(0,0,0,0.25);
+
−
-moz-box-shadow: 0 2px 15px rgba(0,0,0,0.25);
+
−
-webkit-box-shadow: 0 2px 15px rgba(0,0,0,0.25);
+
−
        border-bottom: 1px solid rgba(0,0,0,0.2);
+
−
 
+
 
}
 
}
  
−
 
+
#menu:after {
−
.dropdown-submenu {
+
     clear: both;
−
     position: relative;
+
 
}
 
}
  
−
.dropdown-submenu>.dropdown-menu {
+
#menu {
−
     top: 0;
+
     zoom:1;
−
    left: 100%;
+
−
    margin-top: -6px;
+
−
    margin-left: -1px;
+
−
    -webkit-border-radius: 0 6px 6px 6px;
+
−
    -moz-border-radius: 0 6px 6px;
+
−
    border-radius: 0 6px 6px 6px;
+
 
}
 
}
  
−
.dropdown-submenu:hover>.dropdown-menu {
+
#menu li {
−
     display: block;
+
    float: left;
 +
    border-right: 1px solid #222;
 +
    box-shadow: 1px 0 0 #444;
 +
     position: relative;
 
}
 
}
  
−
.dropdown-submenu>a:after {
+
#menu a {
−
    display: block;
+
     float: left;
−
    content: " ";
+
     padding: 12px 30px;
−
     float: right;
+
     color: #999;
−
     width: 0;
+
     text-transform: uppercase;
−
     height: 0;
+
     font: bold 12px Arial, Helvetica;
−
     border-color: transparent;
+
     text-decoration: none;
−
     border-style: solid;
+
     text-shadow: 0 1px 0 #000;
−
     border-width: 5px 0 5px 5px;
+
−
     border-left-color: #ccc;
+
−
    margin-top: 5px;
+
−
    margin-right: -10px;
+
 
}
 
}
  
−
.dropdown-submenu:hover>a:after {
+
#menu li:hover > a {
−
     border-left-color: #fff;
+
     color: #fafafa;
 
}
 
}
  
−
.dropdown-submenu.pull-left {
+
*html #menu li a:hover { /* IE6 only */
−
     float: none;
+
     color: #fafafa;
 
}
 
}
  
−
.dropdown-submenu.pull-left>.dropdown-menu {
+
#menu ul {
−
     left: -100%;
+
     margin: 20px 0 0 0;
−
     margin-left: 10px;
+
    _margin: 0; /*IE6 only*/
−
     -webkit-border-radius: 6px 0 6px 6px;
+
    opacity: 0;
−
     -moz-border-radius: 6px 0 6px 6px;
+
    visibility: hidden;
−
     border-radius: 6px 0 6px 6px;
+
    position: absolute;
−
 
+
    top: 38px;
−
 
+
     left: 0;
−
 
+
     z-index: 1;  
−
.faceBot{
+
     background: #444; 
−
  background: #202020;
+
    background: linear-gradient(#444, #111);
 +
    box-shadow: 0 -1px 0 rgba(255,255,255,.3);
 +
     border-radius: 3px;
 +
    transition: all .2s ease-in-out;
 
}
 
}
  
−
@font-face {
+
#menu li:hover > ul {
−
  font-family: 'Open Sans', Arial;;
+
    opacity: 1;
−
}
+
    visibility: visible;
−
 
+
     margin: 0;
−
body
+
−
{
+
−
     font-family: 'Open Sans', Arial;
+
 
}
 
}
  
−
ul.nav a{
+
#menu ul ul {
−
  color: gray;
+
    top: 0;
−
  background-color: transparent;
+
    left: 150px;
−
  height: 100%;
+
    margin: 0 0 0 20px;
−
  position: relative;
+
    _margin: 0; /*IE6 only*/
 +
    box-shadow: -1px 0 0 rgba(255,255,255,.3);    
 
}
 
}
  
−
ul.nav a:hover{
+
#menu ul li {
−
  color: gray;
+
    float: none;
−
  background-color: transparent;
+
    display: block;
−
  height: 100%;
+
    border: 0;
−
  position: relative;
+
    _line-height: 0; /*IE6 only*/
 +
    box-shadow: 0 1px 0 #111, 0 2px 0 #666;
 
}
 
}
  
−
h2 {
+
#menu ul li:last-child {  
−
  color:green;
+
    box-shadow: none;  
 
}
 
}
  
−
h4 {
+
#menu ul a {  
−
     font-weight: bold;
+
     padding: 10px;
 +
    width: 130px;
 +
    _height: 10px; /*IE6 only*/
 +
    display: block;
 +
    white-space: nowrap;
 +
    float: none;
 +
    text-transform: none;
 
}
 
}
  
−
.menu-item{
+
#menu ul a:hover {
−
  height: 75px;
+
    background-color: #0186ba;
 +
    background-image: linear-gradient(#04acec, #0186ba);
 
}
 
}
  
−
li.menu-item{
+
#menu ul li:first-child > a {
−
  background: transparent !important;
+
    border-radius: 3px 3px 0 0;
 
}
 
}
  
−
 
+
#menu ul li:first-child > a:after {
−
 
+
    content: '';
−
.green-effect{
+
    position: absolute;
−
  display: none;
+
    left: 40px;
−
  background-color: #4AAF51;
+
    top: -6px;
−
  opacity: 1;
+
    border-left: 6px solid transparent;
−
  color: #FFF;
+
    border-right: 6px solid transparent;
−
  transition-property: all;
+
    border-bottom: 6px solid #444;
−
  transition-duration: 0.3s;
+
−
  transition-timing-function: ease-out;
+
−
  transition-delay: 0s;
+
−
  border-color: #288D30;
+
−
  position: absolute;
+
−
  bottom: 0px;
+
−
  width: 100%;
+
−
  height: 2px;
+
−
  right: 0px;
+
 
}
 
}
  
−
.logo {
+
#menu ul ul li:first-child a:after {
−
margin-top: 100px;
+
    left: -6px;
−
 
+
    top: 50%;
 +
    margin-top: -6px;
 +
    border-left: 0;
 +
    border-bottom: 6px solid transparent;
 +
    border-top: 6px solid transparent;
 +
    border-right: 6px solid #3b3b3b;
 
}
 
}
  
−
a:hover .green-effect{
+
#menu ul li:first-child a:hover:after {
−
  display: inherit;
+
    border-bottom-color: #04acec;  
 
}
 
}
  
−
.invertir:hover {
+
#menu ul ul li:first-child a:hover:after {
−
  -webkit-filter: invert(100%);
+
    border-right-color: #0299d3;  
 +
    border-bottom-color: transparent; 
 
}
 
}
  
−
dropdown-toggle {
+
#menu ul li:last-child > a {
−
width: 10%;
+
    border-radius: 0 0 3px 3px;
−
 
+
−
 
+
−
 
+
 
}
 
}
  
Line 361: Line 158:
  
  
−
</head>
+
<ul id="menu">
 +
    <li><a href="#">Home</a></li>
 +
    <li>
 +
        <a href="#">Categories</a>
 +
        <ul>
 +
            <li><a href="#">CSS</a></li>
 +
            <li><a href="#">Graphic design</a></li>
 +
            <li><a href="#">Development tools</a></li>
 +
            <li><a href="#">Web design</a></li>
 +
        </ul>
 +
    </li>
 +
    <li><a href="#">Work</a></li>
 +
    <li><a href="#">About</a></li>
 +
    <li><a href="#">Contact</a></li>
 +
</ul>
  
−
<body>
+
</html>
−
 
+
−
 
+
−
<div class="navbar navbar-fixed-top" style="margin-top:15px">
+
−
  <nav class="navbar-inner">
+
−
 
+
−
  <div class="row-sm-height">
+
−
 
+
−
  <div class="col-sm-2"><a href="https://2016.igem.org/Team:Sydney_Australia"><img class="logo" src="https://static.igem.org/mediawiki/2016/8/81/T--Sydney_Australia--Peek_Banner.png" height="60"  width="auto" ></a></div>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
+
−
 
+
−
  <div class="col-md-10" >
+
−
      <ul class="nav navbar-nav" style="margin-top:10px">
+
−
    <li>
+
−
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+
−
 
+
−
                Team<b class="caret"></b>           
+
−
</a>
+
−
                    <ul class="dropdown-menu multi-level">
+
−
                        <li><a href="https://2016.igem.org/Team:Sydney_Australia/Team">About Us </a></li>
+
−
                        <li><a href="https://2016.igem.org/Team:Sydney_Australia/Attributions">Attributions </a></li>
+
−
                   
+
−
                    </ul>
+
−
                </li>
+
−
 
+
−
 
+
−
 
+
−
<li>
+
−
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Project <b class="caret"></b></a>
+
−
                    <ul class="dropdown-menu multi-level"  >
+
−
+
−
<li><a href="https://2016.igem.org/Team:Sydney_Australia/ProjectHome">Project- Home</a></li>
+
−
<li class="divider"></li>
+
−
              <li><a href="https://2016.igem.org/Team:Sydney_Australia/Safety">Safety</a></li>
+
−
                        <li><a href="https://2016.igem.org/Team:Sydney_Australia/Sense">Sense</a></li>
+
−
                        <li><a href="https://2016.igem.org/Team:Sydney_Australia/Express">Express</a></li>
+
−
             
+
−
                 
+
−
                        <li class="dropdown-submenu">
+
−
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Keep Fresh</a>
+
−
                            <ul class="dropdown-menu">
+
−
                                <li><a href="https://2016.igem.org/Team:Sydney_Australia/Design">Applied Design</a></li>
+
−
                             
+
−
                                <li><a href="https://2016.igem.org/Team:Sydney_Australia/Entrepreneurship">Business Plan</a></li>
+
−
                            </ul>
+
−
                        </li>
+
−
 
+
−
                          <li><a href="https://2016.igem.org/Team:Sydney_Australia/Notebook">Notebook</a></li>
+
−
                        <li><a href="https://2016.igem.org/Team:Sydney_Australia/Interlab">Interlab</a></li>
+
−
<li><a href=" https://2016.igem.org/Team:Sydney_Australia/Protocols">Protocols</a></li>
+
−
                    </ul>
+
−
 
+
−
 
+
−
                </li>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
     
+
−
 
+
−
 
+
−
        <li>
+
−
    <a href="https://2016.igem.org/Team:Sydney_Australia/Human_Practices" class="dropdown-toggle" data-toggle="dropdown">
+
−
 
+
−
                Human Practices<b class="caret"></b>           
+
−
</a>
+
−
                    <ul class="dropdown-menu multi-level">
+
−
<li><a href="https://2016.igem.org/Team:Sydney_Australia/Human_Practices">Human Practices - Summary</a></li>
+
−
<li class="divider"></li>
+
−
                        <li><a href="https://2016.igem.org/Team:Sydney_Australia/Integrated_Practices">Integrated Human Practices</a></li>
+
−
                        <li><a href="https://2016.igem.org/Team:Sydney_Australia/Engagement">Outreach</a></li>
+
−
<li><a href="https://2016.igem.org/Team:Sydney_Australia/TOK">Theory of Knowledge</a></li>
+
−
                     
+
−
                    </ul>
+
−
                </li>
+
−
 
+
−
 
+
−
        <li class="menu-item">
+
−
          <a href="https://2016.igem.org/Team:Sydney_Australia/Collaboration">
+
−
            <span>Collaboration</span>
+
−
            <span class="green-effect"></span>
+
−
          </a>
+
−
</li>
+
−
 
+
−
   
+
−
 
+
−
+
−
 
+
−
                <li>
+
−
             
+
−
 
+
−
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+
−
 
+
−
                Modelling <b class="caret"></b>           
+
−
</a>
+
−
                    <ul class="dropdown-menu multi-level">
+
−
                          <li><a href="https://2016.igem.org/Team:Sydney_Australia/Model">Modelling - Home</a></li>
+
−
<li class="divider"></li>
+
−
                        <li><a href="https://2016.igem.org/Team:Sydney_Australia/ProteinModel1">Protein Modelling <br> Etnr1</a></li>
+
−
                        <li><a href="https://2016.igem.org/Team:Sydney_Australia/ProteinModel2">Protein Modelling <br> Etnr2</a></li>
+
−
                        <li><a href="https://2016.igem.org/Team:Sydney_Australia/InternalCellular">Internal Cellular Model</a></li>
+
−
                       
+
−
                        <li><a href="https://2016.igem.org/Team:Sydney_Australia/MacroscopicDiffusion">Macroscopic Diffusion Model</a></li>
+
−
                     
+
−
                     
+
−
                    </ul>
+
−
                </li>
+
−
 
+
−
      <li>
+
−
 
+
−
  <li>
+
−
             
+
−
 
+
−
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+
−
 
+
−
                Software <b class="caret"></b>           
+
−
</a>
+
−
                    <ul class="dropdown-menu multi-level">
+
−
                      <li><a href="https://2016.igem.org/Team:Sydney_Australia/Software">Software - Home</a></li>
+
−
<li class="divider"></li>
+
−
                        <li><a href="https://2016.igem.org/Team:Sydney_Australia/Primers">Primer Design App</a></li>
+
−
                        <li><a href="https://2016.igem.org/Team:Sydney_Australia/SmartPhone">SmartPhone App </a></li>
+
−
                     
+
−
                     
+
−
                     
+
−
                    </ul>
+
−
                </li>
+
−
 
+
−
  <li>
+
−
    <a href="https://2016.igem.org/Team:Sydney_Australia/Achievements" class="dropdown-toggle" data-toggle="dropdown">
+
−
 
+
−
                Achievements<b class="caret"></b>           
+
−
</a>
+
−
                    <ul class="dropdown-menu multi-level">
+
−
                        <li><a href="https://2016.igem.org/Team:Sydney_Australia/Parts"> Parts</a></li>
+
−
                        <li><a href="https://2016.igem.org/Team:Sydney_Australia/Medals">Medals</a></li>
+
−
 
+
−
                   
+
−
                    </ul>
+
−
                </li>
+
−
 
+
−
 
+
−
 
+
−
      </ul>
+
−
</div>
+
−
  </nav>
+
−
</div>
+
−
 
+
−
 
+
−
<html>
+

Revision as of 19:49, 1 August 2017