Difference between revisions of "Template:Team:TU Darmstadt/MainMenu"

Line 1: Line 1:
 
<html>
 
<html>
 +
<style>
 +
#slick-menu {
 +
  width: 100%;
 +
  list-style-type: none;
 +
  overflow: hidden;
 +
  text-align: center;
 +
  margin: 0;
 +
  padding: 0;
 +
  background-color: #019ac8; }
 +
 +
#slick-menu > li {
 +
  display: inline-block;
 +
  margin: 0 5px;
 +
  padding: 5px 0; }
 +
 +
#slick-menu > li > a {
 +
  display: block;
 +
  padding: 10px;
 +
  margin: 0;
 +
  color: #fff;
 +
  text-decoration: none;
 +
  font-family: calibri;
 +
}
 +
 +
#slick-menu > li > a:hover, #slick-menu > li > a.current {
 +
  font-weight: 600;
 +
  color: white; }
 +
 +
@media only screen and (max-width: 1250px) {
 +
  #slick-menu {
 +
    padding-top: 60px;
 +
    margin-bottom: 22px;
 +
    float: left;
 +
    text-align: center;
 +
    width: 100%; } }
 +
 +
@media only screen and (max-width: 1250px) {
 +
  #slick-menu > li {
 +
    width: 100%;
 +
    padding: 7px 0;
 +
    margin: 0; } }
 +
 +
.open-nav {
 +
  max-height: 100% !important; }
 +
 +
.open-nav .mobile-toggle {
 +
  transform: rotate(-90deg);
 +
  -webkit-transform: rotate(-90deg); }
 +
 +
.mobile-toggle {
 +
  display: none;
 +
  cursor: pointer;
 +
  font-size: 20px;
 +
  width: 30px;
 +
  z-index: 30;
 +
  transition: all 200ms ease-in; }
 +
 +
@media only screen and (max-width: 1250px) {
 +
  .mobile-toggle {
 +
    display: block; } }
 +
 +
.mobile-toggle span {
 +
  width: 30px;
 +
  height: 4px;
 +
  margin-bottom: 6px;
 +
  border-radius: 1000px;
 +
  background: #c8c8c8;
 +
  display: block; }
 +
 +
.navbar {
 +
  max-height: 50px;
 +
  overflow: hidden;
 +
  background-color: #019ac8;
 +
  -webkit-transition: all 0.3s;
 +
  -moz-transition: all 0.3s;
 +
  -ms-transition: all 0.3s;
 +
  -o-transition: all 0.3s;
 +
  transition: all 0.3s;
 +
}
 +
</style>
 +
 
<div class="navbar">
 
<div class="navbar">
−
   <div class="tablet" style="display: none">
+
   <div class="mobile-toggle">
−
    <div id="menu">
+
       <img src="https://static.igem.org/mediawiki/2016/c/c9/T--TU_Darmstadt--zahnrad.png"
−
       <button id="tabletbutton">
+
      alt="menu" id="tabletbutton_bild"/>
−
        <img src="https://static.igem.org/mediawiki/2016/c/c9/T--TU_Darmstadt--zahnrad.png" alt="menu" id="tabletbutton_bild"></img>
+
−
      </button>
+
−
      <div id="tabletmenu">
+
−
        <ul>
+
−
          <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Achievements">Achievements</a></li>
+
−
          <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Lab">In the Lab</a></li>
+
−
          <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Parts">Parts</a></li>
+
−
          <li ><a href="#">Results</a></li>            
+
−
          <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Hardware">Robotics</a></li>
+
−
  <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Model">Modeling</a></li>
+
−
  <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Human_Practices">Human Practices</a></li>
+
−
  <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Collaborations">Collaborations</a></li>
+
−
  <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Notebook">Notebook</a></li>
+
−
  <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Team">Team</a></li>
+
−
</ul>
+
−
      </div>
+
−
    </div>
+
−
  </div>
+
−
  <div class="computer" id="computer" style="display: none">
+
−
    <ul>
+
−
      <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Achievements">Achievements</a></li>
+
−
      <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Lab">In the Lab</a></li>
+
−
      <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Parts">Parts</a></li>
+
−
      <li ><a href="#">Results</a></li>
+
−
      <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Hardware">Robotics</a></li>
+
−
      <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Model">Modeling</a></li>
+
−
      <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Human_Practices">Human Practices</a></li>
+
−
      <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Collaborations">Collaborations</a></li>
+
−
      <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Notebook">Notebook</a></li>
+
−
      <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Team">Team</a></li>
+
−
    </ul>
+
 
   </div>
 
   </div>
 +
  <ul id="slick-menu">
 +
    <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Achievements">Achievements</a></li>
 +
    <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Lab">In the Lab</a></li>
 +
    <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Parts">Parts</a></li>
 +
    <li ><a href="#">Results</a></li>            
 +
    <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Hardware">Robotics</a></li>
 +
    <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Model">Modeling</a></li>
 +
    <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Human_Practices">Human Practices</a></li>
 +
    <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Collaborations">Collaborations</a></li>
 +
    <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Notebook">Notebook</a></li>
 +
    <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Team">Team</a></li>
 +
  </ul>
 
</div>
 
</div>
  
−
<script type=text/javascript>
+
<script>
 +
$(document).ready(function() {
 +
console.log( "ready!" );
 +
  $('.mobile-toggle').on('click', function(evt) {
 +
    evt.preventDefault();
 +
  console.log('mobile-toggle');
 +
    if ($('.navbar').hasClass('open-nav')) {
 +
        $('.navbar').removeClass('open-nav');
 +
    } else {
 +
        $('.navbar').addClass('open-nav');
 +
    }
 +
});
 +
});
 +
 
 +
$('#.navbar li a').click(function() {
 +
    if ($('#.navbar').hasClass('open-nav')) {
 +
        $('.navigation').removeClass('open-nav');
 +
        $('.navbar').removeClass('open-nav');
 +
    }
 +
});
 +
</script>
 +
 
 +
<script>
 
$(function(){
 
$(function(){
−
   $('.navbar a').each(function() {
+
   $('#slick-menu a').each(function() {
 
     if ($(this).prop('href') == window.location.href) {
 
     if ($(this).prop('href') == window.location.href) {
 
       $(this).addClass('current');
 
       $(this).addClass('current');

Revision as of 14:44, 12 October 2016

menu