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

 
(23 intermediate revisions by 2 users not shown)
Line 30: Line 30:
 
@media only screen and (max-width: 1250px) {
 
@media only screen and (max-width: 1250px) {
 
   #slick-menu {
 
   #slick-menu {
−
     padding-top: 60px;
+
     padding-top: 20px;
 
     margin-bottom: 22px;
 
     margin-bottom: 22px;
 
     float: left;
 
     float: left;
−
     text-align: center;
+
     text-align: left;
−
     width: 100%; } }
+
     width: 100%; }
 +
 
 +
  #slick-menu {
 +
    padding-top: 0px; }
 +
}
  
 
@media only screen and (max-width: 1250px) {
 
@media only screen and (max-width: 1250px) {
Line 43: Line 47:
  
 
.open-nav {
 
.open-nav {
−
   max-height: 100% !important; }
+
   max-height: none !important; }
  
 
.open-nav .mobile-toggle {
 
.open-nav .mobile-toggle {
Line 72: Line 76:
 
   overflow: hidden;
 
   overflow: hidden;
 
   background-color: #019ac8;
 
   background-color: #019ac8;
−
   -webkit-transition: all 0.3s;
+
   -webkit-transition: all 0.3s ease-in;
−
   -moz-transition: all 0.3s;
+
   -moz-transition: all 0.3s ease-in;
−
   -ms-transition: all 0.3s;
+
   -ms-transition: all 0.3s ease-in;
−
   -o-transition: all 0.3s;
+
   -o-transition: all 0.3s ease-in;
−
   transition: all 0.3s;
+
   transition: all 0.3s ease-in;
 +
}
 +
 
 +
.navbar.landingpage {
 +
  position: fixed;
 +
  top: 16px;
 
}
 
}
  
Line 86: Line 95:
 
.top-fixed {
 
.top-fixed {
 
   position: fixed;
 
   position: fixed;
−
   top: 10px;
+
   top: 16px;
 
}
 
}
 
</style>
 
</style>
  
−
<div class="navbar">
+
<div class="navbar </html>{{{extra-class}}}<html>">
 
   <div class="mobile-toggle">
 
   <div class="mobile-toggle">
 
       <img src="https://static.igem.org/mediawiki/2016/c/c9/T--TU_Darmstadt--zahnrad.png"
 
       <img src="https://static.igem.org/mediawiki/2016/c/c9/T--TU_Darmstadt--zahnrad.png"
Line 97: Line 106:
 
   <ul id="slick-menu">
 
   <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/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/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/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/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/Model">Modeling</a></li>
Line 105: Line 113:
 
     <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Collaborations">Collaborations</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/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>
 
     <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Team">Team</a></li>
 
   </ul>
 
   </ul>
Line 111: Line 120:
 
<script>
 
<script>
 
$(document).ready(function() {
 
$(document).ready(function() {
−
console.log( "ready!" );
 
 
   $('.mobile-toggle').on('click', function(evt) {
 
   $('.mobile-toggle').on('click', function(evt) {
 
     evt.preventDefault();
 
     evt.preventDefault();
−
  console.log('mobile-toggle');
 
 
     if ($('.navbar').hasClass('open-nav')) {
 
     if ($('.navbar').hasClass('open-nav')) {
 
         $('.navbar').removeClass('open-nav');
 
         $('.navbar').removeClass('open-nav');
Line 134: Line 141:
 
$(function(){
 
$(function(){
 
   $('#slick-menu a').each(function() {
 
   $('#slick-menu a').each(function() {
−
     if ($(this).prop('href') == window.location.href) {
+
     if ( (window.location.href).indexOf($(this).prop('href')) > -1) {
 
       $(this).addClass('current');
 
       $(this).addClass('current');
−
console.log(this);
 
−
console.log(window.location.href);
 
 
     }
 
     }
 
   });
 
   });
Line 144: Line 149:
  
 
<script>
 
<script>
−
var distance = $('#slick-menu').height(),
+
$(function(){
−
    $window = $(window);
+
  if( window.location.href == 'https://2016.igem.org/Team:TU_Darmstadt') {
−
console.log(distance);
+
    $('navbar').addClass('navbar-landingpage-fixed');
−
 
+
  }
−
$window.scroll(function() {
+
−
    if ( $window.scrollTop() >= distance ) {
+
−
        $('.navbar').addClass('top-fixed');
+
−
console.log('on top');
+
−
    }
+
 
});
 
});
 
</script>
 
</script>
 
</html>
 
</html>

Latest revision as of 16:01, 17 October 2016

menu