Difference between revisions of "Team:Duesseldorf/Test2"

Line 32: Line 32:
 
     overflow: hidden;
 
     overflow: hidden;
 
     background-color: #333;
 
     background-color: #333;
 +
<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;
 +
text-decoration: none;
 +
}
 +
 +
nav li {
 +
    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>
 +
 
}
 
}
  

Revision as of 13:09, 27 September 2016

}

nav li { 

   float: left;

text-decoration: none; }

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>

  • <a href="#home">Home</a>
  • <a href="#news">Project</a>
  • <a href="#" class="dropbtn">Achievements v</a> 
         <a href="#">Results</a>
     <a href="#">Medal Fulfilment</a>
     <a href="#">Parts</a>
  • <a href="#news">Cooperations</a>
  • <a href="#" class="dropbtn">Outreach v</a> 
         <a href="#">Results</a>
     <a href="#">Medal Fulfilment</a>
     <a href="#">Parts</a>
  • <a href="#news">Lab book</a>
  • <a href="#news">Safety</a>
  • <a href="#" class="dropbtn">Team v</a> 
         <a href="#">Results</a>
     <a href="#">Medal Fulfilment</a>
     <a href="#">Parts</a>

</nav> </html>