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

 
(55 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
{{{test}}}
+
<style>
−
<div class="navbar">
+
#slick-menu {
−
   <div class="tablet" style="display: none">
+
   width: 100%;
−
    <div id="menu">
+
  list-style-type: none;
−
      <button id="tabletbutton">
+
  overflow: hidden;
−
        <img src="https://static.igem.org/mediawiki/2016/c/c9/T--TU_Darmstadt--zahnrad.png" alt="menu" id="tabletbutton_bild"></img>
+
  text-align: center;
−
      </button>
+
  margin: 0;
−
      <div id="tabletmenu">
+
  padding: 0;
−
        <ul>
+
  background-color: #019ac8; }
−
          <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Achievements">Achievements</a></li>
+
 
−
          <li ><a class="" href="https://2016.igem.org/Team:TU_Darmstadt/Lab">In the Lab</a></li>
+
#slick-menu > li {
−
          <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Parts">Parts</a></li>
+
  display: inline-block;
−
          <li ><a href="">Results</a></li>            
+
  margin: 0 5px;
−
          <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Hardware">Robotics</a></li>
+
  padding: 5px 0; }
−
  <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>
+
#slick-menu > li > a {
−
  <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Collaborations">Collaborations</a></li>
+
  display: block;
−
  <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Notebook">Notebook</a></li>
+
  padding: 10px;
−
  <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Team">Team</a></li>
+
  margin: 0;
−
</ul>
+
  color: #fff;
−
      </div>
+
  text-decoration: none;
−
    </div>
+
  font-family: calibri;
−
   </div>
+
}
−
   <div class="computer" id="computer" style="display: none">
+
 
−
    <ul>
+
#slick-menu > li > a:hover, #slick-menu > li > a.current {
−
      <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Achievements">Achievements</a></li>
+
  font-weight: 600;
−
      <li ><a class="current" href="https://2016.igem.org/Team:TU_Darmstadt/Lab">In the Lab</a></li>
+
  color: white; }
−
      <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Parts">Parts</a></li>
+
 
−
      <li ><a href="">Results</a></li>
+
@media only screen and (max-width: 1250px) {
−
      <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Hardware">Robotics</a></li>
+
  #slick-menu {
−
      <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Model">Modeling</a></li>
+
    padding-top: 20px;
−
       <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Human_Practices">Human Practices</a></li>
+
    margin-bottom: 22px;
−
      <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Collaborations">Collaborations</a></li>
+
    float: left;
−
      <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Notebook">Notebook</a></li>
+
    text-align: left;
−
      <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Team">Team</a></li>
+
    width: 100%; }
−
    </ul>
+
 
 +
  #slick-menu {
 +
    padding-top: 0px; }
 +
}
 +
 
 +
@media only screen and (max-width: 1250px) {
 +
  #slick-menu > li {
 +
    width: 100%;
 +
    padding: 7px 0;
 +
    margin: 0; } }
 +
 
 +
.open-nav {
 +
  max-height: none !important; }
 +
 
 +
.open-nav .mobile-toggle {
 +
  transform-origin: 25x 25px;
 +
  -webkit-transform: rotate(180deg);
 +
  transform: rotate(180deg); }
 +
 
 +
.mobile-toggle {
 +
  display: none;
 +
  float: left;
 +
  cursor: pointer;
 +
  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 ease-in;
 +
  -moz-transition: all 0.3s ease-in;
 +
  -ms-transition: all 0.3s ease-in;
 +
  -o-transition: all 0.3s ease-in;
 +
  transition: all 0.3s ease-in;
 +
}
 +
 
 +
.navbar.landingpage {
 +
  position: fixed;
 +
  top: 16px;
 +
}
 +
 
 +
.mobile-toggle img {
 +
  height: 20px;
 +
  margin: 15px
 +
}
 +
 
 +
.top-fixed {
 +
  position: fixed;
 +
  top: 16px;
 +
}
 +
</style>
 +
 
 +
<div class="navbar </html>{{{extra-class}}}<html>">
 +
  <div class="mobile-toggle">
 +
       <img src="https://static.igem.org/mediawiki/2016/c/c9/T--TU_Darmstadt--zahnrad.png"
 +
      alt="menu" id="menu-zahnrad"/>
 
   </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">Wet Lab</a></li>
 +
    <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Parts">Parts</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/Results">Results</a></li>
 +
    <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Team">Team</a></li>
 +
  </ul>
 
</div>
 
</div>
 +
 +
<script>
 +
$(document).ready(function() {
 +
  $('.mobile-toggle').on('click', function(evt) {
 +
    evt.preventDefault();
 +
    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(){
 +
  $('#slick-menu a').each(function() {
 +
    if ( (window.location.href).indexOf($(this).prop('href')) > -1) {
 +
      $(this).addClass('current');
 +
    }
 +
  });
 +
});
 +
</script>
 +
 +
<script>
 +
$(function(){
 +
  if( window.location.href == 'https://2016.igem.org/Team:TU_Darmstadt') {
 +
    $('navbar').addClass('navbar-landingpage-fixed');
 +
  }
 +
});
 +
</script>
 
</html>
 
</html>

Latest revision as of 16:01, 17 October 2016

menu