Difference between revisions of "Template:Wageningen UR/header"

 
(73 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
<html lang="en">
 
<html lang="en">
 +
<style> .tooltip {
 +
    position: relative;
 +
    display: inline-block;
 +
    border-bottom: 1px dotted black;
 +
}
 +
 +
.tooltip .tooltiptext {
 +
    visibility: hidden;
 +
    width: 300px;
 +
    background-color: black;
 +
    color: #fff;
 +
    text-align: center;
 +
    border-radius: 6px;
 +
    padding: 5px 0;
 +
    font-size: 0.75em;
 +
   
 +
    /* Position the tooltip */
 +
    position: absolute;
 +
    z-index: 1;
 +
    bottom: 100%;
 +
    left: 50%;
 +
    margin-left: -75px;
 +
}
 +
 +
.tooltip:hover .tooltiptext {
 +
    visibility: visible;
 +
}
 +
</style>
 
<head>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Line 27: Line 55:
 
         <![endif]-->   
 
         <![endif]-->   
  
−
       
+
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
−
        <script type="text/javascript" src="https://2014.igem.org/Team:Wageningen_UR/js/wur.js?action=raw&ctype=text/javascript"></script>
+
 
−
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  
+
−
        <script type="text/javascript" src="https://2014.igem.org/Team:Wageningen_UR/js/jquery.scrollto.js?action=raw&ctype=text/javascript"></script>
+
−
<script type="text/javascript" src="https://2014.igem.org/Team:Wageningen_UR/js/colorbox.js?action=raw&ctype=text/javascript"></script>
+
−
<script type="text/javascript" src="https://2014.igem.org/Team:Wageningen_UR/js/timeliner.min.js?action=raw&ctype=text/javascript"></script>
+
 
         <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
 
         <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
 +
  
 
<script>
 
<script>
Line 45: Line 70:
 
  });
 
  });
 
});
 
});
−
</script>
+
 +
function ShowHide(divId)
 +
{
 +
if(document.getElementById(divId).style.display == 'none')
 +
{
 +
document.getElementById(divId).style.display='block';
 +
}
 +
else
 +
{
 +
document.getElementById(divId).style.display = 'none';
 +
}
 +
}
 +
</script>
  
  
 
         </head>
 
         </head>
 
<body>
 
<body>
 +
                        <style>
 +
.hamburger{
 +
  background:#e8ce94;
 +
  position:relative;
 +
  top:0;
 +
  right:0;
 +
  line-height:45px;
 +
  padding:60px 15px 0px 15px;
 +
  color:#black;
 +
  border:0;
 +
  font-size:1.4em;
 +
  font-weight:bold;
 +
  cursor:pointer;
 +
  outline:none;
 +
  z-index:5;
 +
}
 +
.cross{
 +
  background:#e8ce94;
 +
  position:relative;
 +
  top:0px;
 +
  right:0;
 +
  padding:45px 15px 0px 15px;
 +
  color:black;
 +
  border:0;
 +
  font-size:3em;
 +
  line-height:60px;
 +
  font-weight:bold;
 +
  cursor:pointer;
 +
  outline:none;
 +
  z-index:5;
 +
}
 +
.mobilemenu{z-index:4; font-weight:bold; font-size:0.8em; width:20%; background:#e8ce94;  position:absolute; text-align:center;}
 +
.mobilemenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
 +
.mobilemenu li {display: block;  padding:15px 0 15px 0; border-bottom:black 1px solid;}
 +
.mobilemenu li:hover{display: block;    background:#181818; padding:15px 0 15px 0; border-bottom:black 1px solid;}
 +
.mobilemenu ul li a { text-decoration:none;  margin: 0px; color:#fff;}
 +
.mobilemenu ul li a:hover {  color: #6d5d31; text-decoration:none;}
 +
.mobilemenu a{text-decoration:none; color:black;}
 +
.mobilemenu a:hover{text-decoration:none; color:white;}
 +
</style>
 +
 +
<style>
 +
@media only screen and (min-width: 900px) {
 +
  .mobilemenu{
 +
    display: none;
 +
  }
 +
  .hamburger{
 +
    display: none;
 +
  }
 +
 +
</style>
 
<div id="wrapper">
 
<div id="wrapper">
 
<!--<div id="header">
 
<!--<div id="header">
Line 55: Line 143:
 
</div>  -->
 
</div>  -->
 
<div id="innerwrap">   
 
<div id="innerwrap">   
−
 
 
<div id="left">
 
<div id="left">
 +
<button class="hamburger">&#9776;</button>
 +
<button class="cross">&#735;</button>
 +
                        <div class="mobilemenu">
 +
                        <ul>
 +
                        <a href="https://2016.igem.org/Team:Wageningen_UR"><li><b>Overview</b></li></a>
 +
                        <a href="https://2016.igem.org/Team:Wageningen_UR/Description"><li>Description</li></a>
 +
                        <a href="https://2016.igem.org/Team:Wageningen_UR/Results"><li>Results</li></a>
 +
                        <a href="https://2016.igem.org/Team:Wageningen_UR/Achievements"><li>Achievements</li></a>
 +
                        <a href="https://2016.igem.org/Team:Wageningen_UR/Parts"><li>BioBricks</li></a>
 +
                        <a href="https://2016.igem.org/Team:Wageningen_UR/Description/Specificity"><li>Specificity</li></a>
 +
                        <a href="https://2016.igem.org/Team:Wageningen_UR/Description/Regulation"><li>Regulation</li></a>
 +
                        <a href="https://2016.igem.org/Team:Wageningen_UR/Description/Biocontainment"><li>Biocontainment</li></a>
 +
                        <a href="https://2016.igem.org/Team:Wageningen_UR/Model"><li>Model</li></a>
 +
                        <a href="https://2016.igem.org/Team:Wageningen_UR/HP/Gold"><li>Outreach</li></a>
 +
                        <a href="https://2016.igem.org/Team:Wageningen_UR/team/members"><li>Team</li></a>
 +
                        <a href="https://2016.igem.org/Team:Wageningen_UR/Notebook"><li>Notebook</li></a>
 +
                        </ul><script type="text/javascript">
 +
$( ".cross" ).hide();
 +
$( ".mobilemenu" ).hide();
 +
$( ".hamburger" ).click(function() {
 +
$( ".mobilemenu" ).slideToggle( "slow", function() {
 +
$( ".hamburger" ).hide();
 +
$( ".cross" ).show();
 +
});
 +
});
 +
 +
$( ".cross" ).click(function() {
 +
$( ".mobilemenu" ).slideToggle( "slow", function() {
 +
$( ".cross" ).hide();
 +
$( ".hamburger" ).show();
 +
});
 +
});
 +
</script>
 +
 +
</div>
 
<p>&nbsp;</p>
 
<p>&nbsp;</p>
 
<div id="inner-left">
 
<div id="inner-left">

Latest revision as of 14:38, 19 October 2016

Wageningen UR iGEM 2016