Difference between revisions of "Team:Duesseldorf/Test2"

Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
 
<link rel="stylesheet" type="text/css"
 
href="https://2016.igem.org/Template:Duesseldorf/CSS?action=raw&ctype=text/css" />
 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=no">
 
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 
<!-- Responsive Nav -->
 
<script>
 
function myFunction() {
 
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
 
}
 
</script>
 
<!-- Img Swap -->
 
<script type="text/javascript">
 
$(document).ready(function() {
 
$('.sg-container').on('click', function() {
 
$(this).toggleClass('active');
 
});
 
});
 
</script>
 
 
 
 
<style>
 
nav ul {
 
    list-style-type: none;
 
    margin: 0;
 
    padding: 0;
 
    overflow: hidden;
 
    background-color: #333;
 
<html>
 
  
 
<head>
 
<head>
Line 66: Line 33:
 
     background-color: #333;
 
     background-color: #333;
 
text-decoration: none;
 
text-decoration: none;
 +
 
}
 
}
  
 
nav li {
 
nav li {
 
     float: left;
 
     float: left;
}
 
 
nav li a, .dropbtn {
 
    display: inline-block;
 
    color: white;
 
    text-align: center;
 
    padding: 14px 16px;
 
    text-decoration: none;
 
}
 
 
nav li a:hover, .dropdown:hover .dropbtn {
 
    background-color: red;
 
}
 
 
nav li.dropdown {
 
    display: inline-block;
 
}
 
 
.dropdown-content {
 
    display: none;
 
    position: absolute;
 
    background-color: #f9f9f9;
 
    min-width: 160px;
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 
}
 
 
.dropdown-content a {
 
    color: black;
 
    padding: 12px 16px;
 
    text-decoration: none;
 
    display: block;
 
    text-align: left;
 
}
 
 
.dropdown-content a:hover {background-color: #f1f1f1}
 
 
.dropdown:hover .dropdown-content {
 
    display: block;
 
}
 
</style>
 
</head>
 
 
 
<nav>
 
<ul>
 
  <li><a href="#home">Home</a></li>
 
  <li><a href="#news">Project</a></li>
 
  <li class="dropdown"><a href="#" class="dropbtn">Achievements v</a>
 
    <div class="dropdown-content">
 
      <a href="#">Results</a>
 
      <a href="#">Medal Fulfilment</a>
 
      <a href="#">Parts</a>
 
    </div>
 
  </li>
 
  <li><a href="#news">Cooperations</a></li>
 
  <li class="dropdown"><a href="#" class="dropbtn">Outreach v</a>
 
    <div class="dropdown-content">
 
      <a href="#">Results</a>
 
      <a href="#">Medal Fulfilment</a>
 
      <a href="#">Parts</a>
 
    </div>
 
  </li>
 
  <li><a href="#news">Lab book</a></li>
 
  <li><a href="#news">Safety</a></li>
 
  <li class="dropdown"><a href="#" class="dropbtn">Team v</a>
 
    <div class="dropdown-content">
 
      <a href="#">Results</a>
 
      <a href="#">Medal Fulfilment</a>
 
      <a href="#">Parts</a>
 
    </div>
 
  </li>
 
</ul>
 
</nav>
 
</html>
 
 
}
 
 
nav li {
 
    float: left;
 
text-decoration: none;
 
 
}
 
}
  

Revision as of 13:09, 27 September 2016