Template:Team:TU Munich/Menu

From 2011.igem.org

(Difference between revisions)
Line 166: Line 166:
</style>
</style>
-
<script>
+
<script src="https://2011.igem.org/Team:TU_Munich/menu.js?action=raw&ctype=text/js" type="text/javascript"></script>
-
// ----------------------
+
-
// Breadcrumbs Navigation
+
-
// ----------------------
+
-
 
+
-
 
+
-
function buildDepth(array,count) {
+
-
  var depthStr="";
+
-
  for (i=0;i<count;i++)
+
-
    {
+
-
    depthStr=depthStr + array[i] + "/" ;
+
-
    }
+
-
  return depthStr;
+
-
}
+
-
+
-
function buildBreadCrumbTrail(page) {
+
-
var constituentFolders = new Array();
+
-
var currentURL = page;
+
-
 
+
-
  constituentFolders=currentURL.split("/");
+
-
  var outputStr="<a href='https://2011.igem.org/Team:TU_Munich'>Home</a>";
+
-
  for (count=2;count<(constituentFolders.length);count++)
+
-
  {
+
-
        console.log('count='+count);
+
-
outputStr=outputStr + "  ::  <a href='https://2011.igem.org" + buildDepth(constituentFolders,count) + constituentFolders[count] + "'>" + capitaliseFirstLetter(constituentFolders[count]).replace(/-/gi," ") + "</a>";
+
-
    if (count == 2) {
+
-
    $("#breadcrumbs").html(constituentFolders[count]);
+
-
    $('#navtopics').css("height","20px");
+
-
    $('.nav'+constituentFolders[count]).css("display","block");
+
-
    $('#nav'+constituentFolders[count]).css("color","#4D4DDB");
+
-
    }
+
-
    if (count == 3) {
+
-
    $('#subnavtopics').css("height","20px");
+
-
    $('#navtopics').removeClass("ui-corner-bottom")
+
-
    $('.subnav'+constituentFolders[count]).css("display","block");
+
-
    $('#subnav'+constituentFolders[count]).css("color","#4D4DDB");
+
-
    }
+
-
    if (count == 4) {
+
-
    $('#'+constituentFolders[count]).css("color","#4D4DDB");
+
-
    }
+
-
  }
+
-
  outputStr="  " + outputStr + "  ";
+
-
  $("#breadcrumbs").html(outputStr);
+
-
  $("#breadcrumbs").css("font-style","bold");
+
-
}
+
-
 
+
-
function capitaliseFirstLetter(string) {
+
-
  return string.charAt(0).toUpperCase() + string.slice(1);
+
-
}
+
-
$(function() {
+
-
buildBreadCrumbTrail(window.location.pathname);
+
-
});
+
-
 
+
-
 
+
-
$(document).ready(function(){
+
-
    // ----------------------
+
-
    // Main Navigation
+
-
    // ----------------------
+
-
   
+
-
var constituentFolders = new Array();
+
-
    var currentURL = window.location.pathname;
+
-
 
+
-
    constituentFolders=currentURL.split("/");
+
-
$('#topics').mouseover(function() {
+
-
    $('.subnavpoint').not('.curlink').css("color","#CCCCCC");
+
-
$('.subnavtopic').not('.curlink').css("color","#CCCCCC");
+
-
$('#subnavtopics ul').stop().fadeTo(500,0);
+
-
$('#subnavtopics').stop().animate({height:0},{duration: 1000, easing: 'easeOutBounce', complete: function(){
+
-
$('#navtopics').addClass("ui-corner-bottom")}
+
-
}); 
+
-
});
+
-
 
+
-
 
+
-
    $('.navtopic').mouseover(function(){
+
-
$('.navpoint').not('.curlink').css("color","#CCCCCC");
+
-
$('.navtopic').not('.curlink').css("color","#CCCCCC");
+
-
$('.subnavpoint').not('.curlink').css("color","#CCCCCC");
+
-
$('.subnavtopic').not('.curlink').css("color","#CCCCCC");
+
-
$('#subnavtopics ul').stop().fadeTo(500,0);
+
-
  $('#subnavtopics').stop().animate({height:0},{duration: 1000, easing: 'easeOutBounce', complete: function(){
+
-
$('#navtopics').addClass("ui-corner-bottom")
+
-
}});
+
-
$(this).css("color","#4D4DDB");
+
-
$('#navtopics').stop().animate({height: '20px'},{duration: 1000, easing: 'easeOutBounce'});
+
-
$('#navtopics ul').css("display","none");
+
-
var vActive = $(this).attr("id");
+
-
$('.'+vActive).stop().fadeTo(500,1);
+
-
});
+
-
   
+
-
$('.navpoint').mouseover(function(){
+
-
  $('.navpoint').not('.curlink').css("color","#CCCCCC");
+
-
  $('.subnavpoint').not('.curlink').css("color","#CCCCCC");
+
-
$('.subnavtopic').not('.curlink').css("color","#CCCCCC");
+
-
$(this).css("color","#4D4DDB");
+
-
$('#subnavtopics ul').stop().fadeTo(500,0);
+
-
$('#subnavtopics').stop().animate({height:0},{duration: 1000, easing: 'easeOutBounce', complete: function(){
+
-
$('#navtopics').addClass("ui-corner-bottom")
+
-
}});
+
-
  });
+
-
 
+
-
$('.subnavtopic').mouseover(function(){
+
-
$('.navpoint').not('.curlink').css("color","#CCCCCC");
+
-
$('.subnavpoint').not('.curlink').css("color","#CCCCCC");
+
-
$('.subnavtopic').not('.curlink').css("color","#CCCCCC");
+
-
$(this).css("color","#4D4DDB");
+
-
  $('#navtopics').removeClass("ui-corner-bottom")
+
-
  $('.nav+constituentFolders[2]').css("opacity","1")
+
-
  $('#navtopics').css("opacity","1")
+
-
$('#subnavtopics').stop().animate({height: '20px'},{duration: 1000, easing: 'easeOutBounce'});
+
-
$('#subnavtopics ul').css("display","none");
+
-
var vActive = $(this).attr("id");
+
-
$('.'+vActive).stop().fadeTo(500,1);
+
-
});
+
-
   
+
-
$('.subnavpoint').mouseover(function(){
+
-
$('.subnavpoint').not('.curlink').css("color","#CCCCCC");
+
-
$(this).css("color","#4D4DDB");
+
-
}); 
+
-
    console.log(constituentFolders);
+
-
    if (constituentFolders.length>=3) {
+
-
    if (constituentFolders.length>=4 unescape(&&) $('#subnav'+constituentFolders[3]).hasClass('subnavtopic')){
+
-
        if (constituentFolders.length==5) {
+
-
        console.log('case 5');
+
-
        $('#navmenu').mouseleave(function() {
+
-
    if ($('#subnavtopics').css('height') === '0px') {
+
-
   
+
-
$('.navpoint').not('.curlink').css("color","#CCCCCC");
+
-
    $('.navtopic').not('.curlink').css("color","#CCCCCC");
+
-
    $('#nav'+constituentFolders[2]).css("color","#4D4DDB");
+
-
    $('#navtopics').stop().animate({height: '20px'},{duration: 1000, easing: 'easeOutBounce'});
+
-
    $('#navtopics ul').css("display","none");
+
-
    if ($('.nav'+constituentFolders[2]).css('display') == 'none') {
+
-
    $('.nav'+constituentFolders[2]).stop().fadeTo(500,1);
+
-
    }
+
-
    $('#navtopics').removeClass("ui-corner-bottom")
+
-
    $('#subnavtopics').stop().animate({height: '20px'},{duration: 1000, easing: 'easeOutBounce'});
+
-
    $('#subnav'+constituentFolders[3]).css("color","#4D4DDB");
+
-
    $('#subnavtopics ul').css("display","none");
+
-
    $('.subnav'+constituentFolders[3]).stop().fadeTo(500,1);
+
-
  }
+
-
else {
+
-
  $('.subnavpoint').not('.curlink').css("color","#CCCCCC");
+
-
      $('.subnavtopic').not('.curlink').css("color","#CCCCCC");
+
-
$('.navpoint').not('.curlink').css("color","#CCCCCC");
+
-
    $('.navtopic').not('.curlink').css("color","#CCCCCC");
+
-
    $('#nav'+constituentFolders[2]).css("color","#4D4DDB");
+
-
    $('#subnav'+constituentFolders[3]).css("color","#4D4DDB");
+
-
    $('#navtopics').stop().animate({height: '20px'},{duration: 1000, easing: 'easeOutBounce'});
+
-
    $('#navtopics ul').css("display","none");
+
-
    if ($('.nav'+constituentFolders[2]).css('display') == 'none') {
+
-
    $('.nav'+constituentFolders[2]).stop().fadeTo(500,1);
+
-
    }
+
-
    $('#subnav'+constituentFolders[3]).css("color","#4D4DDB");
+
-
    $('#subnavtopics ul').css("display","none");
+
-
    $('.subnav'+constituentFolders[3]).stop().fadeTo(500,1);
+
-
    }
+
-
    $('#'+constituentFolders[4]).css("color","#4D4DDB");
+
-
  });
+
-
  } // end 5
+
-
  else { //begin 4
+
-
    $('#navmenu').mouseleave(function() {
+
-
    console.log('case 4');
+
-
    if ($('#subnavtopics').css('height') === '0px') {
+
-
   
+
-
$('.navpoint').not('.curlink').css("color","#CCCCCC");
+
-
    $('.navtopic').not('.curlink').css("color","#CCCCCC");
+
-
    $('#nav'+constituentFolders[2]).css("color","#4D4DDB");
+
-
    $('#navtopics').stop().animate({height: '20px'},{duration: 1000, easing: 'easeOutBounce'});
+
-
    $('#navtopics ul').css("display","none");
+
-
    if ($('.nav'+constituentFolders[2]).css('display') == 'none') {
+
-
    $('.nav'+constituentFolders[2]).stop().fadeTo(500,1);
+
-
    }
+
-
    $('#navtopics').removeClass("ui-corner-bottom")
+
-
    $('#subnavtopics').stop().animate({height: '20px'},{duration: 1000, easing: 'easeOutBounce'});
+
-
    $('#subnav'+constituentFolders[3]).css("color","#4D4DDB");
+
-
    $('#subnavtopics ul').css("display","none");
+
-
    $('.subnav'+constituentFolders[3]).stop().fadeTo(500,1);
+
-
  }
+
-
else {
+
-
  $('.subnavpoint').not('.curlink').css("color","#CCCCCC");
+
-
      $('.subnavtopic').not('.curlink').css("color","#CCCCCC");
+
-
$('.navpoint').not('.curlink').css("color","#CCCCCC");
+
-
    $('.navtopic').not('.curlink').css("color","#CCCCCC");
+
-
    $('#nav'+constituentFolders[2]).css("color","#4D4DDB");
+
-
    $('#subnav'+constituentFolders[3]).css("color","#4D4DDB");
+
-
    $('#navtopics').stop().animate({height: '20px'},{duration: 1000, easing: 'easeOutBounce'});
+
-
    $('#navtopics ul').css("display","none");
+
-
    if ($('.nav'+constituentFolders[2]).css('display') == 'none') {
+
-
    $('.nav'+constituentFolders[2]).stop().fadeTo(500,1);
+
-
    }
+
-
    $('#subnav'+constituentFolders[3]).css("color","#4D4DDB");
+
-
    $('#subnavtopics ul').css("display","none");
+
-
    $('.subnav'+constituentFolders[3]).stop().fadeTo(500,1);
+
-
    }
+
-
  });
+
-
  } //end 4
+
-
    }
+
-
    else { //begin 3
+
-
    $('#navmenu').mouseleave(function() {
+
-
    if ($('#subnavtopics').css('height') === '0px') {
+
-
$('.navpoint').not('.curlink').css("color","#CCCCCC");
+
-
    $('.navtopic').not('.curlink').css("color","#CCCCCC");
+
-
    $('#nav'+constituentFolders[2]).css("color","#4D4DDB");
+
-
    $('#navtopics').stop().animate({height: '20px'},{duration: 1000, easing: 'easeOutBounce'});
+
-
    $('#navtopics ul').css("display","none");
+
-
    if ($('.nav'+constituentFolders[2]).css('display') == 'none') {
+
-
    $('.nav'+constituentFolders[2]).stop().fadeTo(500,1);
+
-
    }
+
-
  }
+
-
   
+
-
else {
+
-
  $('.subnavpoint').not('.curlink').css("color","#CCCCCC");
+
-
      $('.subnavtopic').not('.curlink').css("color","#CCCCCC");
+
-
      $('#subnavtopics ul').stop().fadeTo(500,0);
+
-
      $('#subnavtopics').stop().animate({height:0},{duration: 1000, easing: 'easeOutBounce', complete: function() {
+
-
$('.navpoint').not('.curlink').css("color","#CCCCCC");
+
-
    $('.navtopic').not('.curlink').css("color","#CCCCCC");
+
-
    $('#nav'+constituentFolders[2]).css("color","#4D4DDB");
+
-
    $(constituentFolders[3]).css("color","#4D4DDB");
+
-
    $('#navtopics').stop().animate({height: '20px'},{duration: 1000, easing: 'easeOutBounce'});
+
-
    $('#navtopics ul').css("display","none");
+
-
    if ($('.nav'+constituentFolders[2]).css('display') == 'none') {
+
-
    $('.nav'+constituentFolders[2]).stop().fadeTo(500,1);
+
-
    $('#subnav'+constituentFolders[3]).css("color","#4D4DDB");
+
-
    }
+
-
      }
+
-
    });
+
-
    }
+
-
  });
+
-
} // end 3
+
-
    }
+
-
    else { // begin 2
+
-
  $('#navmenu').mouseleave(function() {
+
-
    if ($('#subnavtopics').css('height') === '0px') {
+
-
        $('.navpoint').not('.curlink').css("color","#CCCCCC");
+
-
        $('.navtopic').not('.curlink').css("color","#CCCCCC");
+
-
        $('#navtopics ul').stop().fadeTo(500,0);
+
-
        $('#navtopics').stop().animate({height:0},{duration: 1000, easing: 'easeOutBounce'});
+
-
    }
+
-
    else {
+
-
      $('.subnavpoint').not('.curlink').css("color","#CCCCCC");
+
-
      $('.subnavtopic').not('.curlink').css("color","#CCCCCC");
+
-
      $('#subnavtopics ul').stop().fadeTo(500,0);
+
-
      $('#subnavtopics').stop().animate({height:0},{duration: 1000, easing: 'easeOutBounce', complete: function() {
+
-
        $('navtopics').addClass("ui-corner-bottom")
+
-
        $('.navpoint').not('.curlink').css("color","#CCCCCC");
+
-
        $('.navtopic').not('.curlink').css("color","#CCCCCC");
+
-
        $('#navtopics ul').stop().fadeTo(500,0);
+
-
        $('#navtopics').stop().animate({height:0},{duration: 1000, easing: 'easeOutBounce'});
+
-
      }
+
-
    });
+
-
    }
+
-
    });
+
-
    } // endelse 
+
-
});
+
-
</script>
+
</head>
</head>
<body>
<body>

Revision as of 18:50, 2 September 2011

Retrieved from "http://2011.igem.org/Template:Team:TU_Munich/Menu"